Bootstrap + css入門

時間: 2014-09-11 15:51:05 分類: 企業博客閱讀量：

分享到：

使用 Bootstrap 中文網提供的免費 CDN 加速服務

使用 Bootstrap 中文網提供的免費 CDN 加速服務

Bootstrap 中文網為 Bootstrap 專門構建了自己的免費 CDN 加速服務?；趪鴥仍茝S商的 CDN 服務，訪問速度更快、加速效果更明顯、沒有速度和帶寬限制、永久免費。Bootstrap 中文網還對大量的前端開源工具庫提供了 CDN 加速服務，請進入BootCDN 主頁查看更多可用的工具庫。

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

通過 Bower 進行安裝

通過 Bower 可以安裝并管理 Bootstrap 的Less、CSS、JavaScript和字體文件。

$ bower install bootstrap

包含的內容

Bootstrap 提供了兩種形式的壓縮包，在下載下來的壓縮包內可以看到以下目錄和文件，這些文件按照類別放到了不同的目錄內，并且提供了壓縮與未壓縮兩種版本。

Bootstrap 插件全部依賴 jQuery

請注意，Bootstrap 的所有 JavaScript 插件都依賴 jQuery，因此 jQuery 必須在 Bootstrap 之前引入，就像在基本模版中所展示的一樣。在 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。

預編譯版

下載壓縮包之后，將其解壓縮到任意目錄即可看到以下（壓縮版的）目錄結構：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

這是最基本的 Bootstrap 文件組織形式：未壓縮版的文件可以在任意web項目中直接使用。我們同時提供了壓縮（bootstrap.min.*）與未壓縮 (bootstrap.*) 的 CSS 和 JS 文件。字體圖標文件來自于 Glyphicons。

Bootstrap 源碼

Bootstrap 源碼包含了預先編譯的 CSS、JavaScript 和圖標字體文件，并且還有 LESS、JavaScript 和文檔的源碼。具體來說，主要文件組織結構如下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/、js/ 和 fonts/ 目錄分別包含了 CSS、JS 和字體圖標的源碼。dist/ 目錄包含了上面所說的預編譯 Bootstrap 包內的所有文件。docs/ 包含了所有文檔的源碼文件，examples/ 目錄是 Bootstrap 官方提供的實例工程。除了這些，其他文件還包含 Bootstrap 安裝包的定義文件、許可證文件和編譯腳本等。

編譯 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作為編譯系統，并且對外提供了一些方便的方法用于編譯整個框架。下面講解的就是如何編譯源碼、運行測試用例等內容。

安裝 Grunt

安裝 Grunt 前，你需要首先下載并安裝 node.js （npm 已經包含在內）。npm 是 node packaged modules 的簡稱，它的作用是基于 node.js 管理擴展包之間的依賴關系。
然后在命令行中輸入以下命令： 1.在全局環境中安裝 grunt-cli ：npm install -g grunt-cli 。
2.進入 /bootstrap/ 根目錄，然后執行 npm install 命令。npm 將讀取 package.json 文件并自動安裝此文件中列出的所有被依賴的擴展包。

上述步驟完成后，你就可以運行 Bootstrap 所提供的各個 Grunt 命令了。

可用的 Grunt 命令

grunt dist （僅編譯 CSS 和 JavaScript 文件）

重新生成 /dist/ 目錄，并將編譯壓縮后的 CSS 和 JavaScript 文件放入這個目錄中。作為一名 Bootstrap 用戶，大部分情況下你只需要執行這一個命令。

grunt watch （監測文件的改變，并運行指定的 Grunt 任務）

監測 Less 源碼文件的改變，并自動重新將其編譯為 CSS 文件。

grunt test （運行測試用例）

在 PhantomJS 環境中運行 JSHint 和 QUnit 自動化測試用例。

grunt （重新構建所有內容并運行測試用例）

編譯并壓縮 CSS 和 JavaScript 文件、構建文檔站點、對文檔做 HTML5 校驗、重新生成定制工具所需的資源文件等。此命令只有在你對 Bootstrap 深度研究時才有用。

