Bootstrap 教程
Bootstrap 網(wǎng)格系統(tǒng)
簡介
在本教程中，您將學(xué)習(xí)如何使用 Bootstrap 來創(chuàng)建網(wǎng)格系統(tǒng)（Grid System）。
正如您可能知道的，在圖形設(shè)計中，網(wǎng)格系統(tǒng)是一個二維結(jié)構(gòu)，由水平軸和垂直軸相交的區(qū)域組成，用于構(gòu)建內(nèi)容。它被廣泛應(yīng)用于平面設(shè)計的設(shè)計布局和內(nèi)容結(jié)構(gòu)。在網(wǎng)頁設(shè)計中，它是一種通過使用 HTML 和 CSS 來快速有效地創(chuàng)建一致的布局的非常有效的方法。因此，網(wǎng)格系統(tǒng)已經(jīng)成為網(wǎng)頁設(shè)計的框架或工作流程的一個重要的組件/模塊。
簡單的說，在網(wǎng)頁設(shè)計中，我們使用 HTML 和 CSS 創(chuàng)建行和列來實現(xiàn)一個網(wǎng)格。且列中包含了實際內(nèi)容。
自版本 2.3.2 起，Bootstrap 提供了兩種類型的網(wǎng)格。默認(rèn)的網(wǎng)格系統(tǒng)是 940px 寬和 12 列。您可以添加響應(yīng)式的樣式表讓它隨著呈現(xiàn)的視口調(diào)整寬度為 724px 和 1170px。
這里還設(shè)有一個流動網(wǎng)格系統(tǒng)，它是基于百分比的，而不是基于像素的。且可被擴展為像默認(rèn)固定網(wǎng)格一樣具有響應(yīng)性。在本教程中我們將通過一些實例來討論默認(rèn)網(wǎng)格，流動網(wǎng)格系統(tǒng)將在另一個單獨的教程進行講解。
請從 "http://twitter.github.io/bootstrap/assets/bootstrap.zip" 上下載最新版的 Bootstrap 文件。您可以在我們的入門教程中了解相關(guān)的文件結(jié)構(gòu)。
從默認(rèn)網(wǎng)格入門
讓我們先從一個基本的 HTML 開始，看看如何在上面應(yīng)用默認(rèn)網(wǎng)格。
<!DOCTYPE html>
<html>
<head>
????<title>使用Bootstrap固定布局的實例</title>
????<meta name="viewport" content="width=device-width, initial-scale=1.0">
????<!-- Bootstrap -->
????<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
????<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>
Bootstrap 使用 CSS 的 class "row" 來創(chuàng)建水平行，使用 CSS 的 class "spanx"（x 的值從 1 到 12）來創(chuàng)建垂直列。通過這兩個就可以創(chuàng)建一個三列的網(wǎng)格（每一列包含一些文本內(nèi)容），HTML 如下所示
<!DOCTYPE html> <html> <head> <title>使用Bootstrap固定布局的實例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> ????<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> ????<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> ????<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div> </div> </div> </body> </html>
下面是網(wǎng)格系統(tǒng)的圖形表示
這樣，我們就通過對每個列使用 "span4" class，創(chuàng)建好了一個三列網(wǎng)格。"container" class 是用來保存整個結(jié)構(gòu)的。您可以在這里查看在線實例。從這一點，我們可以推導(dǎo)出用于創(chuàng)建給定數(shù)量列的 CSS class 的一般語法。
創(chuàng)建網(wǎng)格的一般語法：
<div class="row"> <div class="spanx"> inline elements like span, block level elements like p, div. </div> repeat <div class="spanx"> y times.
其中 y 是您想要創(chuàng)建的列數(shù)以及 x 等于 12（這是您可以創(chuàng)建的最大的列數(shù)）的總和。x 必須是正整數(shù)，且值必須從 1 到 12。
例如，如果您有三個等寬的列，每個列都是 class="span4"，但是如果您想讓第一個列比其他兩個更大一些，第一個列可以使用 class="span6"，其他兩個列使用 class="span3"。
如何在固定網(wǎng)格中創(chuàng)建行
接下來，在我們繼續(xù)其他實例之前，先來看看在固定網(wǎng)格中用來創(chuàng)建行和列的 CSS 規(guī)則。
row class 如下所示
.row {
????margin-left: -20px;
????*zoom: 1;
}
設(shè)置左邊距為負(fù)的 20px，且設(shè)置 "*zoom: 1;"。這里的 "*" 表示所有元素的 zoom 屬性都設(shè)置為 1，用來修復(fù) IE6/7 的 bug。設(shè)置 zoom 屬性為 1，即設(shè)置了一個名為 hasLayout 的內(nèi)部屬性，用于修復(fù) IE6/7 的許多縮放/渲染問題。
.row:before,
.row:after {
????display: table;
????line-height: 0;
????content: "";
}
Bootstrap 使用前面的 CSS 代碼來創(chuàng)建行。它使用 ":before" 和 ":after" 的 CSS 屬性。這兩個是偽元素。":before" 用于在目標(biāo)元素之前插入一些內(nèi)容，":after" 用于在目標(biāo)元素之后插入一些內(nèi)容。"display:table;" 使得元素以表格形式呈現(xiàn)。通過設(shè)置 "line-height: 0;" 來確保每個行沒有自己的行高，通過使用 'content: ""' 來確保元素前后沒有內(nèi)容被插入。
然后使用如下規(guī)則來確保給定元素的左右兩側(cè)沒有浮動元素。
.row:after {
????clear: both;
}
如何在固定網(wǎng)格中創(chuàng)建列
[class*="span"] {
????float: left;
????min-height: 1px;
????margin-left: 20px;
}
這是要使用的 CSS 規(guī)則。'[class*="span"]' 選擇了 class 屬性值以 'span' 開始的所有元素?，F(xiàn)在使用 "float: left;" 來定位每個列彼此相鄰。使用 "min-height: 1px" 來讓所有的列有一個最小的高度為 1px，使用 "margin-left: 20px;"設(shè)置左邊距為 20px。
使用單獨的 CSS 規(guī)則來設(shè)置列寬。具體如下面的表格所示
| CSS 代碼 | 解釋 |
|---|---|
.span12 {
????width: 940px;
}
|
如果該行有一個單一的列，列寬為 940px。 |
.span11 {
????width: 860px;
}
|
如果該行有一個由 11 列合并的列，列寬為 860px。 |
.span10 {
????width: 780px;
}
|
如果該行有一個由 10 列合并的列，列寬為 780px。 |
.span9 {
????width: 700px;
}
|
如果該行有一個由 9 列合并的列，列寬為 700px。 |
.span8 {
????width: 620px;
}
|
如果該行有一個由 8 列合并的列，列寬為 620px。 |
.span7 {
????width: 540px;
}
|
如果該行有一個由 7 列合并的列，列寬為 540px。 |
.span6 {
????width: 460px;
}
|
如果該行有一個由 6 列合并的列，列寬為 460px。 |
.span5 {
????width: 380px;
}
|
如果該行有一個由 5 列合并的列，列寬為 380px。 |
.span4 {
????width: 300px;
}
|
如果該行有一個由 4 列合并的列，列寬為 300px。 |
.span3 {
????width: 220px;
}
|
如果該行有一個由 3 列合并的列，列寬為 220px。 |
.span2 {
????width: 140px;
}
|
如果該行有一個由 2 列合并的列，列寬為 140px。 |
.span1 {
????width: 60px;
}
|
單個列寬為 60px。 |
Bootstrap 默認(rèn)網(wǎng)格實例
該實例演示了如何創(chuàng)建 1 個列、2 個列、6 個列、12 個列和 4 個列（按這個順序）。
還要注意的是，所有創(chuàng)建的列被 "container" class 包圍，"container" 是通過使用 Bootstrap 來創(chuàng)建一個固定布局。
實例
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap網(wǎng)格系統(tǒng)例子 - w3cschool Bootstrap 教程</title>
<meta name="description" content="Creating a 16 columns Grid with Bootstrap. Learn with examples to create a Grid System in Bootstrap.">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
????.span12 h1{color:#FE6E4C; font-weight: bold; padding: 5px;}
????h3 {margin: 10px 0 10px 0;}
</style>
</head>
<body>
<div class="container">
????<div class="row">
????????<div class="span12">
????????????<h1>w3cschool.cc is a web design and development tutorial.</h1>
????????</div>
????</div>
????<div class="row">
????????<div class="span12">
????????????<p>w3cschool offers web development tutorials. We believe in Open Source. Love standards. And prioritize simplicity and readability while serving content. With 3000+ unique content pages and thousands of examples, we are comprehensive. We have online practice editors to play around with the example codes.</p>
????????</div>
????</div>
????<div class="row">
????????<div class="span12">
????????????<h3>Some of the topics and more... :</h3>
????????</div>
????????<div class="span2">
????????????<p><img src="images/html5_logo.png" width="140" height="86" alt="html5 logo" /></p>
????????</div>
????????<div class="span2">
????????????<p><img src="images/javascript-logo.png" width="140" height="86" alt="javascript logo" /></p>
????????</div>
????????<div class="span2">
????????????<p><img src="images/json.gif" width="140" height="86" alt="JSON logo" /></p>
????????</div>
????????<div class="span2">
????????????<p><img src="images/php.png" width="140" height="86" alt="PHP logo" /></p>
????????</div>
????????<div class="span2">
????????????<p><img src="images/mysql-logo.png" width="140" height="86" alt="MySQL logo" /></p>
????????</div>
????????<div class="span2">
????????????<p><img src="images/browser-statistics.png" width="140" height="86" alt="Browser Statistics logo" /></p>
????????</div>
????</div>
????<div class="row">
????????<div class="span12">
????????????<h3>Social networking sites to share:</h3>
????????</div>
????</div>
????<div class="row">
????????<div class="span1">
????????????<p><img src="images/gplus.png" width="50" height="49" alt="GPlus logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/twitter.png" width="50" height="38" alt="Twitter logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/orkut.png" width="50" height="55" alt="Orkut logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/ipad.png" width="50" height="53" alt="iPad logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/digo.png" width="50" height="54" alt="Digo logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/zapface.png" width="51" height="53" alt="Zapface logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/facebook.png" width="48" height="53" alt="facebook logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/netvibes.png" width="51" height="53" alt="Netvibes logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/linkedin.png" width="49" height="54" alt="LinkedIn logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/newsvine.png" width="48" height="53" alt="Newsvine logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/blogger.png" width="51" height="53" alt="Blogger logo" /></p>
????????</div>
????????<div class="span1">
????????????<p><img src="images/reditt.png" width="48" height="57" alt="Reddit logo" /></p>
????????</div>
????</div>
????<div class="row">
????????<div class="span3">
????????????<h3>Fontend Development:</h3>
????????????<p>HTML4.0, XHTML1.0, CSS2.1, HTML5, CSS3, JavaScript</p>
????????</div>
????????<div class="span3">
????????????<h3>Backend Developemt:</h3>
????????????<p>PHP, Ruby, Python, Java, ASP.NET, SCALA</p>
????????</div>
????????<div class="span3">
????????????<h3>Database Management:</h3>
????????????<p>SQL, MySQL POstgreSQL, NoSQL, MongoDB</p>
????????</div>
????????<div class="span3">
????????????<h3>APIs, Tools and Tips:</h3>
????????????<p>Google Plus API, Twitter Bootstrap, JSON, Firebug, WebPNG</p>
????????</div>
????</div>
</div>
</body>
</html>
以下就是您將創(chuàng)建的東西
在線查看
請點擊這里，下載上面實例的所有 HTML、CSS、JS 和圖像文件。
添加響應(yīng)性到默認(rèn)網(wǎng)格
如果您想要給 Bootstrap 的默認(rèn)網(wǎng)格添加響應(yīng)性能，只需要在 HTML 文件的原生 CSS 后添加
<meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">
如需查看帶有響應(yīng)性的默認(rèn)網(wǎng)格，點擊這里，查看在線演示。點擊這里，下載相關(guān)代碼。
默認(rèn)網(wǎng)格系統(tǒng)發(fā)揮響應(yīng)性有兩個條件。當(dāng)視口（網(wǎng)格渲染的可用空間）大于 1200px 時[通過 @media (min-width: 1200px) 獲得]，當(dāng)視口大于 768px 但小于 979px 時[通過 @media (min-width: 768px) 和 (max-width: 979px) 設(shè)置]。
偏移列：默認(rèn)網(wǎng)格
通過使用偏移，您可以把列移動它原始位置的右側(cè)。這是通過向列添加左邊距來實現(xiàn)的。通過 Bootstrap，您可以使用 "offsetx"（其中 x 的值是一個正整數(shù)） class 和 class "spany"（其中 y 的值是一個正整數(shù)）。取決于 'offestx' 中 'x' 的值，相關(guān)的列向右移動 'x' 個列的寬度。
偏移的寬度是在 Bootstrap CSS 中定義的。offset12 的最高左邊距是 980px，offset1 的最低左邊距是 100px。
由于默認(rèn)網(wǎng)格系統(tǒng)是基于像素的，當(dāng)應(yīng)用偏移時，您必須知道您要用于偏移的像素和要用于列的像素。這兩個加在一起必須不超過您的水平視口的像素數(shù)。
在下面的實例中，我們將創(chuàng)建一個兩列的網(wǎng)格。其中，我們讓左邊的列向右移動 4 個列。HTML 代碼如下所示：
實例
????<div class="row">
????????<div class="span4 offset4">
????????????<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>
????????</div>
????????<div class="span3">
????????????<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>
????????</div>
????</div>
</div>
點擊這里，查看在線演示點擊這里，下載相關(guān)代碼。
您可以通過在原生 CSS 后添加響應(yīng)式 CSS，也可以通過使用偏移列，來向默認(rèn)網(wǎng)格添加響應(yīng)性。
嵌套列：默認(rèn)網(wǎng)格
使用 Bootstrap 默認(rèn)網(wǎng)格，列可以嵌套。您只需要簡單地在列中創(chuàng)建一個行，并創(chuàng)建您想要在行中嵌套的列數(shù)。與此同時，您必須記住用來嵌套其他列的列的總列數(shù)，確保不能超過您創(chuàng)建父列時所提到的列數(shù)。
下面的實例演示如何在 Bootstrap 的默認(rèn)網(wǎng)格中嵌套列。
實例
????<div class="row">
????????<div class="span7">
????????????<div class="row">
????????????????<div class="span4">
????????????????????<p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p>
????????????????</div>
????????????????<div class="span3">
????????????????????<p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p>
????????????????</div>
????????????</div>
????????</div>
????????<div class="span5">
????????????<p>Maecenas aliquet velit vel turpis. Mauris neque metus, malesuada nec, ultricies sit amet, porttitor mattis, enim. In massa libero, interdum nec, interdum vel, blandit sed, nulla. In ullamcorper, est eget tempor cursus, neque mi consectetuer mi, a ultricies massa est sed nisl. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin nulla arcu, nonummy luctus, dictum eget, fermentum et, lorem. Nunc porta convallis pede.</p>
????????</div>
????</div>
</div>
點擊這里，查看在線演示點擊這里，下載相關(guān)代碼。
在上面的實例中，在容器下的行有兩個列，分別被定義為 'class="span7"' 和 'class="span5"'。使得列的總數(shù)為 12。現(xiàn)在，我們在左邊的列添加一個行，然后創(chuàng)建兩個列，分別被定義為 'class="span4"' 和 'class="span3"'。因此，它遵守它的父列規(guī)定的列的總數(shù)（7=4+3）。
您也可以在這里添加響應(yīng)性能。
結(jié)論
在本教程中，我們已經(jīng)討論了 Bootstrap 的默認(rèn)網(wǎng)格系統(tǒng)。本教程是基于 Bootstrap 的 V2.3.2。下面是本教程中相關(guān)要點總結(jié)：
- Bootstrap 的默認(rèn)網(wǎng)格系統(tǒng)是 940px 寬，并帶有 12 個列。
- 在網(wǎng)格中，行通過 'class="row"' 創(chuàng)建，列通過 'class="spanx"' 創(chuàng)建，其中 x 是一個正整數(shù)。所有列 x 的總和必須不超過 12。
- 通過添加 Bootstrap 的響應(yīng)式 CSS，您可以添加響應(yīng)性到默認(rèn)網(wǎng)格。
- 使用偏移來向列創(chuàng)建額外的空間。通過使用 'class="offsetx"'，其中 x 是正整數(shù)。如果您使用偏移，列的總數(shù)，包括偏移使用的數(shù)量，不能超過 11。
- 列可以嵌套。如果使用嵌套列，當(dāng)計算網(wǎng)格（容器中的一行）中列的總數(shù)時，嵌套列也要計算在內(nèi)。
- 嵌套列中也可以使用偏移。