bootstrap可以說是沒有佈局和審美概念的後端狗的福利。使用它的柵格系統可以輕鬆的對網頁進行佈局，而且可以做到響應式的佈局。看起來很酷，接下來我就會總結自己在開發博客系統中用到的知識點及實戰案例給大家，作爲一個專欄管理。
知識點
柵格系統用於通過一系列的行（row）與列（column）的組合來創建頁面佈局，你的內容就可以放入這些創建好的佈局中。
container: 用於固定寬度並支持響應式佈局的容器
page-header: 頁頭
row: 通過“行（row）”在水平方向創建一組“列（column）”
spanN：預定義柵格
效果
代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>響應式佈局</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">響應式佈局<small> 使用Bootstrap網格系統佈局網頁</small></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. Maecenas facilisis tellus quis nisl facilisis eget mollis lectus feugiat. Etiam pharetra mattis ultrices. In ac mi metus, ac pharetra ipsum. Aenean imperdiet sem purus. Suspendisse quis odio eu neque varius posuere. Fusce tincidunt tincidunt arcu non viverra. Vivamus dui eros, rhoncus cursus porta quis, sollicitudin a ante. Aliquam porta euismod sollicitudin.</p>
<div class="row">
<div class="span4">
<h2 class="page-header">區塊一</h2>
<p>consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4">
<h2 class="page-header">區塊二</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
<div class="span4">
<h2 class="page-header">區塊三</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
</div>
<div class="row">
<div class="span8">
<h2 class="page-header">主內容</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget .，consectetur adipiscing elit,Lorem ipsum dolor sit amet. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget quam accumsan vestibulum. </p>
</div>
<div class="span4">
<h2 class="page-header">邊欄</h2>
<p>Lorem ipsum dolor sit amet, quam accumsan vestibulum，consectetur adipiscing elit. Nulla nibh est, sagittis sit amet consectetur a, rhoncus dignissim ligula. Curabitur at neque eget . </p>
</div>
</div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>