Bootstrap是目前比較受歡迎的前端框架。它是基于 HTML、CSS、JAVASCRIPT 的，簡潔靈活。因為在前幾個月的學習中有了解到Bootstrap，并且當時就使用Bootstrap制作了簡單的響應式布局。最近又接觸到，所以還是打算寫下這篇文章，算是記錄一下Bootstrap的學習過程。（這也是下定決心第一次發布博客，比較小白。）

一、響應式布局

就是分別為不同的屏幕分辨率定義布局，頁面元素寬度隨著窗口調整而自動適配。每個屏幕分辨率下面會有一個布局樣式，可以對元素位置和大小進行改變。

二、Bootstrap框架

1、Bootstrap的引用方式

可以去官網下載安裝包->Bootstrap v3，然后放在自己的項目路徑下進行引用。

也可以直接引用菜鳥教程的在線資源鏈接。

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

這里我是用的線上鏈接。（因為是早之前寫的，所以Bootstrap不是最新版本）

2、Bootstrap斷點

在Bootstrap中有一個概念，斷點。斷點是在Bootstrap中布局如何響應跨設備或屏幕大小變化的觸發器。分類如下圖

?3、Bootstrap容器

container容器是窗口布局的最基本元素，所有樣式都定義在.container或.container-fluid容器之中 是啟用整個柵格系統必不可少的前置條件。

Bootstrap原生帶三種container寬度規范：

.container，居中，適配不同的端的 max-width 尺寸。

.container-fluid，全屏，適配屏幕的 width: 100% 尺寸。

.container-{斷點規格}（見下表，如.container-sm), 在指定規格斷上width: 100% 尺寸。

?4、柵格系統

柵格系統是通過一系列的行（row）與列（column）的組合來創建頁面的布局，設置的內容就可以放在這些創建好的布局中 。

通過定義容器的大小，平分為12份。

簡單的例子如下：

<div class="container"><div class="row"><div class="col-md-8">這里占8份</div><div class="col-md-4">這里占4份</div></div> </div>

要想同時控制大屏幕、中等屏幕、小屏幕每行（row）的列數不同。可以在class中添加每個斷點占的份數，如下：

<div class="container"><div class="row"><div class="col-md-3 col-sm-6">中等屏幕時占3份，小屏幕時占6份</div><div class="col-md-3 col-sm-6">。。。</div><div class="col-md-3 col-sm-6">。。。</div><div class="col-md-3 col-sm-6">。。。</div></div> </div>

因此在小屏幕時，就會變成兩行，每行兩列元素。

有了以上的知識，就可以基于Bootstrap編寫一個簡單的響應式布局。下面是我制作的一個頁面，純粹作為展示，是靜態頁面，寫得不精細，請見諒。

?小屏幕下：

?

總結

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

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