Jump Start Bootstrap 中文版 第2章

第2章 Bootstrap 網(wǎng)格系統(tǒng)

在這一章惩系，我們將討論Bootstrap一個(gè)最重要的功能：網(wǎng)格系統(tǒng)猎提。
我們將學(xué)會網(wǎng)格系統(tǒng)如何工作搔驼；我們?nèi)绾卧趹?yīng)用中使用網(wǎng)格系統(tǒng)恭陡；
我們也將創(chuàng)建簡單的網(wǎng)頁布局去更好的理解它惠勒。

什么是網(wǎng)格系統(tǒng)埋涧？

網(wǎng)格系統(tǒng)允許我們適當(dāng)?shù)貫槲覀兊木W(wǎng)站內(nèi)容提供服務(wù)围肥；它將屏幕分成多個(gè)行和列阀参，這些行和列可以用來創(chuàng)建各種類型的布局乳幸。一旦定義了行和列瞪讼，我們就可以決定將哪個(gè)HTML元素放置在何處。

Bootstrap網(wǎng)格系統(tǒng)將屏幕劃分為每行12列粹断；列的寬度根據(jù)屏幕的大小而變化符欠。因此，網(wǎng)格系統(tǒng)是響應(yīng)式的瓶埋，當(dāng)瀏覽器窗口的大小發(fā)生變化時(shí)希柿，這些列會動態(tài)地調(diào)整自身大小。根據(jù)您的設(shè)計(jì)需求养筒，您可以創(chuàng)建無限數(shù)量的行曾撤。這些行和列的交點(diǎn)形成了一個(gè)矩形網(wǎng)格來包含網(wǎng)站的內(nèi)容。

例如晕粪，在圖2.1中挤悉，我創(chuàng)建了一行，然后使用網(wǎng)格系統(tǒng)把它分成12列巫湘。我已經(jīng)改變了每一列的背景顏色來區(qū)分装悲。這里的每一列都由一個(gè)數(shù)字表示。


圖2.1

建立一個(gè)基本的網(wǎng)格

在本節(jié)中尚氛，我們將使用Bootstrap網(wǎng)格系統(tǒng)創(chuàng)建我們的第一個(gè)網(wǎng)站布局诀诊。我們將使用與我們在上一章中創(chuàng)建的相同的設(shè)置。復(fù)制在bootdemo文件夾中存在的所有文件阅嘶。然后創(chuàng)建一個(gè)名為chapter2的新文件夾属瓣，并將這些文件粘貼到其中载迄。

現(xiàn)在打開index.html，將頁面標(biāo)題更改為“Bootstrap Grid System”抡蛙，并從主體中刪除標(biāo)簽护昧。我們現(xiàn)在應(yīng)該有一個(gè)基本的HTML頁面,它看起來像這樣:

<!DOCTYPE html>
<html lang="en">
<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 Grid System</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
?3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
?1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Body content goes here -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Bootstrap建議我們應(yīng)該把所有的行和列放在一個(gè)容器內(nèi)，以確保正確的對齊和填充;Bootstrap中有兩種類型的容器類:container和container-fluid溜畅，前者在瀏覽器窗口中創(chuàng)建一個(gè)固定寬度的容器捏卓，而后者創(chuàng)建一個(gè)填滿寬度的容器。固定寬度的容器被設(shè)計(jì)為出現(xiàn)在屏幕的中央慈格，在兩邊都省略了額外的空間怠晴。因此，將所有內(nèi)容包裝在一個(gè)容器中是一種很好的做法浴捆。

在我們的demo里面蒜田，我們將使用固定寬度的容器。讓我們繼續(xù)选泻，在頁面中創(chuàng)建一個(gè)container(容器)：

<div class="container">
</div>

然后冲粤，我們在container里創(chuàng)建一個(gè)row(行)；定義完行页眯，我們就能開始創(chuàng)建列了梯捕，Bootstrap用row類來創(chuàng)建行；您可以創(chuàng)建無數(shù)行窝撵，但是它們必須放在一個(gè)容器中傀顾。為了獲得更好的結(jié)果，建議使用一個(gè)單獨(dú)的容器碌奉，其中包含所有行短曾。

<div class="container">
<div class="row">
</div>
</div>

