一、 什么是Bootstrap慌植？##
Bootstrap甚牲，來自 Twitter，是目前最受歡迎的前端框架蝶柿。
Bootstrap 是基于 HTML丈钙、CSS、JavaScript的交汤，它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善雏赦， 形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件芙扎。
二星岗、Bootstrap的優(yōu)勢(shì)：##
Bootstrap簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷纵顾。其最大的優(yōu)勢(shì)是響應(yīng)式布局伍茄，使得開發(fā)者可以方便的讓網(wǎng)頁無論在臺(tái)式機(jī)、平板設(shè)備施逾、手機(jī)上都獲得最佳的體驗(yàn)敷矫。
三、Bootstrap的使用方法##
- 在項(xiàng)目頁面中引入
jquery.3.1.1.js
bootstrap.min.js 文件
bootstrap.min.css 文件
2.特別注意：文件的引用順序汉额，
query.3.1.1.js 要放到最上面曹仗，其次再引入另外兩個(gè)文件
3.在制作HTML頁面的時(shí)候就可以直接引用了！
四蠕搜、全局樣式
(一)bootstrap全局顯示怎茫、排版和鏈接
1、全局顯示
Bootstrap 3使用 body {margin: 0;} 來移除 body 的邊距。
2轨蛤、排版
使用 @font-family-base蜜宪、 @font-size-base 和 @line-height-base 屬性作為排版樣式。
3祥山、鏈接樣式：
通過屬性 @link-color 設(shè)置全局鏈接的顏色圃验。
4.容器container
Bootstrap 3 的 container class 用于包裹頁面上的內(nèi)容。
Bootstrap對(duì)排版缝呕、代碼的增強(qiáng)功能
5.標(biāo)題： Bootstrap 中定義了所有的 HTML 標(biāo)題（h1 到 h6）的樣式
（1）澳窑、內(nèi)聯(lián)子標(biāo)題
<small></small>或者class="small"
（2）、段落
為了給段落添加強(qiáng)調(diào)文本供常，則可以添加 class=“l(fā)ead”摊聋，這將得到更大更粗 、行高更高的文本
(二)文本對(duì)齊風(fēng)格以及特殊處理:
1.強(qiáng)調(diào)
HTML 的默認(rèn)強(qiáng)調(diào)標(biāo)簽 <small>（設(shè)置文本為父文本大小的 85%）栈暇、
<strong>（設(shè)置文本為更粗的文本）麻裁、<em>（設(shè)置文本為斜體）。
2.縮寫
HTML元素提供了用于縮寫的標(biāo)記瞻鹏，比如 WWW 或 HTTP悲立。
Bootstrap 定義 <abbr> 元素的樣式為顯示在文本底部的一條虛線邊框，
當(dāng)鼠標(biāo)懸停在上面時(shí)會(huì)顯示完整的文本（只要您為 <abbr> title 屬性添加了文本）新博。
為了得到一個(gè)更小字體的文本薪夕，只要把 .initialism 到 <abbr>就可以了。
3.地址（Address）：
使用 <address> 標(biāo)簽赫悄，您可以在網(wǎng)頁上顯示聯(lián)系信息原献。
由于 <address> 默認(rèn)為 display:block;，您需要使用 ?標(biāo)簽來為封閉的地址文本添加換行埂淮。
(三) 列表:
Bootstrap 支持有序列表姑隅、無序列表和定義列表。
有序列表：有序列表是指以數(shù)字或其他有序字符開頭的列表倔撞。
無序列表： 可以使用 class .list-unstyled 來移除樣式(開頭的數(shù)字)讲仰。也可以通過使用 class .list-inline 把所有的列表項(xiàng)放在同一行中。
定義列表：可以使用 class dl-horizontal 把 <dl> 行中的屬于與描述并排顯示痪蝇。
(五)表格 - 基本的表格
class="table" 只帶有內(nèi)邊距（padding）和水平分割的基本表
2.可選的表格類
（條紋表格）
通過添加 class="table table-striped"鄙陡，將在 <tbody> 內(nèi)的行上看到條紋
（邊框表格）
通過添加 class="table table-bordered"，將在 <tbody> 內(nèi)的行上看到邊框
（精簡(jiǎn)表格）
通過添加 class="table table-condensed"躏啰，實(shí)現(xiàn)精簡(jiǎn)表格
（上下文類表格）
上下文類允許改變表格行或單個(gè)單元格的背景顏色
值：
.active 對(duì)某一特定的行或單元格應(yīng)用懸停顏色
.success 表示一個(gè)成功的或積極的動(dòng)作
.warning 表示一個(gè)需要注意的警告
.danger 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作
這些類可被應(yīng)用到 <tr>趁矾、<td> 或 <th>。
(六)代碼的增強(qiáng)功能
Bootstrap 允許您以兩種方式顯示代碼
第一種是code 標(biāo)簽给僵，內(nèi)聯(lián)顯示代碼
第二種是 pre 標(biāo)簽毫捣。如果代碼需要被顯示為一個(gè)獨(dú)立的塊元素或者代碼有多行，則應(yīng)該使用 pre標(biāo)簽。
注意：
使用 pre和 code 標(biāo)簽時(shí)蔓同，確保開始和結(jié)束標(biāo)簽使用了 unicode 變體： < 和 >饶辙。
(七)Bootstrap對(duì)表單的增強(qiáng)功能
1.表單
表單布局：Bootstrap 提供了下列類型的表單布局：
向父元素<form> 添加 role="form"。把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中牌柄。這是獲取最佳間距所必需的畸悬。
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control"珊佣。
2、內(nèi)聯(lián)表單
如果需要?jiǎng)?chuàng)建一個(gè)表單披粟，它的所有元素是內(nèi)聯(lián)的咒锻，向左對(duì)齊的，標(biāo)簽是并排的守屉，向 <form> 標(biāo)簽添加 class="form-inline"惑艇。
3、水平表單
水平表單與其他表單不僅標(biāo)記的數(shù)量上不同拇泛，而且表單的呈現(xiàn)形式也不同滨巴。如需創(chuàng)建一個(gè)水平布局的表單，請(qǐng)按下面的幾個(gè)步驟進(jìn)行： 向父元素<form> 添加 class .form-horizontal俺叭。把標(biāo)簽和控件放在一個(gè)帶有 class .form-group 的 <div> 中恭取。向標(biāo)簽添加 class .control-label。
注意：
默認(rèn)情況下熄守，Bootstrap 中的 input蜈垮、select 和 textarea 有 100% 寬度。
在使用內(nèi)聯(lián)表單時(shí)裕照，需要在表單控件上設(shè)置一個(gè)寬度攒发。使用 class .sr-only，您可以隱藏內(nèi)聯(lián)表單的標(biāo)簽晋南。
