一、Bootstrap簡單配置
簡單使用Bootstrap，只需引入：

<script type="text/javascript" src="js/jquery.js" ></script><script type="text/javascript" src="js/bootstrap.js" ></script><link rel="stylesheet" href="css/bootstrap.css" />

為什么要引入<link rel="stylesheet" href="css/bootstrap.css" />呢？舉一個簡單的例子：
我們利用Bootstrap，寫一個簡答的div：

<div class="container"><h1>Bootstrap學習</h1><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p></div>

通過調節瀏覽器窗口的大小，我們可以看到，Bootstrap是對樣式為container有著響應式布局的。
二、Bootstrap柵格布局
我們在.container中定義類似table的div單元格row（行）與col（列）-md（屏幕尺寸：可以設置手機、平板等設備）-4（以12等分當前窗口，若超過12份會自動下排）...可以實現簡單的柵格布局，例如：

<div class="container"><div class="row"><div class="col-sm-6 col-md-4 col-lg-2 hidden-lg"><!--hidden-sm當屏幕小到sm時，該div隱藏 --><h1>側邊欄</h1><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div><div class="col-sm-6 col-md-8 col-lg-10 "><h1>Bootstrap學習</h1><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p><div class="row"><div class="col-sm-6 col-md-4 col-lg-2"><h3>Bootstrap學習</h3><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div><div class="col-sm-6 col-md-4 col-lg-2 col-lg-offset-1 alert-danger"><!--alert-danger給該div一個醒目色塊--><h3>Bootstrap學習</h3><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div><div class="col-sm-6 col-md-4 col-lg-2"><h3>Bootstrap學習</h3><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div><div class="visible-md"><!--當屏幕到 某個尺寸 時，顯示該div--><h2>屏幕到了這個尺寸了</h2><p>只有尺寸合適才能看到哦</p></div></div></div></div></div> <div class="row"><div class="col-sm-6 col-md-4 col-lg-2"><!--混合使用,自適應當前設備--><h1>Bootstrap學習</h1><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div><div class="col-sm-6 col-md-8 col-lg-2"><h1>Bootstrap學習</h1><p>以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！以下為測試內容，僅做占位使用！</p> </div></div></div>

實現的效果：

可以針對屏幕微調位置柵格位置，左邊右推一格col-md-push-1，右邊左拉一格col-md-pull-1左推右拉都是絕對位置，而偏移col-md-offset-1是相對的會同步修改后續內容的位置。柵格如table可以嵌套使用，同樣也有著網站的響應式布局。
此篇文章只是入門筆記！

轉載于:https://blog.51cto.com/13479739/2151281

總結

以上是生活随笔為你收集整理的Bootstrap响应式布局以及栅格框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。