在Bootstrap中，列被創(chuàng)建為全屏寬度被12等分后赐劣，占據(jù)的份額嫉拐。假設(shè)我們只想要一個(gè)單列，它應(yīng)該跨所有12個(gè)可用的Bootstrap列魁兼；對此婉徘，我們將使用類col-xs-12,用數(shù)字12指定要跨越的列的數(shù)量,(現(xiàn)在，你可以忽略類名中的“xs”,我們將稍后討論它)咐汞。

同樣的盖呼，在一行中生成兩個(gè)等寬的列，我們給每個(gè)列都使用類col-xs-6碉考。這將告訴Bootstrap，我們要有兩個(gè)跨過六格的列挺身；代碼如下：

<div class="container">
<div class="row">
<div class="col-xs-6">
<h4>Column 1</h4>
</div>
<div class="col-xs-6">
<h4>Column 2</h4>
</div>
</div>
</div>

結(jié)果如圖2.2所示


圖2.2

為了讓我們的列顯示清晰侯谁，讓我們給題目都添加背景顏色。我們在這個(gè)項(xiàng)目的CSS目錄下，創(chuàng)建一個(gè)新的CSS文件styless.css墙贱。這不是標(biāo)準(zhǔn)的文件名热芹，你也可以把它命名其他你希望的名字。然后惨撇，我們將在我們的index.html中的<head>位置伊脓，鏈接這個(gè)文件。

<link href="css/styles.css" rel="stylesheet">

讓我們在這個(gè)文件里添加一些CSS樣式魁衙，這樣每個(gè)列有不同的背景顏色报腔。

<div class="container">
<div class="row">
<div class="col-xs-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-6 col2">
<h4>Column 2</h4>
</div>
</div>
</div>
圖2.3

我們也需要在我們的標(biāo)記中添加類col1和col2，這樣這些列會獲得它們各自的CSS樣式剖淀，更新后的標(biāo)記如下：

但是纯蛾，"col-xs-6"中的"xs"代表什么呢？Bootstrap有四種不同的類前綴纵隔，讓列適應(yīng)四種不同尺寸的顯示器：

  1. col-xs 超小顯示器 (屏幕寬度 < 768px)
  2. col-sm 小型顯示器 (屏幕寬度 ≥ 768px)
  3. col-md 中型顯示器 (屏幕寬度 ≥ 992px)
  4. col-lg 大型顯示器 (屏幕寬度 ≥ 1200px)
    【注：盡管目前Android手機(jī)的物理分辨率越來越高翻诉，但在Android手機(jī)瀏覽器上的瀏覽器分辨率通常依舊為360x600左右，因此實(shí)際上在超小顯示器上旋轉(zhuǎn)屏幕并不能出現(xiàn)期望的 col-xs樣式切換為col-sm的目標(biāo)】

當(dāng)我們指定類col-xs-12捌刮，它意味著在超小型顯示器上碰煌，這個(gè)元素將跨越全部12格。但在大型顯示器上如何呢绅作？在上面的代碼中芦圾，我們沒有指定該<div>元素在大型顯示器上的表現(xiàn)。進(jìn)一步的棚蓄，Bootstrap將自動沿用在超小顯示器上指定的布局堕扶。因此，我們代碼中的<div>元素將在所有設(shè)備上跨越12格梭依。

讓我們驗(yàn)證下面的標(biāo)記：

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
</div>

在這代碼中稍算，我們使用了col-xs-12用于超小顯示器和col-sm-6用于小顯示器。因此役拴，所有列在超小顯示器上跨越12格糊探，它們將組成一列顯示；但在小顯示器上河闰，它們將分別占據(jù)6格科平，顯示成兩列。如圖2.4

圖2.4

讓我們在前面的代碼中再增加一行姜性。我們將復(fù)制用于在代碼中創(chuàng)建一行的相同代碼瞪慧。最終在代碼中，我們的布局包含兩行部念、四列弃酌，如下所示:

<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</div>
</div>
</div>

我增加了兩個(gè)新的類col3和col4,用來給我們的列提供不同的背景顏色氨菇。

.col3{
background: #E8AA4C;
}
.col4{
background: #FF384E;
}

運(yùn)行結(jié)果如圖2.5所示

圖2.5

案例學(xué)習(xí)：創(chuàng)建動態(tài)布局