除錯

如果你在安裝依賴包或者運行 Grunt 命令時遇到了問題，請首先刪除 npm 自動生成的 /node_modules/ 目錄，然后，再次運行 npm install 命令。

基本模板

使用以下給出的這份超級簡單的 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="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

社區

Bootstrap 有成熟、強大的社區。如果你希望隨時獲取 Bootstrap 的最新消息，請關注以下社區資源。
•閱讀并訂閱 Bootstrap 官方博客。
•通過 IRC （irc.freenode.net 服務器）與其他 Bootstrap 粉絲交流，我們在 ##twitter-bootstrap 頻道。
•如果使用 Bootstrap 過程中遇到問題，請在 StackOverflow 上交流。請搜索 twitter-bootstrap-3 關鍵詞。
•參觀其他同學基于 Bootstrap 構建的網站，請進這里：Bootstrap 優站精選.

你還可以在 Twitter 上關注英文官方賬號 @twbootstrap ，這里有最新的八卦和有趣的視頻。（ :( 原來和技術不沾邊?。。?/p>

中國用戶請關注我們的官方微博賬號：@Bootstrap中文網。我們定期分享新技術和新資訊。

禁止響應式布局

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 模版

我們已經按照上面的步驟制作了一份案例。仔細閱讀其源碼并對照上面的步驟實踐一下吧。

非響應式布局實例

從 v2.x 版本升級到 v3.x 版本

你在找從老版本升級到 Bootstrap v3.x 版本的方法嗎？請查看我們整理的升級指南吧。

瀏覽器和設備的支持情況

Bootstrap 的目標是在最新的桌面和移動瀏覽器上有最佳的表現，也就是說，在較老舊的瀏覽器上可能會導致某些組件表現出的樣式有些不同，但是功能是完整的。

被支持的瀏覽器

特別注意，我們堅決支持這些瀏覽器的最新版本。在 Windows 平臺，我們支持 Internet Explorer 8-11。請看下面列出的詳細信息。

Chrome

Firefox

Internet Explorer

Opera

Safari

Android
? 支持 ? 支持 N/A ? 不支持 N/A

iOS
? 支持 N/A ? 不支持 ? 支持

Mac OS X
? 支持 ? 支持 ? 支持 ? 支持

Windows
? 支持 ? 支持 ? 支持 ? 支持 ? 不支持

Bootstrap 在 Chromium 和 Linux 版 Chrome、Linux 版 Firefox 和 Internet Explorer 7 上的表現也是很不錯的，雖然我們不對其進行官方支持。

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

Internet Explorer 8 和 9

Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多 CSS3 屬性和 HTML5 元素 -- 例如，圓角矩形和投影 -- 是肯定不被支持的。另外， Internet Explorer 8 需要 Respond.js 配合才能實現對媒體查詢（media query）的支持。

CSS3 特性

Internet Explorer 8

Internet Explorer 9

border-radius
? 不支持 ? 支持

box-shadow
? 不支持 ? 支持

transform
? 不支持 ? 支持，但是需要添加 -ms 前綴

transition
? 不支持

placeholder
? 不支持

請參考 Can I use... 以獲取詳細的 CSS3 和 HTML5 特性在各個瀏覽器上的支持情況。

Internet Explorer 8 與 Respond.js

在開發環境和生產（線上）環境需要支持 Internet Explorer 8 時，請務必注意下面給出的警告。

Respond.js 與跨域（cross-domain） CSS 的問題

如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）時需要一些額外的設置。請參考 Respond.js 文檔獲取詳細信息。

Respond.js 與 file:// 協議

由于瀏覽器的安全機制，Respond.js 不能在通過 file:// 協議（打開本地HTML文件所用的協議）訪問的頁面上發揮正常的功能。如果需要測試 IE8 下面的響應式特性，務必通過 http 協議訪問頁面（例如搭建 apache、nginx 等）。請參考 Respond.js 文檔獲取更多信息。

Respond.js 與 @import 指令

Respond.js 不支持通過 @import 指令所引入的 CSS 文件。例如，Drupal 一般被配置為通過 @import 指令引入CSS文件，Respond.js 對其將無法起到作用。請參考 Respond.js 文檔獲取更多信息。

Internet Explorer 8 與 box-sizing 屬性

當 box-sizing: border-box; 與 min-width、max-width、min-height 或 max-height 一同使用時，IE8 不能完全支持 box-sizing 屬相。由于此原因，從 Bootstrap v3.0.1 版本開始，我們不再為 .container 賦予 max-width 屬性。

IE 兼容模式

Bootstrap 不支持 IE 古老的兼容模式。為了讓 IE 瀏覽器運行最新的渲染模式下，建議將此 <meta> 標簽加入到你的頁面中：

按 F12 鍵打開 IE 的調試工具，就可以看到 IE 當前的渲染模式是什么。

此 meta 標簽被包含在了所有 Bootstrap 文檔和實例頁面中，為的就是在每個被支持的 IE 版本中擁有最好的繪制效果。

請參考這個發表在 StackOverflow 上的問題。

國產瀏覽器高速模式

國內瀏覽器廠商一般都支持兼容模式（即 IE 內核）和高速模式（即 webkit 內核），不幸的是，所有國產瀏覽器都是默認使用兼容模式，這就造成由于低版本 IE （IE8 及以下）內核讓基于 Bootstrap 構建的網站展現效果很糟糕的情況。幸運的是，國內瀏覽器廠商逐漸意識到了這一點，某些廠商已經開始有所作為了！

將下面的 <meta> 標簽加入到頁面中，可以讓部分國產瀏覽器默認采用高速模式渲染頁面：

目前只有360瀏覽器支持此 <meta> 標簽。希望更多國內瀏覽器盡快采取行動、盡快進入高速時代！

Windows 8 中的 Internet Explorer 10 和 Windows Phone 8

Internet Explorer 10 并沒有對屏幕的寬度和視口（viewport）的寬度進行區分，這就導致 Bootstrap 中的媒體查詢并不能很好的發揮作用。為了解決這個問題，你可以引入下面列出的這段 CSS 代碼暫時修復此問題：

@-ms-viewport { width: device-width; }

然而，這樣做并不能對 Windows Phone 8 Update 3 (a.k.a. GDR3) 版本之前的設備起作用，由于這樣做將導致 Windows Phone 8 設備按照桌面瀏覽器的方式呈現頁面，而不是較窄的“手機”呈現方式，為了解決這個問題，還需要加入以下 CSS 和 JavaScript 代碼來化解此問題。

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement('style')
msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
)
document.querySelector('head').appendChild(msViewportStyle)
}

