起步 · 伪全栈技术汇总

## 使用 Bootstrap 中文网提供的免费 CDN 加速服务（同时支持 http 和 https 协议） Bootstrap 中文网为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。 ~~~  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">  <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> ~~~ ## 基本模版使用以下给出的这份超级简单的HTML模版，或者修改这些案例。我们强烈建议你对这些案例按照自己的需求进行修改，而不要简单的复制、粘贴。拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。 ~~~ <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1>你好，世界！</h1>  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <script src="js/bootstrap.min.js"></script> </body> </html> ~~~ ## 禁止响应式布局 Bootstrap 会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好。下面我们列出了如何禁用这一特性，就像这个非响应式布局实例页面一样。 ## 禁止响应式布局有如下几步： 1. 移除此 CSS 文档中提到的设置浏览器视口（viewport）的标签：<meta>。 2. 通过为 .container 类设置一个 width 值从而覆盖框架的默认 width 设置，例如 width: 970px !important; 。请确保这些设置全部放在默认的 Bootstrap CSS 文件的后面。注意，如果你把它放到媒体查询中，也可以略去 !important 。 3. 如果使用了导航条，需要移除所有导航条的折叠和展开行为。 4. 对于栅格布局，额外增加 .col-xs-* 类或替换掉 .col-md-* 和 .col-lg-*。不要担心，针对超小屏幕设备的栅格系统能够在所有分辨率的环境下展开。针对 IE8 仍然需要额外引入 Respond.js 文件（由于仍然利用了浏览器对媒体查询（media query）的支持，因此还需要做处理）。这样就禁用了 Bootstrap 对移动设备的响应式支持。 ## 禁止响应式特性的 Bootstrap 模版我们已经按照上面的步骤制作了一份案例。仔细阅读其源码并对照上面的步骤实践一下吧。 [非响应式布局实例](http://v3.bootcss.com/examples/non-responsive/) ## IE 兼容模式 Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此 <meta>标签加入到你的页面中： `<meta http-equiv="X-UA-Compatible" content="IE=edge">` 按 **F12** 键打开 IE 的调试工具，就可以看到 IE当前的渲染模式是什么。 ## 国产浏览器高速模式国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了！将下面的 <meta> 标签加入到页面中，可以让部分国产浏览器默认采用高速模式渲染页面： `<meta name="renderer" content="webkit">`