Bootstrap的來源
Bootstrap寝姿，來自 Twitter儡毕，是目前最受歡迎的前端框架也切。Bootstrap 是基于 HTML、CSS腰湾、JAVASCRIPT 的雷恃，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷费坊。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范倒槐。一直是 GitHub 上的熱門開源項(xiàng)目。
Bootstrap的特點(diǎn)
- 移動(dòng)設(shè)備優(yōu)先：自 Bootstrap 3 起附井，框架包含了貫穿于整個(gè)庫的移動(dòng)設(shè)備優(yōu)先的樣式讨越。
- 響應(yīng)式設(shè)計(jì)（@media媒體布局）:Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺(tái)式機(jī)两残、平板電腦和手機(jī)。
- 柵欄布局（col-md-3）
- 它提供了功能強(qiáng)大的內(nèi)置組建把跨，易于定制人弓。
Bootstrap 上手
1. Bootstrap的下載與安裝
Bootstrap中文網(wǎng)
Bootstrap英文網(wǎng)
去Bootstrap的官方網(wǎng)站下載最新版的Bootstrap
2.文件結(jié)構(gòu)
當(dāng)下載最新版的Bootstrap并進(jìn)行解壓縮后，將得到下列的文件目錄結(jié)構(gòu)
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
上面展示的就是 Bootstrap 的基本文件結(jié)構(gòu)：預(yù)編譯文件可以直接使用到任何 web 項(xiàng)目中着逐。以及編譯好的 CSS 和 JS (bootstrap.*) 文件崔赌，還有經(jīng)過壓縮的 CSS 和 JS (bootstrap.min.*) 文件。同時(shí)還包含了來自 Glyphicons 的圖標(biāo)字體耸别，在附帶的 Bootstrap 主題中使用到了這些圖標(biāo)峰鄙。
3.Bootstrap的使用基礎(chǔ)模板 --> 最簡(jiǎn)單的 Bootstrap 頁面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后太雨！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好吟榴，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery囊扳，所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件吩翻。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
可以看到包含了 jquery.js锥咸、bootstrap.min.js 和 bootstrap.min.css 文件狭瞎，用于讓一個(gè)常規(guī)的 HTML 文件變?yōu)槭褂昧?Bootstrap 的模板。
Bootstrap 網(wǎng)格系統(tǒng)
簡(jiǎn)介
Bootstrap 提供了一套響應(yīng)式搏予、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)熊锭，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多 12 列雪侥。
什么是網(wǎng)格(Grid)
在平面設(shè)計(jì)中碗殷，網(wǎng)格是一種由一系列用于組織內(nèi)容的相交的直線（垂直的、水平的）組成的結(jié)構(gòu)（通常是二維的）速缨。它廣泛應(yīng)用于打印設(shè)計(jì)中的設(shè)計(jì)布局和內(nèi)容結(jié)構(gòu)锌妻。在網(wǎng)頁設(shè)計(jì)中，它是一種用于快速創(chuàng)建一致的布局和有效地使用 HTML 和 CSS 的方法旬牲。
簡(jiǎn)單地說仿粹，網(wǎng)頁設(shè)計(jì)中的網(wǎng)格用于組織內(nèi)容，讓網(wǎng)站易于瀏覽原茅，并降低用戶端的負(fù)載吭历。
什么是Bootstrap網(wǎng)格系統(tǒng)(Gird Stystem)
Bootstrap 包含了一個(gè)響應(yīng)式的、移動(dòng)設(shè)備優(yōu)先的擂橘、不固定的網(wǎng)格系統(tǒng)晌区，可以隨著設(shè)備或視口大小的增加而適當(dāng)?shù)財(cái)U(kuò)展到 12 列。它包含了用于簡(jiǎn)單的布局選項(xiàng)的預(yù)定義類，也包含了用于生成更多語義布局的功能強(qiáng)大的混合類契讲。
根據(jù)上面的語句，我們可以理解為,Bootstrap 代碼從小屏幕設(shè)備（比如移動(dòng)設(shè)備滑频、平板電腦）開始捡偏，然后擴(kuò)展到大屏幕設(shè)備（比如筆記本電腦、臺(tái)式電腦）上的組件和網(wǎng)格峡迷。
移動(dòng)設(shè)備優(yōu)先策略
-
內(nèi)容
- 決定什么是最重要的
- 布局
-
優(yōu)先設(shè)計(jì)更小的寬度
- 基礎(chǔ)的 CSS 是移動(dòng)設(shè)備優(yōu)先银伟，媒體查詢 是針對(duì)于平板電腦、臺(tái)式電腦
- 漸進(jìn)增強(qiáng)
隨著屏幕大小的增加而添加元素
響應(yīng)式網(wǎng)格系統(tǒng)隨著屏幕或視口（viewport）尺寸的增加绘搞，系統(tǒng)會(huì)自動(dòng)分為最多 12 列彤避。
Bootstrap 網(wǎng)格系統(tǒng)（Grid System）的工作原理
網(wǎng)格系統(tǒng)通過一系列包含內(nèi)容的行和列來創(chuàng)建頁面布局。下面列出了 Bootstrap 網(wǎng)格系統(tǒng)是如何工作的：
- 行必須放置在
.containerclass 內(nèi)夯辖，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding） - 使用行來創(chuàng)建列的水平組
- 內(nèi)容應(yīng)該放置在列內(nèi)琉预，且唯有列可以是行的直接子元素
- 預(yù)定義的網(wǎng)格類，比如
.row和.col-xs-4蒿褂，可用于快速創(chuàng)建網(wǎng)格布局圆米。LESS 混合類可用于更多語義布局 - 列通過內(nèi)邊距（padding）來創(chuàng)建列內(nèi)容之間的間隙。該內(nèi)邊距是通過
.rows上的外邊距（margin）取負(fù)啄栓，表示第一列和最后一列的行偏移 - 網(wǎng)格系統(tǒng)是通過指定您想要橫跨的十二個(gè)可用的列來創(chuàng)建的娄帖。例如，要?jiǎng)?chuàng)建三個(gè)相等的列昙楚，則使用三個(gè)
.col-xs-4
網(wǎng)絡(luò)選項(xiàng)
下面總結(jié)了Bootstrap網(wǎng)格系統(tǒng)如何跨多個(gè)設(shè)備工作
| 說明 | 超小設(shè)備手機(jī)（< 768px） | 小型設(shè)備平板電腦（≥ 768px） | 中型設(shè)備臺(tái)式電腦（≥ 992px） | 大型設(shè)備臺(tái)式電腦（≥ 1200px） |
|---|---|---|---|---|
| 網(wǎng)格行為 | 一直是水平的 | 以折疊開始得湘，斷點(diǎn)以上是水平的 | 以折疊開始咖楣，斷點(diǎn)以上是水平的 | 以折疊開始，斷點(diǎn)以上是水平的 |
| 最大容器寬度 | None (auto) | 750px | 970px | 1170px |
| Class 前綴 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列數(shù)量和 | 12 | 12 | 12 | 12 |
| 最大列寬 | Auto | 60px | 78px | 95px |
| 間隙寬度 | 30px（一個(gè)列的每邊分別 15px） | 30px（一個(gè)列的每邊分別 15px） | 30px（一個(gè)列的每邊分別 15px） | 30px（一個(gè)列的每邊分別 15px） |
| 可嵌套 | Yes | Yes | Yes | Yes |
| 偏移量 | Yes | Yes | Yes | Yes |
| 列排序 | Yes | Yes | Yes | Yes |
媒體查詢的用法
@media 媒體查詢的用法
媒體查詢就是能夠在不同的條件下使用不同的樣式，使頁面在不同的終端設(shè)備下達(dá)到不同的渲染效果蕉毯。
媒體特性
媒體查詢中的大部分接受 min/max 前綴，用來表達(dá)其邏輯關(guān)系埋泵，表示應(yīng)用大于等于或小于等于某個(gè)值的情況砂竖。沒有特殊說明都支持 min/max。
- width：Length 渲染界面的寬度
- height：Length 渲染界面的高度
- color：整數(shù)谭跨，表示色彩的字節(jié)數(shù)
- color-index：整數(shù)干厚， 色彩表中的色彩數(shù)
- device-aspct-ratio：整數(shù)/整數(shù)，寬高比例
- device-height：Length 設(shè)備屏幕的輸出高度
- device-width：Length 設(shè)備屏幕的輸出寬度
- grid（不支持
min/max前綴）：整數(shù)螃宙，是否基于柵格的設(shè)備 - monochrome：整數(shù)蛮瞄，單色幀緩沖器中每像素字節(jié)數(shù)
- resolution：分辨率（dpi/dpcm）分辨率
- scan（不支持
min/max前綴）：Progressive interlaced，Tv 媒體類型的掃描方式 - orientation（不支持
min/max前綴）：Portrait//landscape 橫屏或豎屏
使用媒體查詢
語法：@media 媒體類型 and (媒體特性) {你的樣式}
最大寬度
max-width 是媒體特性中最常用的一個(gè)特性谆扎，其意思是指媒體類型小于或等于指定的寬度時(shí)挂捅，樣式生效。如：
@media screen and (max-width:480px) {
.ads {
display:none;
}
}
上面表示的是：當(dāng)屏幕小于或等于 480px 時(shí)堂湖，頁面中包含類樣式 .ads 的元素都將被隱藏闲先。
最小寬度
min-width 與 max-width 相反状土，指的是媒體類型大于或等于指定寬度時(shí)，樣式生效伺糠。
@media screen and (min-width: 900px) {
.wrapper {width: 980px;}
}
多個(gè)媒體特性的使用
媒體查詢可以使用關(guān)鍵詞 and 將多個(gè)媒體特性結(jié)合在一起蒙谓。也就是說，一個(gè)媒體查詢中可以包含 0 到多個(gè)表達(dá)式训桶，表達(dá)式又可以包含 0 到多個(gè)關(guān)鍵字累驮，以及一種媒體類型。
當(dāng)屏幕在 600px~900px 之間時(shí)舵揭，body 的背景色渲染為 #F5F5F5 谤专，如下所示：
@media screen and (min-width:600px) and (max-width:900px) {
body {background-color:#F5F5F5;}
}
Bootstrap 表格
簡(jiǎn)介
Bootstrap 提供了一個(gè)清晰的創(chuàng)建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：
| 標(biāo)簽 | 描述 |
|---|---|
<table> |
為表格添加基礎(chǔ)樣式 |
<thead> |
表格標(biāo)題行的容器元素（<tr>）午绳，用來標(biāo)識(shí)表格列 |
<tbody> |
表格主體中的表格行的容器元素（<tr>） |
<tr> |
一組出現(xiàn)在單行上的表格單元格的容器元素（<td> 或 <th>） |
<td> |
默認(rèn)的表格單元格 |
<th> |
特殊的表格單元格置侍，用來標(biāo)識(shí)列或行（取決于范圍和位置）。必須在 <thead> 內(nèi)使用 |
<caption> |
關(guān)于表格存儲(chǔ)內(nèi)容的描述或總結(jié) |
#表格類
下表樣式可用于表格中：
| 類 | 描述 |
|---|---|
.table |
為任意 <table> 添加基本樣式 (只有橫向分隔線) |
.table-striped |
在 <tbody> 內(nèi)添加斑馬線形式的條紋 ( IE8 不支持) |
.table-bordered |
為所有表格的單元格添加邊框 |
.table-hover |
在 <tbody> 內(nèi)的任一行啟用鼠標(biāo)懸停狀態(tài) |
.table-condensed |
讓表格更加緊湊 |
#<tr>, <th> 和 <td> 類
下表的類可用于表格的行或者單元格：
| 類 | 描述 |
|---|---|
.active |
將懸停的顏色應(yīng)用在行或者單元格上 |
.success |
表示成功的操作 |
.info |
表示信息變化的操作 |
.warning |
表示一個(gè)警告的操作 |
.danger |
表示一個(gè)危險(xiǎn)的操作 |
#基本的表格
如果您想要一個(gè)只帶有內(nèi)邊距（padding）和水平分割的基本表拦焚，請(qǐng)?zhí)砑?class .table墅垮，如下面實(shí)例所示：
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名稱</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
