1 Bootstrap 是什么

1.1　Bootstrap 簡(jiǎn)述

1.2　如何使用 Bootstrap

1.3　包含內(nèi)容

1.4　簡(jiǎn)單模板

1.5　案例：簡(jiǎn)單實(shí)例

2　網(wǎng)格系統(tǒng)

2.1　實(shí)現(xiàn)原理

2.2　工作原理

2.3　基本用法

2.4　列偏移

2.5　列排序

2.6　列嵌套

2.7　案例：招商銀行首頁(yè)

實(shí)訓(xùn)項(xiàng)目---頁(yè)面布局



3　CSS布局

3.1　標(biāo)題

3.1.1標(biāo)題

3.1.2　小標(biāo)題

3.1.3　display類(lèi)

3.2　文本

3.2.1　lead類(lèi)

3.2.2　mark 標(biāo)簽

3.2.3　del 和 s 標(biāo)簽

3.2.4　ins 和 u 標(biāo)簽

3.2.5　strong 和 b 標(biāo)簽

3.2.6　em 和 i 標(biāo)簽

3.2.7　文本對(duì)齊方式

3.2.8　字母大小寫(xiě)

3.2.9　縮略語(yǔ)

3.2.10　地址

3.1.11　引用

3.2　列表

3.2.1　有序列表和無(wú)序列表

3.2.2無(wú)樣式列表

3.2.3　內(nèi)聯(lián)列表

3.2.4描述列表

.

3.　3 代碼

3.4　圖片

　3.4.1 圖片形狀

　3.4.2響應(yīng)式圖片

　3.4.3 對(duì)齊圖片

　3.4.4 圖文組合

3.　5 表格

3.　4.1 基礎(chǔ)表格

3.　4.2 條紋表格

3.　4.3帶邊框的表格

3.　4.4 高亮行

3.　4.5 緊湊型表格

3.　4.6 響應(yīng)式表格

3.4.7　表格顏色

3.6　按鈕

3.5.1　基本按鈕

3.5.2　多標(biāo)簽

3.5.3　按鈕風(fēng)格

3.5.4　按鈕大小

3.5.5　塊狀按鈕

3.5.6　激活和禁用

3.8　案例—個(gè)人主頁(yè)

實(shí)訓(xùn)項(xiàng)目--頁(yè)未模塊



4　工具類(lèi)

　4.1 顏色

　4.2 邊框

　4.3 flex布局

　4.4 浮動(dòng)類(lèi)

　4.4.1 浮動(dòng)

　4.4.2 清除浮動(dòng)

　4.5 關(guān)閉圖標(biāo)

　4.6 文本類(lèi)

　4.6.1 文本對(duì)齊

　4.6.2 折行和溢出

　4.6.3 單詞中斷

　4.6.4 文本轉(zhuǎn)換

　4.6.5 等寬字體

　4.6.6 粗細(xì)斜體

　4.6.7 顏色重置

　4.6.8 去掉超鏈接下劃線

　4.7 display屬性

　4.7.1 基本使用

　4.7.2 隱藏元素

　4.7.3 print值

　4.8 溢出

　4.9 定位

　4.10 尺寸

　4.11 間隔

　4.12 垂直對(duì)齊

　4.13 可見(jiàn)性

　4.14 案例---各類(lèi)工具的使用

　實(shí)訓(xùn)項(xiàng)目--圖文模塊

5　表單

5.1　基礎(chǔ)表單

5.1.1　基本實(shí)例

5.1.2　內(nèi)聯(lián)表單

5.1.3　水平表單

5.2　表單控件

5.2.1　輸入框

5.2.2　下拉框

5.2.3　文本域

5.2.4　多選框和單選框

5.3　表單焦點(diǎn)

5.4　表單禁用

5.5　驗(yàn)證樣式

4.5.1　顏色提示

4.5.2　圖標(biāo)提示

4.5.3　文字提示

5.6　元素大小

4.6.1　高度

4.6.2　寬度

5.7　輸入框組

5.8　自定義表單

5.9　案例：一個(gè)表單頁(yè)面

實(shí)訓(xùn)項(xiàng)目--表單部分



6　Css組件

6.1　下拉菜單

6.1.1　基本用法

6.1.2　基本原理

6.1.3　分割線

6.1.4　菜單標(biāo)題

6.1.5　對(duì)齊方式

6.1.6　菜單狀態(tài)

6.3導(dǎo)航

6.3.1導(dǎo)航基礎(chǔ)樣式

6.3.2選項(xiàng)卡導(dǎo)航

6.3.3　Pills導(dǎo)航

6.3.4垂直導(dǎo)航

6.3.5導(dǎo)航狀態(tài)

6.3.6自適應(yīng)導(dǎo)航

6.3.7導(dǎo)航二級(jí)菜單

6.3.8面包屑導(dǎo)航

6.4導(dǎo)航條

6.4.1　導(dǎo)航條的基本用法

6.4.2　品牌圖標(biāo)

6.4.3導(dǎo)航條上的表單