讓我們看看如何將網(wǎng)格系統(tǒng)付諸實(shí)踐，創(chuàng)建一個(gè)動態(tài)布局妓湘，以適應(yīng)它所被查看的設(shè)備的大小查蓉。

假設(shè)我們使用Bootstrap創(chuàng)建一個(gè)博客的布局；我們給出了它的桌面顯示線框圖榜贴，如圖2.6所示

圖2.6

在線框中豌研，我們有一個(gè)橫跨整個(gè)網(wǎng)站寬度的標(biāo)題。然后我們有一個(gè)包含博客文章的三欄布局唬党。如果我們在平板電腦(豎屏模式)看到同樣的布局鹃共，它看起來非常笨拙。因此初嘹，我們重新設(shè)計(jì)了用于平板模式的線框及汉，如圖2.7所示


圖2.7

在這個(gè)設(shè)計(jì)中，我們看到標(biāo)題看起來與桌面模式相同屯烦。下面的帖子現(xiàn)在被包含在一個(gè)兩欄的布局中坷随，而不是三個(gè)。接下來驻龟，我們需要在移動設(shè)備上查看相同的網(wǎng)站温眉。移動顯示的線框如圖2.8所示。


圖2.8

我們剛剛將這兩列轉(zhuǎn)換為移動設(shè)計(jì)中的一列翁狐。
讓我們討論如何在標(biāo)記中實(shí)現(xiàn)此設(shè)計(jì)类溢。

桌面顯示下的設(shè)計(jì)

如前所述，中型顯示器被認(rèn)為大于992px露懒。桌面顯示大部分都比這個(gè)大闯冷。因此，我們將使用帶有前綴col-md的類在桌面顯示中列出列懈词。這個(gè)布局也會被遵循較大的顯示大于1200px蛇耀，因此對于這個(gè)設(shè)計(jì)我們可以忽略添加帶有前綴col-lg的類，因?yàn)樗鼈儗Σ季譀]有額外的影響坎弯。

創(chuàng)建一個(gè)名為blog.html的新HTML文件纺涤。將在前一章使用過的包含Bootstrap的基本的HTML結(jié)構(gòu)粘貼到這里；把<title>標(biāo)簽的內(nèi)容改為“My First Bootstrap Website”抠忘，并從body中刪除<h1>標(biāo)簽撩炊。blog.html的代碼，應(yīng)該是這樣的:

<!DOCTYPE html>
<html lang="en">
<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>My First Bootstrap Website</title>
<link rel="stylesheet" type="text/css"
?href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
?3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
?1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Body content goes here -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

我們需要首先制作一個(gè)容器來保存所有的博客內(nèi)容崎脉。讓我們使用一個(gè)固定寬度容器使用類container:

<div class="container">
</div>

接下來拧咳，我們在桌面線框中有一個(gè)標(biāo)題。讓我們創(chuàng)建一個(gè)行囚灼，它包含一個(gè)列骆膝，它跨越了所有12格砾淌。

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
</div>

在上面的代碼中，我使用了Bootstrap的幫助類text-center來對齊列中的文本谭网。我們現(xiàn)在已經(jīng)完成了它的頭部。

現(xiàn)在赃春，創(chuàng)建一個(gè)包含博客文章的三欄布局愉择。因?yàn)槲覀冇幸粋€(gè)總共12個(gè)引導(dǎo)列，我們將讓我們的專欄跨越4個(gè)Bootstrap每一列织中。這樣我們就有3個(gè)同樣大小的列锥涕。我們設(shè)計(jì)一種新的行并開始使用類col-md-4:

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
</div>

在兩行之間，我使用了<hr>標(biāo)簽畫了一條水平線狭吼。

是時(shí)候用一些虛擬的內(nèi)容填充這些列了层坠。我們將使用一個(gè)<h3>標(biāo)簽和一個(gè)<p>標(biāo)簽和一些lorem ipsum文本(用于檢測的文字，沒有實(shí)際含義)來達(dá)到這個(gè)目的:

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
?elit, sed do eiusmod tempor incididunt ut labore et dolore magna
?aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
?elit, sed do eiusmod tempor incididunt ut labore et dolore magna
?aliqua. </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
?elit, sed do eiusmod tempor incididunt ut labore et dolore magna
?aliqua. </p>
</div>
</div>
</div>

