Bootstrap簡(jiǎn)介
基本了解
Bootstrap是由Mark Otto和Jacob Thornton合作完成的，基于HTML、CSS剩晴、JavaScript的基礎(chǔ)上開(kāi)發(fā)的前端開(kāi)發(fā)框架牢裳，具有簡(jiǎn)潔、直觀犀农、強(qiáng)悍的優(yōu)點(diǎn)，使Web開(kāi)發(fā)更加快捷宰掉。
Bootstrap由動(dòng)態(tài)css語(yǔ)言less寫成呵哨，個(gè)人理解是將常用的一些樣式打包成一些類，在需要使用的時(shí)候轨奄，直接調(diào)用相應(yīng)的類孟害，就可以達(dá)到預(yù)期的樣式形式，不用利用組件和js進(jìn)行進(jìn)一步的組合封裝挪拟。
Bootstrap包含內(nèi)容
基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)挨务、鏈接樣式、背景的基本結(jié)構(gòu)。
CSS：Bootstrap 自帶以下特性：全局的 CSS設(shè)置谎柄、定義基本的 HTML 元素樣式丁侄、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)朝巫。
組件：Bootstrap 包含了十幾個(gè)可重用的組件鸿摇，用于創(chuàng)建圖像、下拉菜單劈猿、導(dǎo)航拙吉、警告框、彈出框等等揪荣。
JavaScript 插件：Bootstrap包含了十幾個(gè)自定義的jQuery 插件筷黔。您可以直接包含所有的插件，也可以逐個(gè)包含這些插件仗颈。
定制：您可以定制Bootstrap的組件佛舱、LESS 變量和jQuery 插件來(lái)得到您自己的版本。
——百度百科
Bootstrap特點(diǎn)
- 移動(dòng)設(shè)備優(yōu)先揽乱，然后才是桌面設(shè)備名眉，框架包含了貫串與整個(gè)庫(kù)的移動(dòng)設(shè)備優(yōu)先的樣式
- 響應(yīng)式設(shè)計(jì)，能夠自適應(yīng)于臺(tái)式機(jī)凰棉、平板電腦损拢、手機(jī)，確保了適當(dāng)?shù)睦L制和觸屏縮放撒犀，同時(shí)可以設(shè)置禁止縮放功能福压，使網(wǎng)站看上去感覺(jué)更像原生應(yīng)用
- 包含了功能強(qiáng)大的內(nèi)置組件，易于定制
- 它是開(kāi)源的
Bootstrap瀏覽器/設(shè)備支持
| | Chrome | Firefox | IE | Opera | Safari |
| :---------|
| Android | YES | YES | 不適用 | 不適用 | 不適用 |
| IOS | YES | 不適用 | 不適用 | 不適用 | YES |
| Mac OS X | YES | YES | 不適用 | YES | YES |
| Windows | YES | YES | YES | YES | 不適用 |
學(xué)習(xí)筆記
或舞！DOCTYPE必要
Bootstrap使用了一些HTMl5元素和CSS屬性荆姆，因此為了讓這些元素和屬性正常工作，必須保證在使用Bootstrap項(xiàng)目的開(kāi)頭包含<!DOCTYPE html>
以下是Bootstrap手冊(cè)上給出的一份HTML的基本模板映凳，之后網(wǎng)頁(yè)新增的內(nèi)容只要在這份模板的基礎(chǔ)上進(jìn)行增刪基本就可以實(shí)現(xiàn)了
<!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）功能 -->
<!-- 警告：通過(guò) file:// 協(xié)議（就是直接將 html 頁(yè)面拖拽到瀏覽器中）訪問(wèn)頁(yè)面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好诈豌，世界仆救！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件矫渔。你也可以根據(jù)需要只加載單個(gè)插件彤蔽。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
如果在Bootstrap創(chuàng)建的網(wǎng)頁(yè)開(kāi)頭不使用<!DOCTYPE html>，可能將導(dǎo)致一些瀏覽器顯示不一致的問(wèn)題
移動(dòng)設(shè)備優(yōu)先
上面說(shuō)過(guò)Bootstrap是對(duì)移動(dòng)設(shè)備優(yōu)先的庙洼，因此為了讓Vootstrap開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備更友好顿痪，確保適當(dāng)?shù)睦L制和觸屏縮放是有必要的镊辕，因此最好在網(wǎng)頁(yè)的head之中添加viewport meta標(biāo)簽
<meta name="viewport" content="width=device-width, initial-scale=1.0">
device-width保證網(wǎng)頁(yè)能在帶有不同屏幕分辨率的設(shè)備下仍然能呈現(xiàn)出預(yù)想的格式
initial-scale=1.0是讓網(wǎng)頁(yè)以1:1的比例呈現(xiàn)，不會(huì)有任何的縮放
另外可以通過(guò)為viewport meta標(biāo)簽添加user-scalable=no來(lái)禁止其縮放功能
網(wǎng)格系統(tǒng)
Bootstrap提供了一套響應(yīng)式蚁袭、移動(dòng)設(shè)備優(yōu)先的流式網(wǎng)格系統(tǒng)征懈，隨著屏幕或viewport尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列
在查看相關(guān)資料后揩悄，個(gè)人認(rèn)為網(wǎng)格系統(tǒng)就類似以前用過(guò)的方塊本受裹，將一頁(yè)紙豎向分為幾塊，最多12塊虏束，所有長(zhǎng)度的判定都是在頁(yè)面分為12格之后，再根據(jù)相應(yīng)的需求進(jìn)行合并
下表總結(jié)了Bootstrap網(wǎng)格系統(tǒng)如何跨多個(gè)設(shè)備工作
下圖是我根據(jù)菜鳥(niǎo)教程中的學(xué)習(xí)進(jìn)行實(shí)踐的結(jié)果
注意事項(xiàng)
行必須放置在 .container class 內(nèi)厦章，以便獲得適當(dāng)?shù)膶?duì)齊（alignment）和內(nèi)邊距（padding）镇匀。
使用行來(lái)創(chuàng)建列的水平組。
內(nèi)容應(yīng)該放置在列內(nèi)袜啃，且唯有列可以是行的直接子元素汗侵。
預(yù)定義的網(wǎng)格類，比如 .row 和 .col-xs-4群发，可用于快速創(chuàng)建網(wǎng)格布局晰韵。LESS 混合類可用于更多語(yǔ)義布局。
列通過(guò)內(nèi)邊距（padding）來(lái)創(chuàng)建列內(nèi)容之間的間隙熟妓。該內(nèi)邊距是通過(guò) .rows 上的外邊距（margin）取負(fù)雪猪，表示第一列和最后一列的行偏移。
網(wǎng)格系統(tǒng)是通過(guò)指定您想要橫跨的十二個(gè)可用的列來(lái)創(chuàng)建的起愈。例如只恨，要?jiǎng)?chuàng)建三個(gè)相等的列，則使用三個(gè) .col-xs-4
強(qiáng)調(diào)
類似html抬虽，bootstrap將文本的一些常用的樣式打包成一個(gè)個(gè)類官觅，調(diào)用這個(gè)類時(shí)就會(huì)出現(xiàn)相應(yīng)的形式，而html中是需要通過(guò)<strong><em>等標(biāo)簽來(lái)進(jìn)行修改表現(xiàn)形式
下圖是我進(jìn)行嘗試時(shí)創(chuàng)建的html
圖中比較不明顯阐污，但實(shí)際上可以比較明顯的感覺(jué)到container是一個(gè)居中的盒子休涤，來(lái)自bootstrap的container帶了自己的光環(huán)，而像html里的盒子模型笛辟，都是需要自己自動(dòng)設(shè)置margin功氨、padding來(lái)使這個(gè)盒子居中
引用
下圖是菜鳥(niǎo)教程中的示例圖
這個(gè)示例中采用了html的三個(gè)標(biāo)簽，<blockquote><small><cite>
其中<cite>標(biāo)簽是我平時(shí)不常用的隘膘，所以去網(wǎng)上找了一些關(guān)于它的資料
<cite>標(biāo)簽通常表示它所包含的文本對(duì)某個(gè)參考文獻(xiàn)的引用疑故，比如書籍或者雜志的標(biāo)題。
按照慣例弯菊，引用的文本將以斜體顯示纵势。
用<cite>標(biāo)簽把指向其他文檔的引用分離出來(lái)踱阿，尤其是分離那些傳統(tǒng)媒體中的文檔，如書籍钦铁、雜志软舌、期刊，等等牛曹。如果引用的這些文檔有聯(lián)機(jī)版本佛点，還應(yīng)該把引用包括在一個(gè)<a>標(biāo)簽中，從而把一個(gè)超鏈接指向該聯(lián)機(jī)版本黎比。
<cite>標(biāo)簽還有一個(gè)隱藏的功能：它可以使你或者其他人從文檔中自動(dòng)摘錄參考書目超营。我們可以很容易地想象一個(gè)瀏覽器，它能夠自動(dòng)整理引用表格阅虫，并把它們作為腳注或者獨(dú)立的文檔來(lái)顯示演闭。<cite>標(biāo)簽的語(yǔ)義已經(jīng)遠(yuǎn)遠(yuǎn)超過(guò)了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實(shí)用的方式來(lái)向用戶表達(dá)文檔的內(nèi)容颓帝。
另外米碰，在這個(gè)例子中值得注意的是，這個(gè)引用示例中引用的bootstrap的類是pull-right购城，表示向右對(duì)齊吕座，一般的引用在沒(méi)有聲明```class="pull-right"時(shí)統(tǒng)一向左對(duì)齊
列表
列表部分大致上和html相似，<ol><ul>分別表示有序列表和無(wú)序列表瘪板，列表內(nèi)容前用<li>表示塊級(jí)吴趴，自動(dòng)換行
在這一部分里，比較不同的是<dt><dl><dd>這三個(gè)標(biāo)簽篷帅，<dl>是最外層的包裹史侣，表示定義列表，<dt>代表定義術(shù)語(yǔ)魏身，表示自主定義列表的每一個(gè)主分支點(diǎn)的名字惊橱，<dd>相應(yīng)的表示分支點(diǎn)的內(nèi)容
在列表這一部分的包裝類有.list-inline .dl-horizontal，前一個(gè)類聲明后箭昵，會(huì)將列表變成內(nèi)聯(lián)樣式税朴，后一個(gè)類聲明后會(huì)將列表水平放置，從類名上也可以比較直觀的看出這個(gè)類是針對(duì)自定義列表的家制，因此列表水平放置就是主分支和分支點(diǎn)寫在同一行上
下圖是進(jìn)行嘗試后得到的結(jié)果
代碼
Bootstrap提供令人兩種方式顯示代碼
- 內(nèi)聯(lián)顯示：
<code> - 以代碼塊形式顯示：
<pre>
需要注意的是：顯示的代碼中標(biāo)簽前后的<正林、>是需要分別用<以及>來(lái)表示的
下圖是我用來(lái)作對(duì)比的一個(gè)圖，一個(gè)用<以及>來(lái)表示颤殴，一個(gè)直接用<觅廓、>來(lái)表示
8.png
9.png
從圖上的結(jié)果比較能清楚的看出來(lái)，如果想要添加代碼涵但，必須要用<以及>來(lái)表示<>杈绸，不然在編譯的時(shí)候帖蔓，計(jì)算機(jī)會(huì)直接把想作為代碼部分顯示的代碼塊也一并當(dāng)做初始代碼進(jìn)行編譯
另外，在<code><pre>之后的空格都會(huì)原封不動(dòng)的顯示出來(lái)
表格
Bootstrap提供了一個(gè)清晰的創(chuàng)建表格的布局
下表列出了Bootstrap支持的一些表格元素
下表樣式可用于表格中：
.table樣式如圖：
.table-striped樣式如圖：
.table-bordered樣式如圖：
.table-hover樣式如圖：
當(dāng)鼠標(biāo)移動(dòng)到某一欄的內(nèi)容時(shí)瞳脓，那一行都會(huì)顯示成灰色
表單
Bootstrap提供了下列類型的表單布局：
垂直表單（默認(rèn)）
向父<form>元素添加role=“form”
把標(biāo)簽和控件放在一個(gè)帶class.form-group的<div>中
向所有的文本元素<input>塑娇、<textarea> 和 <select>添加class ="form-control"-
內(nèi)聯(lián)表單
內(nèi)聯(lián)表單中所有元素都是內(nèi)聯(lián)的
如果需要一個(gè)內(nèi)聯(lián)表單內(nèi)的元素都向左對(duì)齊，標(biāo)簽并排劫侧，就在<form>標(biāo)簽內(nèi)添加form-inline類
17.png -
水平表單
水平表單的呈現(xiàn)形式和其他表單有所不同埋酬，它是將前面的屬性名稱和后面需要輸入的表單內(nèi)容并成一行
步驟：
a. 向父 <form> 元素添加 class .form-horizontal
b. 把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中
c. 向標(biāo)簽添加 class .control-label
18.png
靜態(tài)控件
如果需要在一個(gè)水平表單內(nèi)的表單標(biāo)簽后放置純文本時(shí)，可以在 <p> 上使用 class .form-control-static
當(dāng)輸入框input接收到：focus時(shí)烧栋，會(huì)采用設(shè)立focus時(shí)的樣式
如下圖所示代碼塊
表示當(dāng)鼠標(biāo)懸停在鏈接上写妥，或者點(diǎn)擊過(guò)的鏈接，顏色都會(huì)被設(shè)置成為#2a6496审姓，同時(shí)耳标，會(huì)呈現(xiàn)一條下劃線
另外，點(diǎn)擊過(guò)的鏈接會(huì)另外呈現(xiàn)出顏色為#333的虛線輪廓