請查看 Windows Phone 8 and Device-Width 以了解更多信息。

作為提醒，我們將上面的代碼加入到了所有 Bootstrap 文檔和實例頁面中。

Safari 對百分比數字湊整的問題

從 OS X 版 Safari v7.0.1 和 iOS 版 Safari v7.0.1 開始，Safari 的頁面繪制引擎對于處理 .col-*-1 類所對應的很長的百分比小數存在 bug。也就是說，如果你在一行（row）之中定義了12個單獨的列（.col-*-1），你就會看到這一行比其他行要短一些。我們目前解決不了這個問題 (Bug 編號 #9282)，但是你可以避免：
•為最后一列添加 .pull-right 類，將其暴力向右對齊
•手動調整百分比數字，讓其針對Safari表現更好（這比第一種方式更困難）

我們將會繼續跟蹤此問題，如果有更簡易的解決方案，我們會立即更新代碼。

模態框、導航條和虛擬鍵盤

Overflow and scrolling

<body> 元素在 iOS 和 Android 上對 overflow: hidden 的支持很有限。結果就是，在這兩種設備上的瀏覽器中，當你滾動屏幕超過模態框的頂部或底部時，<body> 中的內容將開始隨著滾動。

虛擬鍵盤

還有，如果你正在使用 fixed 定位的導航條或在模態框上面使用輸入框，還會遇到 iOS 在頁面繪制上的 bug，當觸發虛擬鍵盤之后，其不會更新 fixed 定位的元素的位置。這里有幾種解決方案，包括將 fixed 定位轉變為 position: absolute 定位，或者啟動一個定時器手工修正組件的位置。這些沒有加入 Bootstrap 中，因此，需要由你自己選擇最好的解決方案并加入到你的應用中。

導航條上的下拉菜單

在 iOS 設備上，由于導航組件（nav）的復雜的 z-indexing 屬性，.dropdown-backdrop 元素并未被使用。因此，為了關閉導航條上的下拉菜單，必須直接點擊下拉菜單上的元素（或者任何其他能夠觸發 iOS 上 click 事件的元素）。

瀏覽器的縮放功能

頁面縮放功能不可避免的會將某些組件搞得亂七八糟，不光是 Bootstrap ，整個互聯網上的所有頁面都是這樣。針對具體問題，我們或許可以修復它（如果有必要的話，請先搜索一下你的問題，看看是否已有解決方案，然后在向我們提交 issue）。然而，我們更傾向于忽略這些問題，由于這些問題除了一些 hack 手段，一般沒有直接的解決方案。

打印機的視口（viewport）

即使在新版的瀏覽器上，打印功能仍然有問題。具體來說，從 Chrome v32 版本開始，不管設置的邊距（margin）是多少，打印頁面時 Chrome 所用的視口（viewport）寬度都比實際的紙張此存窄很多。這就導致 Bootstrap 激活并展示出針對超小屏幕設備的樣式。請查看編號 #12078 的 Bug 詳情。我們建議的解決方案：
•

對第三方組件的支持

雖然我們并不官方支持任何第三方插件，我們還是提供一些建議，幫你避免可能在你的項目中會出現的問題。

box-sizing 屬性

某些第三方軟件，包括 Google 地圖和 Google 定制搜索引擎都會由于 * { box-sizing: border-box; } 的設置而產生沖突，這一設置使 padding 不影響頁面元素最終寬度的計算。更多信息請參考盒模型與尺寸計算 - CSS Tricks。

根據不同情況，你可能需要根據情況覆蓋（第1種選擇）或為所有區域設置（第2種選擇）。

/* Box-sizing resets
*
* 為了避免 Bootstrap 設置的全局盒模型所帶來的影響，可以重置單個頁面元素或覆蓋整個區域的盒模型。
* 你有兩種選擇：覆蓋單個頁面元素或重置整個區域。它們都可以通過純 CSS 或 LESS 代碼的形式實現。
*/

/* Option 1A: 通過 CSS 代碼覆蓋單個頁面元素的盒模型 */
.element {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* Option 1B: 通過使用 Bootstrap 提供的 LESS mixin 覆蓋單個頁面元素的盒模型 */
.element {
.box-sizing(content-box);
}

/* Option 2A: 通過 CSS 代碼重置整個區域 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

/* Option 2B: 通過使用自定義的 LESS mixin 重置整個區域 */
.reset-box-sizing {
&,
*,
*:before,
*:after {
.box-sizing(content-box);
}
}
.element {
.reset-box-sizing();
}

可訪問性

Bootstrap 遵循統一的 web 標準，另外，通過做一些少量的修改，還可以讓使用輔助設備（AT - Assistive Technology）上網的人群訪問你的站點。

跳過導航區

如果你的導航部分包含很多鏈接，并且在 DOM 結構上也是排列在主內容之前，那么，建議在緊跟 <body> 標簽后面添加一個 Skip to main content（直接進入主內容區）的鏈接。(這里解釋了這樣做的原因)

<body>
<a href="#content" class="sr-only sr-only-focusable">Skip to main content （直接進入主內容區）</a>
<div class="container" id="content">
頁面的主要內容。
</div>
</body>

標題嵌套

當標題嵌套時 (<h1> - <h6>)，你的文檔的主標題應該是 <h1> 標簽。隨后的標題邏輯上就應該使用 <h2> - <h6> ，這樣，屏幕閱讀器就可以構造出頁面的內容列表了。

未經允許不得轉載：帥東科技網站建設

文章分類