關于作者：
- 鄭雲飛(天放), 程式員Java
- weibo：@tianFang
- 學習路線圖
- 跟我一步一步學習bootstrap
bootstrap在網頁中使用
bootstrap布局
bootstrap響應式布局
bootstrap内置了一套網格布局系統，而且可以是響應時的網格布局系統，簡單的來解釋一下，網格布局就是将網頁分割成一定數量的欄數或者叫做網格，bootstarp架構的網格系統就是把網頁分成12欄，如果你想讓一個元素占用一定欄數的寬度，你可以在這個元素上面應用一個特定的類，那麼bootstarp架構使用的就是span加欄數這種形式的類，下面我們來看一下，我們建立一個layout.html檔案，寫入如下内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
<![endif]-->
<title></title>
<link href="../css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<h1 class="page-header">布局<small>使用bootstrap網格布局網頁</small></h1>
<p>使用bootstrap的布局</p>
<h2 class="page-header">區塊一</h2>
<p>區塊1</p>
<h2 class="page-header">區塊二</h2>
<p>區塊2</p>
<h2 class="page-header">區塊三</h2>
<p>區塊3</p>
</body>
</html>
<script src="../js/vendor/jquery-1.10.2.min.js"/>
<script src="../js/bootstrap.js"/> 在浏覽器中打開效果如下圖所示：
這裡你可以看到頁面中的文字已經有了一些樣式，比如說大标題的字号，在h1下面會顯示一條灰色的線，還有small标簽裡面文字的顔色，這些樣式都是在bootstrap架構裡面定義好的，下面我們來學習幾個布局的方法，首頁我們将這個頁面的内容顯示在頁面的中間，我們還是回到代碼中，我們現在内容的周圍去添加一個大的容器，我們這裡使用div标簽，開始輸入<div>，在結束的地方輸入</div>,在開始的地方添加一個屬性<div class="container">,如下面代碼
<div class="container">
<h1 class="page-header">布局<small>使用bootstrap網格布局網頁</small></h1>
<p>使用bootstrap的布局</p>
<h2 class="page-header">區塊一</h2>
<p>區塊1</p>
<h2 class="page-header">區塊二</h2>
<p>區塊2</p>
<h2 class="page-header">區塊三</h2>
<p>區塊3</p>
</div> 我們再在浏覽器中看一下效果：
container這個類設定了寬度，并且可以讓内容顯示在中間，我們再将下面的内容顯示在同一排并且平均分成3欄，下面我們就使用bootstrap布局的網格系統來讓這3塊内容平均分成3欄顯示在同一排，首先我們需要添加一個容器包圍住想要顯示在同一排的内容。在這裡我們輸入一個<div class="row">包圍住這3塊，下面我們在分别在這3塊内容的周圍添加一個div标簽，并且在上面使用網格布局的span的類，因為我們想讓這3塊内容平均分成3欄，是以呢每一欄會占用4個網格布局的寬度，也就是4欄的寬度，那麼整個頁面的寬度是12網格，是以呢12平均分成3份，每一個份正好是4個網格的寬度，那麼我們就需要在每個塊中添加<div class="span4">與</div>标簽，如下内容：
<div class="container">
<h1 class="page-header">布局<small>使用bootstrap網格布局網頁</small></h1>
<p>使用bootstrap的布局</p>
<div class="row">
<div class="span4">
<h2 class="page-header">區塊一</h2>
<p>區塊1</p>
</div>
<div class="span4">
<h2 class="page-header">區塊二</h2>
<p>區塊2</p>
</div>
<div class="span4">
<h2 class="page-header">區塊三</h2>
<p>區塊3</p>
</div>
</div>
</div> 然後我們在浏覽器中預覽一下效果：
在這裡你可以看到，這3塊内容會平均分成3欄，顯示在同一排，使用同樣的方法，你可以建立出複雜的布局，你隻需要在布局使用的容器上面添加網格相應的類，比如說内容占用8個網格，你隻需要添加一個span8的類，内容占用4個網格，你中需要添加一個span4的類，然後在同一塊内容的周圍使用一個row類的容器，想讓内容相對于浏覽器的視窗居中的話，那麼設定一個寬度，并且在周圍添加一個帶有container的容器。
下面我們來看一下嵌套布局和流動布局，使用bootstrap架構實作這些布局方式都非常的簡單，嵌套布局就是在一個應用了網格類的容器裡面在嵌套其他使用網格類的容器，比如上面圖檔上的區塊三，那麼這塊内容占用了4個網格的寬度，如果你想再把這個區塊三平均分成2欄，那麼4除以2正好是2，也就是說每一欄占用2個網格的寬度，注意在固定寬度的布局下面，那麼被嵌套的元素占用的網格數量應該小于或者等于包圍他們元素所占用的網格的數量，下面我進入代碼，找到區塊3這段内容的代碼，然後在這個span4類的容器裡面再添加一個具有row類元素的div标簽，<div class="row"></div>，然後我們在這這個div裡面添加2組div标簽，并在上面添加span2的類，<div class="span2"></div><div class="span2"></div>然後我們再在每個容器裡面随便添加一點内容，如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"/>
<![endif]-->
<title></title>
<link href="../css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<h1 class="page-header">布局<small>使用bootstrap網格布局網頁</small></h1>
<p>使用bootstrap的布局</p>
<div class="row">
<div class="span4">
<h2 class="page-header">區塊一</h2>
<p>區塊1</p>
</div>
<div class="span4">
<h2 class="page-header">區塊二</h2>
<p>區塊2</p>
</div>
<div class="span4">
<h2 class="page-header">區塊三</h2>
<p>區塊3</p>
<div class="row">
<div class="span2">區塊3-1</div>
<div class="span2">區塊3-2</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="../js/vendor/jquery-1.10.2.min.js"/>
<script src="../js/bootstrap.js"/> 然後在浏覽器中預覽效果如下：
下面我們在看一下流動布局，使用流動布局的頁面會根據浏覽器視窗的大小，自動的去縮放，那麼你上面看到的那個頁面使用的是固定布局寬度的方式，也就是說不管你浏覽器的視窗有多大，那麼頁面的寬度是固定的，我們把bootstrap架構的固定布局轉換成流動布局隻需要去變換一下那個container和row類的名稱，我們把container換成container-fluid，container應用的是固定布局的寬度，container-fluid應用的是一個百分比的寬度，然後我們需要把所有的row類屬性改成row-fluid，在浏覽器看下效果：
現在我們變換一下浏覽器視窗的大小，再來看一下效果：
你會看到浏覽器的内容會随着浏覽器視窗的變化而變化，我們要知道在流動布局下面，布局使用的網格類的寬度會變成百分比，而不是固定的寬度，這裡呢要注意一下，這個區塊3嵌套的這2個容器，前面我們在這2個容器裡面分别應用了一個span2的類，在固定布局的下面，這2個容器占用的網格的數量，正好是區塊3整體占用網格數量，而在流動布局的下面，那麼span2的寬度大概就是百分之14.8936，這個百分比是相對于包含他們容器的寬度，如果你仍然想讓他們平均分成2欄，應該呢用12除以2，也就是每個容器占用6個網格，我們再去修改一下代碼，找到區塊3
<div class="span4">
<h2 class="page-header">區塊三</h2>
<p>區塊3</p>
<div class="row-fluid">
<div class="span6">區塊3-1</div>
<div class="span6">區塊3-2</div>
</div>
</div> 在浏覽器中預覽：