The blog.html如圖2.9所示

圖2.9

對于桌面版顯示的線框刁笙，我們還剩下三列的博客文章破花。這一次，我們不會為接下來的三列創(chuàng)建單獨(dú)的行疲吸。相反座每，我們將直接將這些列附加到現(xiàn)有的行中。你可能想知道我們怎么能有24列(6列在每一行中跨越4個(gè)引導(dǎo)列)摘悴。嗯,Bootstrap只允許在一行中使用12個(gè)引導(dǎo)列峭梳。如果我們試著超過這個(gè)，剩下的這些列將被調(diào)整到下一行蹂喻。這條新線將再次出現(xiàn)12個(gè)引導(dǎo)列的容量葱椭。這樣，我們就可以將所有的博客文章列綁定到單個(gè)行中口四。

讓我們繼續(xù)使用三個(gè)新列來更新代碼:

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>

最后孵运，我們將桌面線框轉(zhuǎn)換為HTML頁面，如圖2.10所示窃祝。


圖2.10

平板顯示下的設(shè)計(jì)

現(xiàn)在掐松，讓我們修改代碼，以實(shí)現(xiàn)平板電腦的線框布局粪小。與桌面顯示器不同大磺，平板電腦可以用兩種模式觀看:豎屏-肖像(Portrait)和橫屏-景觀(Landscape);平板電腦的景觀模式被認(rèn)為是中等大小的顯示器(屏幕寬度為992px);我們已經(jīng)使用了colmd-md-類。我們現(xiàn)在只剩下了豎屏視圖探膊，這是一個(gè)小型顯示器杠愧。這可以通過使用colsm-sm來實(shí)現(xiàn)。

由于我們必須在較小的顯示器上實(shí)現(xiàn)兩列布局逞壁，我們必須強(qiáng)制每一列跨越6格流济。這樣锐锣，在每一行中，我們只得到兩列(2x6格=12格)绳瘟。但這里只有一行雕憔。因此，一旦所有的12個(gè)格都被占用糖声，剩下的列將出現(xiàn)在下一行中斤彼，每次創(chuàng)建一個(gè)新的行。

讓我們繼續(xù)蘸泻，在桌面布局代碼中添加一個(gè)額外的類:col-sm-6：

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>

這樣琉苇，如圖2.11所示，我們有兩種用于平板的布局:一種是橫向模式的三欄布局悦施，一種是豎屏模式的兩欄布局并扇。


圖2.11

移動設(shè)備上的設(shè)計(jì)

和平板電腦一樣，移動設(shè)備也可以在風(fēng)景和人像模式下觀看抡诞。移動設(shè)備中的景觀視圖利用小型顯示器(屏幕寬度768px)穷蛹，我們已經(jīng)使用了colsm-sm類。移動設(shè)備中的豎屏視圖使用了額外的小型顯示器(屏幕寬度小于768px)昼汗。

對于移動設(shè)備的線框俩莽，我們必須創(chuàng)建一個(gè)單列布局。我希望您已經(jīng)知道如何在上述代碼中實(shí)現(xiàn)它乔遮。對于額外的小屏幕扮超，我們必須使用具有col_xs前綴的類。這里蹋肮，我們希望每個(gè)博客文章的列占據(jù)所有12個(gè)引導(dǎo)列出刷，這樣我們就可以每一行只有一篇博客文章。我們的類將是col-xs-12坯辩，所以讓我們繼續(xù)并將這個(gè)類添加到我們的代碼中:

<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>My First Bootstrap Blog</h1>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 1</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 2</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 3</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 4</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 5</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Post Title 6</h3>
<p>Lorem ipsum dolor sit amet ... </p>
</div>
</div>
</div>
圖2.12

最后馁龟，我們有一個(gè)完整的HTML頁面響應(yīng)式，并在任何類型上工作顯示的一列布局如圖2漆魔。12所示坷檩。你甚至可以使用一個(gè)免費(fèi)的基于云的服務(wù)，如Google drive 1改抡，然后在實(shí)際的平板電腦或移動設(shè)備上進(jìn)行測試;或者矢炼，手動調(diào)整瀏覽器寬度，動態(tài)地觀察布局變化阿纤。我希望您在理解引導(dǎo)程序的網(wǎng)格系統(tǒng)時(shí)發(fā)現(xiàn)這個(gè)案例研究很有用句灌。

