好處：1:快速制作響應(yīng)式網(wǎng)頁(yè)適配各種終端;2:開發(fā)簡(jiǎn)單，方便;3:移動(dòng)先行;4:代碼開源;5:代碼有良好的規(guī)范
使用場(chǎng)景：1:響應(yīng)式頁(yè)面;2:移動(dòng)端頁(yè)面;3:后臺(tái)頁(yè)面;4:帶有交互效果的頁(yè)面
開發(fā)環(huán)境：（webstorm）
引用bootstrap框架文件
1：壓縮處理文件bootstrap.min.css,bootstrap.min.js
2：使用bootstrap中文網(wǎng)提供的免費(fèi)CDN加速服務(wù)（www.bootcss.com）
Bootstrap基本模板
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-sc ale=1.0/">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>這是一個(gè)Bootstrap框架的最基本的HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/botstrap.js"></script>
</body>
</html>
Bootstrap架構(gòu)
響應(yīng)式設(shè)計(jì)，css組件，JavaScript插件，基礎(chǔ)布局組件（排版，代碼，表格，表單，按鈕，圖像，輔助樣式），12柵格系統(tǒng)（結(jié)合media query，實(shí)現(xiàn)移動(dòng)先行和響應(yīng)式設(shè)計(jì)），jQuery1.10+
使用12柵格系統(tǒng)布局網(wǎng)頁(yè)系統(tǒng)
實(shí)現(xiàn)原理：定義容器大小，平分12分，調(diào)整內(nèi)外邊距，結(jié)合媒體查詢
使用方式：
列組合
<div class="container">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
列偏移
<div class="container">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4 col-md-offset-4">.col-md-4</div>
</div>
</div>
列嵌套
<div class="container">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4 col-md-offset-4">.col-md-4</div>
</div>
</d iv>
<div class="col-md-4 col-md-offset-4">.col-md-4</div>
</div>
</div>
列排序
<div class="row">
<div class="col-md-8 col-md-push-3">.col-md-8</div>
<div class="col-md-4 col-md-pull-9">.col-md-4</div>
</div>
柵格系統(tǒng)行為
.container最大寬度：none（自動(dòng)） 750px 970px 1170px
類前綴：none（自動(dòng)） .col-sm-（小屏幕） .col-md-（中等屏幕） .cil-lg-（大屏幕）
列（column）數(shù)：12
最大列（column）寬：自動(dòng) ~62px ~81px ~97px
槽（gutter）寬：30px（每列左右均有15px）
可嵌套：是
偏移（offsets）：是
列排序：是