6.4.4導(dǎo)航條上的按鈕

6.4.5導(dǎo)航條上的文本

6.4.6導(dǎo)航條上的鏈接

6.4.7導(dǎo)航條中的二級(jí)菜單

6.4.8固定導(dǎo)航條

6.4.9反色導(dǎo)航條

6.5分頁(yè)導(dǎo)航

6.6標(biāo)簽和徽章

6.7　卡片

5.7.1　基本卡片

5.7.1面板的標(biāo)題和腳注

5.7.1卡片里的元素

5.7.1圖片卡片

6.9提示框

6.10進(jìn)度條

6.10.1基礎(chǔ)進(jìn)度條

6.10.2顯示進(jìn)度條

5.10.3彩色進(jìn)度條

5.10.4堆疊效果

6.11列表組

6.11.1基礎(chǔ)列表組

6.11.2帶徽章的列表組

6.11.3鏈接列表組

6.11.4其他元素的支持

6.11.5狀態(tài)設(shè)置

6.11.6列表組主題

6.12媒體對(duì)象

6.12.1基本構(gòu)成

6.12.2對(duì)齊方式

6.12.3嵌套對(duì)象

6.12.4媒體列表組

6.13　巨幕

6.14　旋轉(zhuǎn)圖標(biāo)

6.15　圖標(biāo)

6.14　案例：制作一個(gè)簡(jiǎn)單的公司主頁(yè)

實(shí)訓(xùn)項(xiàng)目--導(dǎo)航條、頁(yè)頭等模塊



7　javascript插件

7.1插件庫(kù)說(shuō)明

7.2對(duì)話框

7.2.1對(duì)話框的結(jié)構(gòu)

7.2.2對(duì)話框的特點(diǎn)

7.2.3彈出框觸發(fā)方式

7.2.4過(guò)度效果

7.2.5觸發(fā)參數(shù)data-*

7.2.6JavaScript觸發(fā)

7.3下拉菜單

7.3.1聲明式觸發(fā)

7.3.2JavaScript觸發(fā)

7.3.3事件

7.4滾動(dòng)監(jiān)聽(tīng)

7.4.1組件說(shuō)明

7.4.2滾動(dòng)監(jiān)聽(tīng)實(shí)現(xiàn)步驟

7.4.3聲明式觸發(fā)

7.4.4JavaScript觸發(fā)

7.5　Tab選項(xiàng)卡

7.5.1選項(xiàng)卡的組成

7.5.2聲明式觸發(fā)

7.5.3JavaScript觸發(fā)

7.5.4Pills導(dǎo)航

7.5.5過(guò)渡效果

7.5.6事件

7.6Tip提示框

7.6.1結(jié)構(gòu)

7.6.2JavaScript觸發(fā)

7.6.3Data-*屬性

7.6.4事件

7.7Popover彈出框

7.7.1彈出框結(jié)構(gòu)

7.7.2聲明式屬性

7.7.3JavaScript觸發(fā)

7.7.4事件

7.8警告框

6.8.1　Alert結(jié)構(gòu)

6.8.2聲明式觸發(fā)

6.8.3JavaScript觸發(fā)

6.8.4事件

7.9　toast彈框

6.9.1　Alert結(jié)構(gòu)

6.9.2聲明式觸發(fā)

6.9.3JavaScript觸發(fā)

6.9.4事件

7.10折疊

6.10.1結(jié)構(gòu)

6.10.2聲明式觸發(fā)

6.10.3方法

6.10.4事件

7.11輪播圖

6.11.1輪播結(jié)構(gòu)

6.11.2聲明式觸發(fā)

6.11.3javaScript觸發(fā)

6.11.4事件

7.13綜合案例：一個(gè)公司主頁(yè)

實(shí)訓(xùn)項(xiàng)目--輪播、模態(tài)框等模塊



8　企業(yè)網(wǎng)站

　8.1 準(zhǔn)備啟動(dòng)文件

　8.2 頁(yè)頭區(qū)

　8.2.1 把Logo 放到導(dǎo)航條上方

　8.2.2 調(diào)整導(dǎo)航條

　8.3 添加實(shí)用導(dǎo)航

　8.4 調(diào)整響應(yīng)式導(dǎo)航

　8.5 調(diào)整配色

　8.6 調(diào)整折疊后的導(dǎo)航條配色

　8.7 設(shè)計(jì)復(fù)雜的響應(yīng)式布局

　8.7.1 調(diào)整中、寬布局

　8.7.2 調(diào)整標(biāo)題、字體大小和按鈕

　8.7.3 增大主欄

　8.7.4 調(diào)整第三欄

　8.7.5 針對(duì)多個(gè)視口進(jìn)行微調(diào)

　8.8 復(fù)雜的頁(yè)腳

　8.8.1 準(zhǔn)備標(biāo)記

　8.8.2 調(diào)整布局適應(yīng)平板

　8.8.3 針對(duì)性地清除

8.8.4　修整細(xì)節(jié)

附錄