起步 · 偽全棧技術匯總

## 使用 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">`