Bootstrap基礎(chǔ)教程

第1章 Bootstrap是什么 1
1．1　Bootstrap簡(jiǎn)述　2
1．2　為什么使用Bootstrap　2
1．3　如何使用Bootstrap　3
1．4　下載Bootstrap　3
1．5　簡(jiǎn)單模板　5
1．6　案例：第一個(gè)Bootstrap實(shí)例　7
1．7　Bootstrap 4　9
本章小結(jié)　9
練習(xí)與實(shí)訓(xùn)　9
第2章　柵格系統(tǒng)　10
2．1　實(shí)現(xiàn)原理　11
2．2　工作原理　11
2．3　使用方法　13
2．3．1　基本用法　13
2．3．2　列偏移　14
2．3．3　列排序　15
2．3．4　列嵌套　17
2．3．5　響應(yīng)式柵格　18
2．4　案例：招商銀行首頁(yè)　22
本章小結(jié)　26
練習(xí)與實(shí)訓(xùn)　26
第3章　CSS布局　27
3．1　排版　28
3．1．1　標(biāo)題　28
3．1．2　段落　29
3．1．3　mark標(biāo)簽　30
3．1．4　小號(hào)文本　30
3．1．5　del和s標(biāo)簽　30
3．1．6　ins和u標(biāo)簽　30
3．1．7　strong和em標(biāo)簽　31
3．1．8　b和i標(biāo)簽　31
3．1．9　文本對(duì)齊方式　31
3．1．10　字母大小寫　32
3．1．11　縮略語(yǔ)　32
3．1．12　地址　33
3．1．13　引用　34
3．2　列表　35
3．2．1　無(wú)序列表和有序列表　35
3．2．2　無(wú)樣式列表　35
3．2．3　內(nèi)聯(lián)列表　36
3．2．4　描述列表　37
3．3　代碼　38
3．4　表格　39
3．4．1　基本表格　39
3．4．2　斑馬線表格　40
3．4．3　帶邊框的表格　41
3．4．4　鼠標(biāo)懸停高亮行　41
3．4．5　緊湊型表格　42
3．4．6　狀態(tài)類　43
3．4．7　響應(yīng)式表格　44
3．5　按鈕　45
3．5．1　預(yù)定義按鈕　45
3．5．2　按鈕尺寸　45
3．5．3　塊級(jí)按鈕　46
3．5．4　按鈕激活狀態(tài)　46
3．5．5　按鈕禁用狀態(tài)　46
3．5．6　按鈕標(biāo)簽　47
3．6　圖像　47
3．6．1　響應(yīng)式圖像　47
3．6．2　圖像形狀　47
3．7　輔助類　48
3．7．1　情景文本顏色　48
3．7．2　情景文本背景色　48
3．7．3　關(guān)閉按鈕　49
3．7．4　三角符號(hào)　49
3．7．5　快速浮動(dòng)　50
3．7．6　塊級(jí)居中顯示　50
3．7．7　清除浮動(dòng)　51
3．7．8　顯示或隱藏　51
3．7．9　屏幕閱讀器和鍵盤焦點(diǎn)　52
3．7．10　圖像替換　52
3．8　案例：個(gè)人簡(jiǎn)歷　52
本章小結(jié)　57
練習(xí)與實(shí)訓(xùn)　57
第4章　表單　58
4．1　基礎(chǔ)表單　59
4．1．1　基本實(shí)例　59
4．1．2　內(nèi)聯(lián)表單　60
4．1．3　水平表單　60
4．2　輸入框　62
4．3　下拉框　63
4．4　文本域　64
4．5　復(fù)選框和單選按鈕　64
4．6　表單焦點(diǎn)　66
4．7　表單禁用　67
4．8　驗(yàn)證樣式　69
4．8．1　顏色提示　69
4．8．2　圖標(biāo)提示　70
4．8．3　文字提示　71
4．9　元素大小　72
4．9．1　高度　72
4．9．2　寬度　74
4．10　輸入框組　74
4．11　案例：一個(gè)表單頁(yè)面　78
本章小結(jié)　80
練習(xí)與實(shí)訓(xùn)　80
第5章　CSS組件　81
5．1　字體圖標(biāo)　82
5．1．1　可用的字體圖標(biāo)　82
5．1．2　使用字體圖標(biāo)　83
5．1．3　字體圖標(biāo)實(shí)例　83
5．1．4　定制字體圖標(biāo)　84
5．2　下拉菜單　84
5．2．1　基本用法　84
5．2．2　對(duì)齊　85
5．2．3　標(biāo)題和分割線　85
5．2．4　菜單狀態(tài)　86
5．3　按鈕組　86
5．3．1　基本按鈕組　86
5．3．2　按鈕工具欄　87
5．3．3　尺寸　88
5．3．4　嵌套　88
5．3．5　垂直的按鈕組　89
5．3．6　兩端對(duì)齊的按鈕組　89
5．4　按鈕式彈出菜單　90
5．4．1　單按鈕下拉菜單　90
5．4．2　分裂式按鈕下拉菜單　90
5．4．3　尺寸　91
5．4．4　向上彈出式菜單　92
5．5　輸入框組　92
5．5．1　基本實(shí)例　92
5．5．2　尺寸　93
5．5．3　作為額外元素的復(fù)選框和單選
按鈕　93
5．5．4　作為額外元素的按鈕　94
5．5．5　作為額外元素的按鈕式下拉菜單　94
5．5．6　作為額外元素的分裂式按鈕下拉菜單　95
5．5．7　作為額外元素的多個(gè)按鈕　95
5．6　導(dǎo)航　96
5．6．1　選項(xiàng)卡導(dǎo)航　96
5．6．2　膠囊式導(dǎo)航　96
5．6．3　兩端對(duì)齊的導(dǎo)航　97
5．6．4　禁用的鏈接　98
5．6．5　帶有下拉菜單的導(dǎo)航　98
5．7　導(dǎo)航欄　99
5．7．1　默認(rèn)樣式的導(dǎo)航欄　99
5．7．2　品牌圖標(biāo)　100
5．7．3　表單　100
5．7．4　按鈕　101
5．7．5　文本　101
5．7．6　非導(dǎo)航的鏈接　101
5．7．7　對(duì)齊方式　102
5．7．8　固定在頂部　103
5．7．9　固定在底部　103
5．7．10　靜止在頂部　103
5．7．11　反色導(dǎo)航欄　104
5．7．12　響應(yīng)式導(dǎo)航欄　104
5．8　路徑導(dǎo)航　105
5．9　分頁(yè)　106
5．9．1　基本實(shí)例　106
5．9．2　禁用和激活狀態(tài)　106
5．9．3　尺寸　107
5．10　翻頁(yè)　108
5．10．1　基本實(shí)例　108
5．10．2　對(duì)齊鏈接　108
5．10．3　可選的禁用狀態(tài)　109
5．11　標(biāo)簽　109
5．11．1　基本實(shí)例　109
5．11．2　多樣式的標(biāo)簽　110
5．12　徽章　110
5．13　巨幕　111
5．14　頁(yè)頭　112
5．15　縮略圖　113
5．15．1　基本實(shí)例　113
5．15．2　自定義內(nèi)容　114
5．16　警告框　115
5．16．1　基本警告框　115
5．16．2　可關(guān)閉的警告框　116
5．16．3　警告框中的鏈接　116
5．17　進(jìn)度條　117
5．17．1　基本實(shí)例　117
5．17．2　根據(jù)情景變化的進(jìn)度條　117
5．17．3　條紋進(jìn)度條　118
5．17．4　動(dòng)畫進(jìn)度條　119
5．17．5　堆疊進(jìn)度條　120
5．18　媒體對(duì)象　120
5．18．1　默認(rèn)樣式　121
5．18．2　對(duì)齊方式　122
5．18．3　媒體對(duì)象列表　123
5．19　列表組　125
5．19．1　基本實(shí)例　125
5．19．2　向列表組添加徽章　125
5．19．3　向列表組添加鏈接　126
5．19．4　向列表組中添加按鈕　126
5．19．5　列表項(xiàng)目禁用狀態(tài)　127
5．19．6　列表項(xiàng)目情景類　127
5．19．7　向列表組添加自定義內(nèi)容　128
5．20　面板　128
5．20．1　基本實(shí)例　128
5．20．2　帶標(biāo)題的面板　128
5．20．3　帶腳注的面板　129
5．20．4　情景效果　129
5．20．5　帶表格的面板　130
5．20．6　帶列表組的面板　131
5．21　Well　132
5．22　案例：制作一個(gè)個(gè)人簡(jiǎn)歷頁(yè)面　133
本章小結(jié)　138
練習(xí)與實(shí)訓(xùn)　138
第6章　JavaScript插件　139
6．1　插件庫(kù)說(shuō)明　140
6．2　模態(tài)框　140
6．2．1　模態(tài)框的結(jié)構(gòu)　141
6．2．2　模態(tài)框的特點(diǎn)　142
6．2．3　模態(tài)框觸發(fā)方式　144
6．2．4　過(guò)渡效果　145
6．2．5　觸發(fā)參數(shù)data-*　145
6．2．6　JavaScript觸發(fā)——參數(shù)　146
6．2．7　JavaScript觸發(fā)——方法　148
6．2．8　JavaScript觸發(fā)——事件　149
6．3　下拉菜單　151
6．3．1　聲明式觸發(fā)　151
6．3．2　JavaScript觸發(fā)　152
6．3．3　事件　152
6．4　滾動(dòng)監(jiān)聽　154
6．4．1　組件說(shuō)明　154
6．4．2　滾動(dòng)監(jiān)聽實(shí)現(xiàn)步驟　155
6．4．3　聲明式觸發(fā)　156
6．4．4　JavaScript觸發(fā)　158
6．5　選項(xiàng)卡　160
6．5．1　選項(xiàng)卡的組成　161
6．5．2　聲明式觸發(fā)　161
6．5．3　JavaScript觸發(fā)　162
6．5．4　過(guò)渡效果　163
6．5．5　事件　163
6．6　工具提示　165
6．6．1　結(jié)構(gòu)　165
6．6．2　JavaScript觸發(fā)　165
6．6．3　Data-*屬性　166
6．6．4　事件　167
6．7　彈出框　168
6．7．1　彈出框結(jié)構(gòu)　168
6．7．2　聲明式屬性　169
6．7．3　JavaScript觸發(fā)　169
6．7．4　事件　170
6．8　警告框　172
6．8．1　Alert結(jié)構(gòu)　172
6．8．2　聲明式觸發(fā)　172
6．8．3　JavaScript觸發(fā)　173
6．8．4　事件　174
6．9　按鈕　175
6．9．1　按鈕加載狀態(tài)　175
6．9．2　單選按鈕　176
6．9．3　復(fù)選框　176
6．9．4　方法　177
6．10　折疊　178
6．10．1　結(jié)構(gòu)　178
6．10．2　聲明式觸發(fā)　180
6．10．3　方法　181
6．10．4　事件　182
6．11　輪播　183
6．11．1　輪播結(jié)構(gòu)　184
6．11．2　聲明式觸發(fā)　186
6．11．3　JavaScript觸發(fā)　187
6．11．4　事件　187
6．12　Afflix插件　188
6．12．1　聲明屬性　188
6．12．2　JavaScript方法　189
6．12．3　事件　190
6．13　案例　190
本章小結(jié)　200
練習(xí)與實(shí)訓(xùn)　200
第7章　第三方擴(kuò)展　201
7．1　字體圖標(biāo)　202
7．1．1　介紹　202
7．1．2　常規(guī)用法　203
7．1．3　List列表上的圖標(biāo)　204
7．1．4　導(dǎo)航上的圖標(biāo)　205
7．1．5　固定角度旋轉(zhuǎn)圖標(biāo)　207
7．1．6　動(dòng)畫圖標(biāo)　207
7．1．7　多圖疊加　208
7．2　Buttons　210
7．3　DateTimePicker　217
7．4　Flat UI　222
7．5　案例：特性頁(yè)面　223
本章小結(jié)　225
練習(xí)與實(shí)訓(xùn)　226
第8章　綜合案例　227
8．1　網(wǎng)站概述　228
8．2　開始頁(yè)面　230
8．3　主要內(nèi)容的制作　230
8．3．1　制作第一屏　230
8．3．2　制作第二屏　232
8．3．3　制作第三屏　234
8．3．4　制作第四屏　239
8．4　完善網(wǎng)站　240
8．4．1　添加地圖　240
8．4．2　添加導(dǎo)航條　242
8．4．3　設(shè)置頁(yè)腳　244
8．4．4　設(shè)置滾動(dòng)監(jiān)聽　245
8．4．5　平滑滾動(dòng)　245
本章小結(jié)　246
練習(xí)與實(shí)訓(xùn)　246
附錄A　Less和Sass　247
附錄B　CSS選擇器　255
參考文獻(xiàn)　258