一、下載Bootstrap
-
Bootstrap中文網(wǎng)v3下載地址
Bootstrap下載 -
下載完成后解壓得到目錄結(jié)構(gòu)
目錄結(jié)構(gòu)1
-
將目錄結(jié)構(gòu)的三個(gè)文件夾全部導(dǎo)入所要應(yīng)用的站點(diǎn)目錄中，注意需要在js文件夾中添加框架依賴的JS庫文件
導(dǎo)入站點(diǎn)目錄 -
使用基本模板創(chuàng)建H5文件即可生成最簡單的Bootstrap頁面
基本模版
二、viewPort
通俗的講，移動(dòng)設(shè)備上的viewport就是 設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，要根據(jù)PC或移動(dòng)端決定。注意：同樣大小的屏幕，如果后者分辨率是前者的兩倍，則后者的一個(gè)css像素等效于兩個(gè)物理像素
基本模版中有如下的meta標(biāo)簽，作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。
<meta name="viewport" content="width=device-width , initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
//要得到ideal viewport(理想視口)默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。
三、布局容器
Bootstrap 必須需要為頁面內(nèi)容和柵格系統(tǒng)包裹一個(gè).container 容器。我們提供了兩個(gè)作此用處的類。注意，由于padding等屬性的原因，這兩種 容器類不能互相嵌套
-
.container類用于固定寬度并支持響應(yīng)式布局的容器。 -
.container-fluid類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
- 注意使用容器默認(rèn)內(nèi)容前面會有間距，如果想取消就在當(dāng)前html中的css樣式中添加paddings屬性值為0像素，盡量不要改動(dòng)原有的bootstrap模版中css文件的內(nèi)容
兩種容器的區(qū)別
四、排版/表格/表單/按鈕/圖片
- 在使用bootstrap創(chuàng)建頁面時(shí)通過在html標(biāo)簽引入已有的css類生成對應(yīng)的排版效果，例如通過在p標(biāo)簽中調(diào)用class="text-xxx"使文本顏色發(fā)生相應(yīng)變化
排版需調(diào)用的固定css類 - 具體樣式在使用時(shí)通過bootstrap文檔查詢即可
五、柵格系統(tǒng)
Bootstrap內(nèi)置了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕設(shè)備或視口（viewport）尺寸的增加，系統(tǒng)會自動(dòng)分為最多12列。
**注意：如果一行的列數(shù)大于12，則多余的列數(shù)會作為一個(gè)整體另起一行排列 **-
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。
**注意：如下面的案例中根據(jù) -xs -md 的劃分，第二行在桌面端顯示為3列，在手機(jī)端中則前兩列顯示為一行，第三列另起一行。而一般手機(jī)端會隱藏部分列內(nèi)容，使得排版更加簡潔美觀 **
案例1--移動(dòng)設(shè)備和桌面 媒體查詢
在柵格系統(tǒng)中，我們在 Less 文件中使用以下媒體查詢（media query）來創(chuàng)建關(guān)鍵的分界點(diǎn)閾值
/* 超小屏幕（手機(jī)，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
六、響應(yīng)式工具
-
可用的類
通過單獨(dú)或聯(lián)合使用以下列出的類，可以針對不同屏幕尺寸隱藏或顯示頁面內(nèi)容。
可用的類
七、常用組件
-
下拉菜單：可套用模板修改菜單名和超鏈接
代碼
下拉菜單效果 - 按鈕工具欄
- 導(dǎo)航：膠囊式標(biāo)簽頁
- 導(dǎo)航條：表單/按鈕/文本
- 分頁
表單
八、JavaScript 插件
- Carousel：實(shí)現(xiàn)輪播圖效果
實(shí)現(xiàn)代碼
<div id="myCarousel" class="carousel slide">
<!-- 輪播（Carousel）指標(biāo) -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 輪播（Carousel）項(xiàng)目 -->
<div class="carousel-inner">
<div class="item active">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
<!-- 輪播（Carousel）導(dǎo)航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹
</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›
</a>
</div>
輪播圖效果
