## 什么是`Bootstrap`？

`bootstrap`是一個最受歡迎的 HTML、CSS 和 JS 框架，用于開發響應式布局、移動設備優先的 WEB 項目。通俗的講，`bootstrap`就是預先定義好了一套優美的`CSS`樣式和一套`組件`，前端開發者可以直接拿來使用，加速開發效率，并且他是響應式布局的，所以寫的一套代碼可以在多種設備中進行使用。

### 如何使用`bootstrap`？

要使用`bootstrap`很簡單，只要[下載](https://github.com/twbs/bootstrap "")源代碼，然后把`bootstrap.min.css`和`bootstrap.min.js`以及`jquery.min.js`導入到`html`文件中即可使用。或者是使用[bootcss](http://www.bootcss.com/ "")網站提供的`CDN`加速服務，把鏈接導入到`HTML`文件中即可，要注意的事情是，`jquery`必須放在`bootstrap.min.js`之前，因為`bootstrap.min.js`依賴`jquery`，那么以下將使用`CDN`的方式展示樣例代碼：

```html

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" >

<!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

```

### `bootstrap`中的柵格系統：

`bootstrap`中最強大也是最核心的一個東西就是響應式，而響應式是通過一個叫做**柵格系統**的東西實現的。柵格系統把一個頁面分成12列，bootstrap會根據媒體查詢獲取當前的瀏覽器的寬度，然后再把寬度平均分配給12列，html中一個盒子可以占用多列。要使用柵格系統，需要使用到`container/container-fluid`和`row`以及`col-xs-/col-sm-/col-md-/col-lg-`類。`container`相當于一個`table`盒子，裝著許許多多的`row`，每個row里面裝著許許多多的`col`，通過這樣一種結構，構成了一個柵格系統，而`container`和`container-fluid`的唯一區別是，`container-fluid`是全屏的，而`container`不是全屏的，左右兩邊會有一個間距。

*

么是 Bootstrap？

Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。

為什么使用 Bootstrap？

• 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿于整個庫的移動設備優先的樣式。

• 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。

• 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。

• 響應式設計：Bootstrap 的響應式 CSS 能夠自適應于臺式機、平板電腦和手機。更多有關響應式設計的內容詳見Bootstrap 響應式設計。

• 它為開發人員創建接口提供了一個簡潔統一的解決方案。

• 它包含了功能強大的內置組件，易于定制。

• 它還提供了基于 Web 的定制。

• 它是開源的。

Bootstrap 包的內容

• 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。這將在 Bootstrap 基本結構 部分詳細講解。

• CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。這將在 Bootstrap CSS 部分詳細講解。

• 組件：Bootstrap 包含了十幾個可重用的組件，用于創建圖像、下拉菜單、導航、警告框、彈出框等等。這將在 布局組件部分詳細講解。

• JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。這將在 Bootstrap 插件 部分詳細講解。

• 定制：您可以定制 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。

你可以使用我們的在線編輯器在線編輯代碼，并點擊運行按鈕查看結果。

Bootstrap 實例

<divclass="container"><divclass="jumbotron"><h1>我的第一個 Bootstrap 頁面</h1><p>重置窗口大小，查看響應式效果！</p></div><divclass="row"><divclass="col-sm-4"><h3>Column 1</h3><p>學的不僅是技術，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><divclass="col-sm-4"><h3>Column 2</h3><p>學的不僅是技術，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div><divclass="col-sm-4"><h3>Column 3</h3><p>學的不僅是技術，更是夢想！</p><p>再牛逼的夢想,也抵不住你傻逼似的堅持！</p></div></div></div>

嘗試一下 ?

更多實例

Bootstrap 實例2

<divclass="table-responsive"><tableclass="table table-striped table-bordered"><thead><tr><th>#</th><th>Name</th><th>Street</th></tr></thead><tbody><tr><td>1</td><td>Anna Awesome</td><td>Broome Street</td></tr><tr><td>2</td><td>Debbie Dallas</td><td>Houston Street</td></tr><tr><td>3</td><td>John Doe</td><td>Madison Street</td></tr></tbody></table></div>

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！