1 Bootstrap 是什么

1.1　Bootstrap 簡述

1.2　如何使用 Bootstrap

1.3　包含內容

1.4　簡單模板

1.5　案例：簡單實例

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

2.1　實現(xiàn)原理

2.2　工作原理

2.3　基本用法

2.4　列偏移

2.5　列排序

2.6　列嵌套

2.7　案例：招商銀行首頁

實訓項目---頁面布局



3　CSS布局

3.1　標題

3.1.1標題

3.1.2　小標題

3.1.3　display類

3.2　文本

3.2.1　lead類

3.2.2　mark 標簽

3.2.3　del 和 s 標簽

3.2.4　ins 和 u 標簽

3.2.5　strong 和 b 標簽

3.2.6　em 和 i 標簽

3.2.7　文本對齊方式

3.2.8　字母大小寫

3.2.9　縮略語

3.2.10　地址

3.1.11　引用

3.2　列表

3.2.1　有序列表和無序列表

3.2.2無樣式列表

3.2.3　內聯(lián)列表

3.2.4描述列表

.

3.　3 代碼

3.4　圖片

　3.4.1 圖片形狀

　3.4.2響應式圖片

　3.4.3 對齊圖片

　3.4.4 圖文組合

3.　5 表格

3.　4.1 基礎表格

3.　4.2 條紋表格

3.　4.3帶邊框的表格

3.　4.4 高亮行

3.　4.5 緊湊型表格

3.　4.6 響應式表格

3.4.7　表格顏色

3.6　按鈕

3.5.1　基本按鈕

3.5.2　多標簽

3.5.3　按鈕風格

3.5.4　按鈕大小

3.5.5　塊狀按鈕

3.5.6　激活和禁用

3.8　案例—個人主頁

實訓項目--頁未模塊



4　工具類

　4.1 顏色

　4.2 邊框

　4.3 flex布局

　4.4 浮動類

　4.4.1 浮動

　4.4.2 清除浮動

　4.5 關閉圖標

　4.6 文本類

　4.6.1 文本對齊

　4.6.2 折行和溢出

　4.6.3 單詞中斷

　4.6.4 文本轉換

　4.6.5 等寬字體

　4.6.6 粗細斜體

　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 垂直對齊

　4.13 可見性

　4.14 案例---各類工具的使用

　實訓項目--圖文模塊

5　表單

5.1　基礎表單

5.1.1　基本實例

5.1.2　內聯(lián)表單

5.1.3　水平表單

5.2　表單控件

5.2.1　輸入框

5.2.2　下拉框

5.2.3　文本域

5.2.4　多選框和單選框

5.3　表單焦點

5.4　表單禁用

5.5　驗證樣式

4.5.1　顏色提示

4.5.2　圖標提示

4.5.3　文字提示

5.6　元素大小

4.6.1　高度

4.6.2　寬度

5.7　輸入框組

5.8　自定義表單

5.9　案例：一個表單頁面

實訓項目--表單部分



6　Css組件

6.1　下拉菜單

6.1.1　基本用法

6.1.2　基本原理

6.1.3　分割線

6.1.4　菜單標題

6.1.5　對齊方式

6.1.6　菜單狀態(tài)

6.3導航

6.3.1導航基礎樣式

6.3.2選項卡導航

6.3.3　Pills導航

6.3.4垂直導航

6.3.5導航狀態(tài)

6.3.6自適應導航

6.3.7導航二級菜單

6.3.8面包屑導航

6.4導航條

6.4.1　導航條的基本用法

6.4.2　品牌圖標

6.4.3導航條上的表單

6.4.4導航條上的按鈕

6.4.5導航條上的文本

6.4.6導航條上的鏈接

6.4.7導航條中的二級菜單

6.4.8固定導航條

6.4.9反色導航條

6.5分頁導航

6.6標簽和徽章

6.7　卡片

5.7.1　基本卡片

5.7.1面板的標題和腳注

5.7.1卡片里的元素

5.7.1圖片卡片

6.9提示框

6.10進度條

6.10.1基礎進度條

6.10.2顯示進度條

5.10.3彩色進度條

5.10.4堆疊效果

6.11列表組

6.11.1基礎列表組

6.11.2帶徽章的列表組

6.11.3鏈接列表組

6.11.4其他元素的支持

6.11.5狀態(tài)設置

6.11.6列表組主題

6.12媒體對象

6.12.1基本構成

6.12.2對齊方式

6.12.3嵌套對象

6.12.4媒體列表組

6.13　巨幕

6.14　旋轉圖標

6.15　圖標

6.14　案例：制作一個簡單的公司主頁

實訓項目--導航條、頁頭等模塊



7　javascript插件

7.1插件庫說明

7.2對話框

7.2.1對話框的結構

7.2.2對話框的特點

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

7.2.4過度效果

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滾動監(jiān)聽

7.4.1組件說明

7.4.2滾動監(jiān)聽實現(xiàn)步驟

7.4.3聲明式觸發(fā)

7.4.4JavaScript觸發(fā)

7.5　Tab選項卡

7.5.1選項卡的組成

7.5.2聲明式觸發(fā)

7.5.3JavaScript觸發(fā)

7.5.4Pills導航

7.5.5過渡效果

7.5.6事件

7.6Tip提示框

7.6.1結構

7.6.2JavaScript觸發(fā)

7.6.3Data-*屬性

7.6.4事件

7.7Popover彈出框

7.7.1彈出框結構

7.7.2聲明式屬性

7.7.3JavaScript觸發(fā)

7.7.4事件

7.8警告框

6.8.1　Alert結構

6.8.2聲明式觸發(fā)

6.8.3JavaScript觸發(fā)

6.8.4事件

7.9　toast彈框

6.9.1　Alert結構

6.9.2聲明式觸發(fā)

6.9.3JavaScript觸發(fā)

6.9.4事件

7.10折疊

6.10.1結構

6.10.2聲明式觸發(fā)

6.10.3方法

6.10.4事件

7.11輪播圖

6.11.1輪播結構

6.11.2聲明式觸發(fā)

6.11.3javaScript觸發(fā)

6.11.4事件

7.13綜合案例：一個公司主頁

實訓項目--輪播、模態(tài)框等模塊



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

　8.1 準備啟動文件

　8.2 頁頭區(qū)

　8.2.1 把Logo 放到導航條上方

　8.2.2 調整導航條

　8.3 添加實用導航

　8.4 調整響應式導航

　8.5 調整配色

　8.6 調整折疊后的導航條配色

　8.7 設計復雜的響應式布局

　8.7.1 調整中、寬布局

　8.7.2 調整標題、字體大小和按鈕

　8.7.3 增大主欄

　8.7.4 調整第三欄

　8.7.5 針對多個視口進行微調

　8.8 復雜的頁腳

　8.8.1 準備標記

　8.8.2 調整布局適應平板

　8.8.3 針對性地清除

8.8.4　修整細節(jié)

附錄