嵌套列

你可以在布局中任意列中創(chuàng)建一套新的12格Bootstrap網(wǎng)格。這可以通過在一個(gè)現(xiàn)有的列中構(gòu)建一個(gè)新的行元素來完成，然后用自定義的列填充這一行胰锌。由于我們在這里啟動了一個(gè)新行骗绕，其中的任何列都可以跨12格，但是這一行的寬度將被限制到它的父類的寬度资昧。

讓我們用一個(gè)例子來說明這個(gè)問題酬土。在項(xiàng)目中創(chuàng)建一個(gè)新的HTML文件nested.html；如同之前章節(jié)討論的一樣格带，在這個(gè)HTML文件中關(guān)聯(lián)Bootstrap設(shè)置诺凡，另外，關(guān)聯(lián)我們早先設(shè)置的styles.css践惑。這個(gè)文件看起來應(yīng)該如下所示：

<!DOCTYPE html>
<html lang="en">
<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>My First Bootstrap Website</title>
<link rel="stylesheet" type="text/css"
?href="css/bootstrap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/
?3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/
?1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

讓我們在其<body>中創(chuàng)建一個(gè)container和一個(gè)row；

<div class="container">
<div class="row">
</div>
</div>

針對中型顯示器嘶卧，我們將構(gòu)建一個(gè)兩列布局尔觉。到目前為止,我們知道，要創(chuàng)建一個(gè)雙列布局芥吟，我們應(yīng)該將我們的列設(shè)為6格侦铜。因此，生成此類列的類將是col-md-6钟鸵。讓我們?yōu)榍懊娴臉?biāo)記添加兩列:

<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>

在這段代碼中钉稍，我們還從樣式中提取了兩個(gè)類。css文件:col1和col2棺耍。這兩個(gè)類將幫助我們?yōu)槲覀兊牧刑峁┮恍┍尘邦伾贡未，F(xiàn)在，HTML頁面應(yīng)該類似于圖2.13的屏幕快照蒙袍。

圖2.13

現(xiàn)在讓我們在第一列“Column 1”中進(jìn)行嵌套俊卤，并在其中新建一行:

<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>

當(dāng)我們有一個(gè)新的行，讓我們在它里面再形成兩列:

<div class="container">
<div class="row">
<div class="col-md-6 col1">
<h3>Column 1</h3>
<!-- Nesting Starts -->
<div class="row">
<div class="col-md-6 col3">
<h3>Column 4</h3>
</div>
<div class="col-md-6 col4">
<h3>Column 5</h3>
</div>
</div>
</div>
<div class="col-md-6 col2">
<h3>Column 2</h3>
</div>
</div>
</div>

正如您在圖2.14中所看到的害幅，這兩個(gè)新列現(xiàn)在被放置在第一列中消恍。這里我調(diào)用了styless.css中的樣式col3和col4，用于提供背景顏色以现。


圖2.14

在創(chuàng)建復(fù)雜的布局時(shí)狠怨，可以方便地嵌套列。您還可以進(jìn)一步嵌套最內(nèi)部的行邑遏，并在其中生成一組新的列佣赖。這個(gè)過程可以一直持續(xù)下去，直到您達(dá)到所需的布局记盒。

偏移列（Offsetting Columns）

偏移茵汰，是Bootstrap網(wǎng)格系統(tǒng)的另一個(gè)大功能。它通常用于增加一個(gè)列的左邊緣孽鸡。如果你有一個(gè)列要顯示在三格之后蹂午，你可以使用偏移功能栏豺。

可用于偏移的類包括：
col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*

假設(shè)我們希望在超小型顯示器上把一列向右偏移三格，我們可以用"col-xs-offset-3"豆胸，例如：

<div class="row">
<div class="col-xs-6 col-xs-offset-3 col1">
<h1>Hello Learnable!</h1>
</div>
</div>

這段代碼的結(jié)果是奥洼，如圖2.15所示：跨越六格的列向右偏移三格。


圖2.15
把你的列居中
請注意晚胡，這列的左右兩側(cè)都有三格的間隙灵奖。這是一種實(shí)現(xiàn)占屏幕寬度一半的列居中的好辦法。

