一、下載導入bootstrap組件
官網下載->導入js、css、fonts三個目錄進入項目文件->link和script導入min.css/min.js兩個文件
注意下載相應版本的jQuery，並在導入bootstrap.min.js前導入jQuery
二、全局樣式
2.1標題
h1-h6的字號大小是36 30 24 18 14 12 對應的是類名是class(.h1-.h6)跟h1-h6
<small></small>可以嵌套在標題標籤中作爲小標題
2.2排版
2.2.1文字
<mark></mark>—— 高亮顯示
<del></del>——刪除線
<ins></ins>——下劃線=<u></u>
<small></samll>——小標題，與h1~h6標籤配合使用
<strong></strong>——加粗
text-left、text-right、 text-center——class屬性，分別向左、右、中居中對齊
text-uppercase、text-lowercase、text-capitalize——字母大寫、小寫、首字母大寫
2.2.2表格
.table-bordered——帶邊框
.table-striped ——條紋
.table-hover——懸停變色
.table-condensed——緊湊
.danger——紅色
.warning——黃色
.info——藍色
.success——綠色
.active——默認懸停狀態
2.2.3表單
一個表單組件
<form>
<div class="form-group">
<label class="control-label">label信息 :</label>
<input type="text" class="form-control">
</div>
</form>其次可以通過
form->form-inline——它的所有元素是內聯的，向左對齊的，標籤是並排的,水平排版
input->input-lg/sm——改變輸入框大小
input->form-control——圓角方框發光
div ->has-successs/has warning/ has-error等可改變顏色
label->sr-only——取消提示信息（將label的信息隱藏）
來改變樣式
2.2.4 按鈕
2.2.5 圖片
圓角 .img-rounded
圓形 .img-circle
帶有邊框的圓角圖形 .img-thumbnail
三、響應式佈局
3.1 <meta>標籤
<meta name="viewport" content="width=device-width, initial-scale=1, maxium-scale=1,minimum-scale=1, user-scalable=no">
//width=device-width表示寬度與所顯示的屏幕的寬度相同；
//initial-scale=1 表示初始化可視區域縮放級別；
//user-scalable 表示用戶能否縮放頁面；
//maximum-scale 表示頁面能被放大的最大級別；
//minimum-scale 表示頁面被縮小的最大級別；
3.2 柵格佈局
bootstrap中的響應式開發原理是柵格佈局，將屏幕分爲12等份。元素可以給根據不同屏幕的大小適應相應的大小，如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4
col-lg-3：表示在大屏幕元素寬度大小爲屏幕的3/12,即1/4,
col-md-4：表示在中等屏幕元素寬度大小爲屏幕的1/3,
col-sm-6：表示在小屏幕元素寬度大小爲屏幕的1/2,
col-xs-12：表示在極小屏幕元素寬度大小佔滿整個屏幕大小。
col-lg-offset-3：表示在大屏幕中元素的位置是距離屏幕左邊爲屏幕大小的1/4,
col-md-offset-4：表示在中等屏幕中元素的位置是距離屏幕左邊爲屏幕大小的1/3
3.3單位
px
em:1em=16px(但不完全是)，em會繼承父級元素的字體大小
rem：跟em差不多，但是相對em穩定，多用在移動端
3.4 圖標
小圖標使用鏈接（bootstrap）點擊打開鏈接
國產（阿里）點擊打開鏈接
記得引用<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
四、bootstrap組件
4.1 bootstrap組件-怪異的屬性
1、role： HTML5的標籤屬性，標識普通標籤使其語義化，方便瀏覽器對其具體功能進行識別，給特定的瀏覽器使用比如盲文瀏覽器。
2、aria-label：用在輸入框，當焦點落到輸入框時讀屏軟件可讀出輸入框的內容，配合讀屏軟件使用。
3、tabIndex：設置鍵盤的Tab鍵在控件中的移動，就是焦點的移動順序，方便一些有障礙的人士瀏覽網頁。
4、data-：HTML5新增的用於自定義的屬性，不影響頁面顯示，管理自己想要實現的數據傳遞，包括數據交互的一些效果。涉及組件交互，比如下拉菜單、點擊等
4.2 下拉菜單組件
<div class="dropdown">
<button class="btn btn-default drop-toggle" data-toggle="dropdown">
這是按鈕
<span class="caret"></span><!--倒三角角標-->
</button>
<ul class="dropdown-menu">
<li>下拉1</li>
<li>下拉2</li>
<li>下拉3</li>
</ul>
</div>data-toggle:綁定下拉事件
4.3 控件組
input 控件組
<div class="input-group">
<span class="input-group-addon">*</span>
<input type="text" class="form-control ">
</div>
4.4 導航
導航條----------nav
1.可切換的導航 nav-tabs
2.膠囊導航 nav-pills
3.垂直導航 nav-justified / nav-stacked
4.5分頁
1. .pagination在父元素中添加表示分頁
2. .pager放置在翻頁區域
3. .previous把鏈接向左對齊， .next把鏈接向右對齊。
<nav>
<ul class="pager">
<li class="previous"><a href="#">向左</a></li>
<li class="next"><a href="#">向右</a></li>
</ul>
<ul class="pagination pagination-lg">
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</nav>4.6進度條
1.progress-bar
2.progress-bar-danger/success/info.... 進度條顏色
3.progress-bar-striped 進度條斑馬狀漸變
<div class="progress">
<div class="progress-bar" style="width:60%;" >60%</div>
</div>4.7列表
<ul class="list-group">
<li class="list-group-item">
列表1
<span class="badge">
14
</span>
</li>
</ul>
可以通過.actice和list-group-item-danger等改變樣式
4.8 面板
.panel 代表面板
.panel-heading 代表面板頭部
.panel-body 代表面板內容
.panel-footer 代表面板的註腳
<div class="panel panel-success">
<div class="panel-heading">
彈出層!
</div>
<div class="panel-body">
這是面板的具體內容
</div>
<div class="panel-footer">
腳註
</div>
</div>
五、bootstrap中的插件
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">彈窗按鈕</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span><span class="sr-only">關閉彈窗</span> </button>
<h4>標題</h4>
</div>
<div class="modal-body">modal body</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>