第2章 Bootstrap 網格系統
在這一章，我們將討論Bootstrap一個最重要的功能：網格系統。
我們將學會網格系統如何工作；我們如何在應用中使用網格系統；
我們也將創建簡單的網頁布局去更好的理解它。
什么是網格系統？
網格系統允許我們適當地為我們的網站內容提供服務；它將屏幕分成多個行和列，這些行和列可以用來創建各種類型的布局。一旦定義了行和列，我們就可以決定將哪個HTML元素放置在何處。
Bootstrap網格系統將屏幕劃分為每行12列；列的寬度根據屏幕的大小而變化。因此，網格系統是響應式的，當瀏覽器窗口的大小發生變化時，這些列會動態地調整自身大小。根據您的設計需求，您可以創建無限數量的行。這些行和列的交點形成了一個矩形網格來包含網站的內容。
例如，在圖2.1中，我創建了一行，然后使用網格系統把它分成12列。我已經改變了每一列的背景顏色來區分。這里的每一列都由一個數字表示。
建立一個基本的網格
在本節中，我們將使用Bootstrap網格系統創建我們的第一個網站布局。我們將使用與我們在上一章中創建的相同的設置。復制在bootdemo文件夾中存在的所有文件。然后創建一個名為chapter2的新文件夾，并將這些文件粘貼到其中。
現在打開index.html，將頁面標題更改為“Bootstrap Grid System”，并從主體中刪除標簽。我們現在應該有一個基本的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建議我們應該把所有的行和列放在一個容器內，以確保正確的對齊和填充;Bootstrap中有兩種類型的容器類:container和container-fluid，前者在瀏覽器窗口中創建一個固定寬度的容器，而后者創建一個填滿寬度的容器。固定寬度的容器被設計為出現在屏幕的中央，在兩邊都省略了額外的空間。因此，將所有內容包裝在一個容器中是一種很好的做法。
在我們的demo里面，我們將使用固定寬度的容器。讓我們繼續，在頁面中創建一個container(容器)：
<div class="container">
</div>
然后，我們在container里創建一個row(行)；定義完行，我們就能開始創建列了，Bootstrap用row類來創建行；您可以創建無數行，但是它們必須放在一個容器中。為了獲得更好的結果，建議使用一個單獨的容器，其中包含所有行。
<div class="container">
<div class="row">
</div>
</div>
在Bootstrap中，列被創建為全屏寬度被12等分后，占據的份額。假設我們只想要一個單列，它應該跨所有12個可用的Bootstrap列；對此，我們將使用類col-xs-12,用數字12指定要跨越的列的數量,(現在，你可以忽略類名中的“xs”,我們將稍后討論它)。
同樣的，在一行中生成兩個等寬的列，我們給每個列都使用類col-xs-6。這將告訴Bootstrap，我們要有兩個跨過六格的列；代碼如下：
<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>
結果如圖2.2所示
為了讓我們的列顯示清晰，讓我們給題目都添加背景顏色。我們在這個項目的CSS目錄下，創建一個新的CSS文件styless.css。這不是標準的文件名，你也可以把它命名其他你希望的名字。然后，我們將在我們的index.html中的<head>位置，鏈接這個文件。
<link href="css/styles.css" rel="stylesheet">
讓我們在這個文件里添加一些CSS樣式，這樣每個列有不同的背景顏色。
<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>
我們也需要在我們的標記中添加類col1和col2，這樣這些列會獲得它們各自的CSS樣式，更新后的標記如下：
但是，"col-xs-6"中的"xs"代表什么呢？Bootstrap有四種不同的類前綴，讓列適應四種不同尺寸的顯示器：
- col-xs 超小顯示器 (屏幕寬度 < 768px)
- col-sm 小型顯示器 (屏幕寬度 ≥ 768px)
- col-md 中型顯示器 (屏幕寬度 ≥ 992px)
- col-lg 大型顯示器 (屏幕寬度 ≥ 1200px)
【注：盡管目前Android手機的物理分辨率越來越高，但在Android手機瀏覽器上的瀏覽器分辨率通常依舊為360x600左右，因此實際上在超小顯示器上旋轉屏幕并不能出現期望的 col-xs樣式切換為col-sm的目標】
當我們指定類col-xs-12，它意味著在超小型顯示器上，這個元素將跨越全部12格。但在大型顯示器上如何呢？在上面的代碼中，我們沒有指定該<div>元素在大型顯示器上的表現。進一步的，Bootstrap將自動沿用在超小顯示器上指定的布局。因此，我們代碼中的<div>元素將在所有設備上跨越12格。
讓我們驗證下面的標記：
<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格，它們將組成一列顯示；但在小顯示器上，它們將分別占據6格，顯示成兩列。如圖2.4
讓我們在前面的代碼中再增加一行。我們將復制用于在代碼中創建一行的相同代碼。最終在代碼中，我們的布局包含兩行、四列，如下所示:
<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>
我增加了兩個新的類col3和col4,用來給我們的列提供不同的背景顏色。
.col3{
background: #E8AA4C;
}
.col4{
background: #FF384E;
}
運行結果如圖2.5所示
案例學習：創建動態布局
讓我們看看如何將網格系統付諸實踐，創建一個動態布局，以適應它所被查看的設備的大小。
假設我們使用Bootstrap創建一個博客的布局；我們給出了它的桌面顯示線框圖，如圖2.6所示
在線框中，我們有一個橫跨整個網站寬度的標題。然后我們有一個包含博客文章的三欄布局。如果我們在平板電腦(豎屏模式)看到同樣的布局，它看起來非常笨拙。因此，我們重新設計了用于平板模式的線框，如圖2.7所示
在這個設計中，我們看到標題看起來與桌面模式相同。下面的帖子現在被包含在一個兩欄的布局中，而不是三個。接下來，我們需要在移動設備上查看相同的網站。移動顯示的線框如圖2.8所示。
我們剛剛將這兩列轉換為移動設計中的一列。
讓我們討論如何在標記中實現此設計。
桌面顯示下的設計
如前所述，中型顯示器被認為大于992px。桌面顯示大部分都比這個大。因此，我們將使用帶有前綴col-md的類在桌面顯示中列出列。這個布局也會被遵循較大的顯示大于1200px，因此對于這個設計我們可以忽略添加帶有前綴col-lg的類，因為它們對布局沒有額外的影響。
創建一個名為blog.html的新HTML文件。將在前一章使用過的包含Bootstrap的基本的HTML結構粘貼到這里；把<title>標簽的內容改為“My First Bootstrap Website”，并從body中刪除<h1>標簽。blog.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>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>
我們需要首先制作一個容器來保存所有的博客內容。讓我們使用一個固定寬度容器使用類container:
<div class="container">
</div>
接下來，我們在桌面線框中有一個標題。讓我們創建一個行，它包含一個列，它跨越了所有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來對齊列中的文本。我們現在已經完成了它的頭部。
現在，創建一個包含博客文章的三欄布局。因為我們有一個總共12個引導列，我們將讓我們的專欄跨越4個Bootstrap每一列。這樣我們就有3個同樣大小的列。我們設計一種新的行并開始使用類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>標簽畫了一條水平線。
是時候用一些虛擬的內容填充這些列了。我們將使用一個<h3>標簽和一個<p>標簽和一些lorem ipsum文本(用于檢測的文字，沒有實際含義)來達到這個目的:
<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所示
對于桌面版顯示的線框，我們還剩下三列的博客文章。這一次，我們不會為接下來的三列創建單獨的行。相反，我們將直接將這些列附加到現有的行中。你可能想知道我們怎么能有24列(6列在每一行中跨越4個引導列)。嗯,Bootstrap只允許在一行中使用12個引導列。如果我們試著超過這個，剩下的這些列將被調整到下一行。這條新線將再次出現12個引導列的容量。這樣，我們就可以將所有的博客文章列綁定到單個行中。
讓我們繼續使用三個新列來更新代碼:
<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>
最后，我們將桌面線框轉換為HTML頁面，如圖2.10所示。
平板顯示下的設計
現在，讓我們修改代碼，以實現平板電腦的線框布局。與桌面顯示器不同，平板電腦可以用兩種模式觀看:豎屏-肖像(Portrait)和橫屏-景觀(Landscape);平板電腦的景觀模式被認為是中等大小的顯示器(屏幕寬度為992px);我們已經使用了colmd-md-類。我們現在只剩下了豎屏視圖，這是一個小型顯示器。這可以通過使用colsm-sm來實現。
由于我們必須在較小的顯示器上實現兩列布局，我們必須強制每一列跨越6格。這樣，在每一行中，我們只得到兩列(2x6格=12格)。但這里只有一行。因此，一旦所有的12個格都被占用，剩下的列將出現在下一行中，每次創建一個新的行。
讓我們繼續，在桌面布局代碼中添加一個額外的類: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所示，我們有兩種用于平板的布局:一種是橫向模式的三欄布局，一種是豎屏模式的兩欄布局。
移動設備上的設計
和平板電腦一樣，移動設備也可以在風景和人像模式下觀看。移動設備中的景觀視圖利用小型顯示器(屏幕寬度768px)，我們已經使用了colsm-sm類。移動設備中的豎屏視圖使用了額外的小型顯示器(屏幕寬度小于768px)。
對于移動設備的線框，我們必須創建一個單列布局。我希望您已經知道如何在上述代碼中實現它。對于額外的小屏幕，我們必須使用具有col_xs前綴的類。這里，我們希望每個博客文章的列占據所有12個引導列，這樣我們就可以每一行只有一篇博客文章。我們的類將是col-xs-12，所以讓我們繼續并將這個類添加到我們的代碼中:
<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>
最后，我們有一個完整的HTML頁面響應式，并在任何類型上工作顯示的一列布局如圖2。12所示。你甚至可以使用一個免費的基于云的服務，如Google drive 1，然后在實際的平板電腦或移動設備上進行測試;或者，手動調整瀏覽器寬度，動態地觀察布局變化。我希望您在理解引導程序的網格系統時發現這個案例研究很有用。
嵌套列
你可以在布局中任意列中創建一套新的12格Bootstrap網格。這可以通過在一個現有的列中構建一個新的行元素來完成，然后用自定義的列填充這一行。由于我們在這里啟動了一個新行，其中的任何列都可以跨12格，但是這一行的寬度將被限制到它的父類的寬度。
讓我們用一個例子來說明這個問題。在項目中創建一個新的HTML文件nested.html；如同之前章節討論的一樣，在這個HTML文件中關聯Bootstrap設置，另外，關聯我們早先設置的styles.css。這個文件看起來應該如下所示：
<!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>中創建一個container和一個row；
<div class="container">
<div class="row">
</div>
</div>
針對中型顯示器，我們將構建一個兩列布局。到目前為止,我們知道，要創建一個雙列布局，我們應該將我們的列設為6格。因此，生成此類列的類將是col-md-6。讓我們為前面的標記添加兩列:
<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>
在這段代碼中，我們還從樣式中提取了兩個類。css文件:col1和col2。這兩個類將幫助我們為我們的列提供一些背景顏色。現在，HTML頁面應該類似于圖2.13的屏幕快照。
現在讓我們在第一列“Column 1”中進行嵌套，并在其中新建一行:
<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>
當我們有一個新的行，讓我們在它里面再形成兩列:
<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中所看到的，這兩個新列現在被放置在第一列中。這里我調用了styless.css中的樣式col3和col4，用于提供背景顏色。
在創建復雜的布局時，可以方便地嵌套列。您還可以進一步嵌套最內部的行，并在其中生成一組新的列。這個過程可以一直持續下去，直到您達到所需的布局。
偏移列（Offsetting Columns）
偏移，是Bootstrap網格系統的另一個大功能。它通常用于增加一個列的左邊緣。如果你有一個列要顯示在三格之后，你可以使用偏移功能。
可用于偏移的類包括：
col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*
假設我們希望在超小型顯示器上把一列向右偏移三格，我們可以用"col-xs-offset-3"，例如：
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col1">
<h1>Hello Learnable!</h1>
</div>
</div>
這段代碼的結果是，如圖2.15所示：跨越六格的列向右偏移三格。
把你的列居中
請注意，這列的左右兩側都有三格的間隙。這是一種實現占屏幕寬度一半的列居中的好辦法。
手工渲染網格（重新排序）
我們也可以不理睬列在代碼中的順序，對它重新排序。如果我們先寫了一個"col-md-9"的列，然后寫了一個"col-md-3"的列；我們可以輕易的調換它們在頁面上的位置，方法是使用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格，所以移向了右側，"col-md-3"的列也被向左拉了9格。因此，它們看起好好像在瀏覽器中交換了原來的位置。
這里列出了每一種顯示設備上對應的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以內的數字，去推或拉。
小結
您可以使用Bootstrap的網格系統來生成幾乎任何類型的網站布局。
如果使用得當，你可以設計一個可以工作在幾乎任何類型的顯示設備的美觀且響應迅速的網站。諸如嵌套、偏移和重新排序的功能，也讓網格系統變的更強大。
