Bootstrap 教程
Bootstrap 網(wǎng)格系統(tǒng)
簡介
在本教程中，您將學(xué)習(xí)如何使用 Bootstrap 來創(chuàng)建網(wǎng)格系統(tǒng)（Grid System）。
正如您可能知道的，在圖形設(shè)計(jì)中，網(wǎng)格系統(tǒng)是一個(gè)二維結(jié)構(gòu)，由水平軸和垂直軸相交的區(qū)域組成，用于構(gòu)建內(nèi)容。它被廣泛應(yīng)用于平面設(shè)計(jì)的設(shè)計(jì)布局和內(nèi)容結(jié)構(gòu)。在網(wǎng)頁設(shè)計(jì)中，它是一種通過使用 HTML 和 CSS 來快速有效地創(chuàng)建一致的布局的非常有效的方法。因此，網(wǎng)格系統(tǒng)已經(jīng)成為網(wǎng)頁設(shè)計(jì)的框架或工作流程的一個(gè)重要的組件/模塊。
簡單的說，在網(wǎng)頁設(shè)計(jì)中，我們使用 HTML 和 CSS 創(chuàng)建行和列來實(shí)現(xiàn)一個(gè)網(wǎng)格。且列中包含了實(shí)際內(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è)有一個(gè)流動(dòng)網(wǎng)格系統(tǒng)，它是基于百分比的，而不是基于像素的。且可被擴(kuò)展為像默認(rèn)固定網(wǎng)格一樣具有響應(yīng)性。在本教程中我們將通過一些實(shí)例來討論默認(rèn)網(wǎng)格，流動(dòng)網(wǎng)格系統(tǒng)將在另一個(gè)單獨(dú)的教程進(jìn)行講解。
請從 "http://twitter.github.io/bootstrap/assets/bootstrap.zip" 上下載最新版的 Bootstrap 文件。您可以在我們的入門教程中了解相關(guān)的文件結(jié)構(gòu)。
從默認(rèn)網(wǎng)格入門
讓我們先從一個(gè)基本的 HTML 開始，看看如何在上面應(yīng)用默認(rèn)網(wǎng)格。
<!DOCTYPE html>
<html>
<head>
????<title>使用Bootstrap固定布局的實(shí)例</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)建垂直列。通過這兩個(gè)就可以創(chuàng)建一個(gè)三列的網(wǎng)格（每一列包含一些文本內(nèi)容），HTML 如下所示
<!DOCTYPE html> <html> <head> <title>使用Bootstrap固定布局的實(shí)例</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)的圖形表示
這樣，我們就通過對每個(gè)列使用 "span4" class，創(chuàng)建好了一個(gè)三列網(wǎng)格。"container" class 是用來保存整個(gè)結(jié)構(gòu)的。您可以在這里查看在線實(shí)例。從這一點(diǎn)，我們可以推導(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 是您想要?jiǎng)?chuàng)建的列數(shù)以及 x 等于 12（這是您可以創(chuàng)建的最大的列數(shù)）的總和。x 必須是正整數(shù)，且值必須從 1 到 12。
例如，如果您有三個(gè)等寬的列，每個(gè)列都是 class="span4"，但是如果您想讓第一個(gè)列比其他兩個(gè)更大一些，第一個(gè)列可以使用 class="span6"，其他兩個(gè)列使用 class="span3"。
如何在固定網(wǎng)格中創(chuàng)建行
接下來，在我們繼續(xù)其他實(shí)例之前，先來看看在固定網(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è)置了一個(gè)名為 hasLayout 的內(nèi)部屬性，用于修復(fù) IE6/7 的許多縮放/渲染問題。
.row:before,
.row:after {
????display: table;
????line-height: 0;
????content: "";
}
Bootstrap 使用前面的 CSS 代碼來創(chuàng)建行。它使用 ":before" 和 ":after" 的 CSS 屬性。這兩個(gè)是偽元素。":before" 用于在目標(biāo)元素之前插入一些內(nèi)容，":after" 用于在目標(biāo)元素之后插入一些內(nèi)容。"display:table;" 使得元素以表格形式呈現(xiàn)。通過設(shè)置 "line-height: 0;" 來確保每個(gè)行沒有自己的行高，通過使用 'content: ""' 來確保元素前后沒有內(nèi)容被插入。
然后使用如下規(guī)則來確保給定元素的左右兩側(cè)沒有浮動(dòng)元素。
.row:after {
????clear: both;
}
如何在固定網(wǎng)格中創(chuàng)建列
[class*="span"] {
????float: left;
????min-height: 1px;
????margin-left: 20px;
}
這是要使用的 CSS 規(guī)則。'[class*="span"]' 選擇了 class 屬性值以 'span' 開始的所有元素。現(xiàn)在使用 "float: left;" 來定位每個(gè)列彼此相鄰。使用 "min-height: 1px" 來讓所有的列有一個(gè)最小的高度為 1px，使用 "margin-left: 20px;"設(shè)置左邊距為 20px。
使用單獨(dú)的 CSS 規(guī)則來設(shè)置列寬。具體如下面的表格所示
| CSS 代碼 | 解釋 |
|---|---|
.span12 {
????width: 940px;
}
|
如果該行有一個(gè)單一的列，列寬為 940px。 |
.span11 {
????width: 860px;
}
|
如果該行有一個(gè)由 11 列合并的列，列寬為 860px。 |
.span10 {
????width: 780px;
}
|
如果該行有一個(gè)由 10 列合并的列，列寬為 780px。 |
.span9 {
????width: 700px;
}
|
如果該行有一個(gè)由 9 列合并的列，列寬為 700px。 |
.span8 {
????width: 620px;
}
|
如果該行有一個(gè)由 8 列合并的列，列寬為 620px。 |
.span7 {
????width: 540px;
}
|
如果該行有一個(gè)由 7 列合并的列，列寬為 540px。 |
.span6 {
????width: 460px;
}
|
如果該行有一個(gè)由 6 列合并的列，列寬為 460px。 |
.span5 {
????width: 380px;
}
|
如果該行有一個(gè)由 5 列合并的列，列寬為 380px。 |
.span4 {
????width: 300px;
}
|
如果該行有一個(gè)由 4 列合并的列，列寬為 300px。 |
.span3 {
????width: 220px;
}
|
如果該行有一個(gè)由 3 列合并的列，列寬為 220px。 |
.span2 {
????width: 140px;
}
|
如果該行有一個(gè)由 2 列合并的列，列寬為 140px。 |
.span1 {
????width: 60px;
}
|
單個(gè)列寬為 60px。 |
Bootstrap 默認(rèn)網(wǎng)格實(shí)例
該實(shí)例演示了如何創(chuàng)建 1 個(gè)列、2 個(gè)列、6 個(gè)列、12 個(gè)列和 4 個(gè)列（按這個(gè)順序）。
還要注意的是，所有創(chuàng)建的列被 "container" class 包圍，"container" 是通過使用 Bootstrap 來創(chuàng)建一個(gè)固定布局。
實(shí)例
<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)建的東西
在線查看
請點(diǎn)擊這里，下載上面實(shí)例的所有 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)格，點(diǎn)擊這里，查看在線演示。點(diǎn)擊這里，下載相關(guān)代碼。
默認(rèn)網(wǎng)格系統(tǒng)發(fā)揮響應(yīng)性有兩個(gè)條件。當(dāng)視口（網(wǎng)格渲染的可用空間）大于 1200px 時(shí)[通過 @media (min-width: 1200px) 獲得]，當(dāng)視口大于 768px 但小于 979px 時(shí)[通過 @media (min-width: 768px) 和 (max-width: 979px) 設(shè)置]。
偏移列：默認(rèn)網(wǎng)格
通過使用偏移，您可以把列移動(dòng)它原始位置的右側(cè)。這是通過向列添加左邊距來實(shí)現(xiàn)的。通過 Bootstrap，您可以使用 "offsetx"（其中 x 的值是一個(gè)正整數(shù)） class 和 class "spany"（其中 y 的值是一個(gè)正整數(shù)）。取決于 'offestx' 中 'x' 的值，相關(guān)的列向右移動(dòng) 'x' 個(gè)列的寬度。
偏移的寬度是在 Bootstrap CSS 中定義的。offset12 的最高左邊距是 980px，offset1 的最低左邊距是 100px。
由于默認(rèn)網(wǎng)格系統(tǒng)是基于像素的，當(dāng)應(yīng)用偏移時(shí)，您必須知道您要用于偏移的像素和要用于列的像素。這兩個(gè)加在一起必須不超過您的水平視口的像素?cái)?shù)。
在下面的實(shí)例中，我們將創(chuàng)建一個(gè)兩列的網(wǎng)格。其中，我們讓左邊的列向右移動(dòng) 4 個(gè)列。HTML 代碼如下所示：
實(shí)例
????<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>
點(diǎn)擊這里，查看在線演示點(diǎn)擊這里，下載相關(guān)代碼。
您可以通過在原生 CSS 后添加響應(yīng)式 CSS，也可以通過使用偏移列，來向默認(rèn)網(wǎng)格添加響應(yīng)性。
嵌套列：默認(rèn)網(wǎng)格
使用 Bootstrap 默認(rèn)網(wǎng)格，列可以嵌套。您只需要簡單地在列中創(chuàng)建一個(gè)行，并創(chuàng)建您想要在行中嵌套的列數(shù)。與此同時(shí)，您必須記住用來嵌套其他列的列的總列數(shù)，確保不能超過您創(chuàng)建父列時(shí)所提到的列數(shù)。
下面的實(shí)例演示如何在 Bootstrap 的默認(rèn)網(wǎng)格中嵌套列。
實(shí)例
????<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>
點(diǎn)擊這里，查看在線演示點(diǎn)擊這里，下載相關(guān)代碼。
在上面的實(shí)例中，在容器下的行有兩個(gè)列，分別被定義為 'class="span7"' 和 'class="span5"'。使得列的總數(shù)為 12?，F(xiàn)在，我們在左邊的列添加一個(gè)行，然后創(chuàng)建兩個(gè)列，分別被定義為 '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)要點(diǎn)總結(jié)：
- Bootstrap 的默認(rèn)網(wǎng)格系統(tǒng)是 940px 寬，并帶有 12 個(gè)列。
- 在網(wǎng)格中，行通過 'class="row"' 創(chuàng)建，列通過 'class="spanx"' 創(chuàng)建，其中 x 是一個(gè)正整數(shù)。所有列 x 的總和必須不超過 12。
- 通過添加 Bootstrap 的響應(yīng)式 CSS，您可以添加響應(yīng)性到默認(rèn)網(wǎng)格。
- 使用偏移來向列創(chuàng)建額外的空間。通過使用 'class="offsetx"'，其中 x 是正整數(shù)。如果您使用偏移，列的總數(shù)，包括偏移使用的數(shù)量，不能超過 11。
- 列可以嵌套。如果使用嵌套列，當(dāng)計(jì)算網(wǎng)格（容器中的一行）中列的總數(shù)時(shí)，嵌套列也要計(jì)算在內(nèi)。
- 嵌套列中也可以使用偏移。