手工渲染網(wǎng)格（重新排序）

我們也可以不理睬列在代碼中的順序估盘，對它重新排序瓷患。如果我們先寫了一個(gè)"col-md-9"的列，然后寫了一個(gè)"col-md-3"的列遣妥；我們可以輕易的調(diào)換它們在頁面上的位置擅编，方法是使用Bootstrap的類：pull和push。

<div class="row">
<div class="col-xs-9 col-xs-push-3">
<h1>Pushed Column</h1>
</div>
<div class="col-xs-3 col-xs-pull-9">
<h1>Pulled Column</h1>
</div>
</div>

在這代碼中箫踩，"col-md-9"的列被推了3格爱态，所以移向了右側(cè)，"col-md-3"的列也被向左拉了9格境钟。因此锦担，它們看起好好像在瀏覽器中交換了原來的位置。

這里列出了每一種顯示設(shè)備上對應(yīng)的push和pull類
col-xs-pull-* 和 col-xs-push-* 超小屏幕
col-sm-pull-* 和 col-sm-push-* 小型屏幕
col-md-pull-* 和 col-md-push-* 中型屏幕
col-lg-pull-* 和 col-lg-push-* 大型屏幕

你可以把“*”替換成12以內(nèi)的數(shù)字慨削，去推或拉洞渔。

小結(jié)

您可以使用Bootstrap的網(wǎng)格系統(tǒng)來生成幾乎任何類型的網(wǎng)站布局。
如果使用得當(dāng)缚态，你可以設(shè)計(jì)一個(gè)可以工作在幾乎任何類型的顯示設(shè)備的美觀且響應(yīng)迅速的網(wǎng)站痘煤。諸如嵌套、偏移和重新排序的功能猿规，也讓網(wǎng)格系統(tǒng)變的更強(qiáng)大衷快。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市姨俩，隨后出現(xiàn)的幾起案子蘸拔，更是在濱河造成了極大的恐慌，老刑警劉巖环葵，帶你破解...
    沈念sama閱讀 212,383評論 6贊 493
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件调窍，死亡現(xiàn)場離奇詭異，居然都是意外死亡张遭，警方通過查閱死者的電腦和手機(jī)邓萨，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人缔恳，你說我怎么就攤上這事宝剖。” “怎么了歉甚？”我有些...
    開封第一講書人閱讀 157,852評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵万细，是天一觀的道長。 經(jīng)常有香客問我纸泄，道長赖钞，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,621評論 1贊 284
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任聘裁，我火速辦了婚禮雪营，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘衡便。我一直安慰自己献起，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,741評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布砰诵。 她就那樣靜靜地躺著，像睡著了一般捌显。 火紅的嫁衣襯著肌膚如雪茁彭。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 49,929評論 1贊 290
  • 城市分裂傳說
    那天扶歪，我揣著相機(jī)與錄音理肺，去河邊找鬼。 笑死善镰，一個(gè)胖子當(dāng)著我的面吹牛妹萨，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播炫欺，決...
    沈念sama閱讀 39,076評論 3贊 410
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼乎完，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了品洛？” 一聲冷哼從身側(cè)響起树姨，我...
    開封第一講書人閱讀 37,803評論 0贊 268
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎桥状，沒想到半個(gè)月后帽揪，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 44,265評論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡辅斟，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,582評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年转晰，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,716評論 1贊 341
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡查邢，死狀恐怖蔗崎，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情侠坎，我是刑警寧澤蚁趁，帶...
    沈念sama閱讀 34,395評論 4贊 333
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站实胸，受9級特大地震影響他嫡，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜庐完，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,039評論 3贊 316
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一钢属、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧门躯，春花似錦淆党、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0贊 21
  • 一樁弒父案染乌，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至懂讯，卻和暖如春荷憋，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背褐望。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1贊 266
  • 情欲美人皮
    我被黑心中介騙來泰國打工勒庄， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人瘫里。 一個(gè)月前我還...
    沈念sama閱讀 46,488評論 2贊 361
  • 代替公主和親
    正文 我出身青樓实蔽，卻偏偏與公主長得像，于是被迫代替她去往敵國和親谨读。 傳聞我的和親對象是個(gè)殘疾皇子局装，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,612評論 2贊 350