【章名目錄】 第 1章　Bootstrap概述 第 2章　Bootstrap 5的基礎(chǔ)樣式 第3章　Bootstrap 5的工具類 第4章　Bootstrap 5的彈性布局 第5章　Bootstrap 5的柵格布局 第6章　Bootstrap 5的組件（一） 第7章　Bootstrap 5的組件（二） 第8章　Bootstrap 5的表單 第9章　定制與優(yōu)化Bootstrap 5 第 10章　綜合案例1——Web學(xué)習(xí)網(wǎng)站的設(shè)計(jì) 第 11章　綜合案例2——產(chǎn)品展示網(wǎng)站的設(shè)計(jì) 【詳細(xì)目錄】 第 1章　Bootstrap概述 1.1　認(rèn)識(shí)Bootstrap　1 1.2　Bootstrap的版本　2 1.3　Bootstrap 5的特點(diǎn)　2 1.4　Bootstrap 5的內(nèi)容　3 1.5　Bootstrap 5的下載　4 1.6　Bootstrap 5的結(jié)構(gòu)　5 1.6.1　Bootstrap 5編譯版文件的目錄結(jié)構(gòu)　5 1.6.2　Bootstrap 5源碼文件的目錄結(jié)構(gòu)　6 1.7　引入Bootstrap 5　6 1.8　開發(fā)工具　7 1.8.1　VS Code　7 1.8.2　WebStorm　9 1.9　使用Bootstrap 5創(chuàng)建網(wǎng)頁(yè)　9 習(xí)題　14 第 2章　Bootstrap 5的基礎(chǔ)樣式 2.1　文字版式　16 2.1.1　樣式　16 2.1.2　標(biāo)題　16 2.1.3　內(nèi)聯(lián)文本元素　19 2.1.4　縮略語(yǔ)　19 2.1.5　引用　20 2.1.6　列表　21 2.2　圖片　23 2.3　表格　24 2.4　輪廓　28 習(xí)題　29 第3章　Bootstrap 5的工具類 3.1　認(rèn)識(shí)工具類　30 3.1.1　工具類的引入　30 3.1.2　工具類的命名　31 3.2　顏色工具類　33 3.2.1　文本顏色和背景顏色　33 3.2.2　鏈接顏色　34 3.3　邊框工具類　35 3.3.1　添加和刪除邊框　35 3.3.2　圓角邊框　36 3.4　邊距工具類　37 3.4.1　外邊距和內(nèi)邊距　37 3.4.2　響應(yīng)式邊距　38 3.5　寬度和高度工具類　39 3.6　顯示和浮動(dòng)工具類　41 3.6.1　顯示工具類　41 3.6.2　浮動(dòng)工具類　44 3.7　文本工具類　45 3.7.1　文本對(duì)齊　45 3.7.2　文本換行　45 3.7.3　文本轉(zhuǎn)換　47 3.7.4　控制文本字號(hào)、樣式和行高等的工具類　47 3.8　其他工具類　48 3.8.1　彈性盒子工具類　48 3.8.2　位置工具類　49 3.8.3　陰影工具類　49 3.9　工具類的應(yīng)用　49 習(xí)題　52 第4章　Bootstrap 5的彈性布局 4.1　彈性布局的概念　54 4.2　彈性布局容器的樣式　55 4.2.1　項(xiàng)目對(duì)齊的工具類　56 4.2.2　排列方向的工具類　59 4.2.3　項(xiàng)目換行的工具類　60 4.3　彈性布局項(xiàng)目的樣式　62 4.3.1　項(xiàng)目排序的工具類　62 4.3.2　項(xiàng)目伸縮的工具類　62 4.3.3　自身對(duì)齊的工具類　65 4.3.4　自動(dòng)浮動(dòng)的工具類　66 4.4　彈性布局的應(yīng)用　67 4.4.1　圖文混排的實(shí)現(xiàn)　67 4.4.2　響應(yīng)式頁(yè)面的實(shí)現(xiàn)　69 習(xí)題　71 第5章　Bootstrap 5的柵格布局 5.1　柵格布局的基礎(chǔ)知識(shí)　73 5.1.1　視口和斷點(diǎn)　73 5.1.2　柵格布局的原則　74 5.1.3　Bootstrap 5的設(shè)備參數(shù)　74 5.1.4　柵格布局使用的類　75 5.2　自動(dòng)布局列　76 5.2.1　等寬列　76 5.2.2　自動(dòng)寬度列　78 5.3　響應(yīng)式布局類　79 5.3.1　覆蓋所有設(shè)備　80 5.3.2　水平排列　80 5.3.3　匹配多種類型的設(shè)備　81 5.4　嵌套　82 5.5　列布局　83 5.5.1　列排序　83 5.5.2　列偏移　84 5.6　柵格布局的應(yīng)用　86 習(xí)題　90 第6章　Bootstrap 5的組件（一） 6.1　按鈕和按鈕組　92 6.1.1　按鈕　92 6.1.2　按鈕組　94 6.2　導(dǎo)航　96 6.2.1　創(chuàng)建導(dǎo)航　96 6.2.2　兩種不同樣式的導(dǎo)航　97 6.2.3　標(biāo)簽頁(yè)　97 6.3　導(dǎo)航條　99 6.3.1　創(chuàng)建基本樣式導(dǎo)航條　99 6.3.2　創(chuàng)建響應(yīng)式導(dǎo)航條　100 6.3.3　在導(dǎo)航條中添加表單和下拉菜單　101 6.4　徽章　103 6.5　列表組和分頁(yè)　103 6.5.1　列表組　103 6.5.2　分頁(yè)　106 6.6　進(jìn)度條　107 6.7　卡片　108 6.7.1　創(chuàng)建卡片　108 6.7.2　卡片的組成元素　109 6.7.3　用卡片實(shí)現(xiàn)的縮略圖　112 6.8　組件的應(yīng)用——網(wǎng)站后臺(tái)管理系統(tǒng)　113 6.8.1　頁(yè)面結(jié)構(gòu)的描述　113 6.8.2　導(dǎo)航部分的設(shè)計(jì)　115 6.8.3　主體部分的設(shè)計(jì)　116 習(xí)題　119 第7章　Bootstrap 5的組件（二） 7.1　模態(tài)對(duì)話框　121 7.2　下拉菜單　123 7.3　提示組件　126 7.3.1　工具提示框　126 7.3.2　彈出提示框　127 7.3.3　警告框　128 7.4　折疊組件和手風(fēng)琴組件　129 7.4.1　折疊組件　129 7.4.2　手風(fēng)琴組件　131 7.5　輪播組件　133 7.5.1　創(chuàng)建輪播組件　133 7.5.2　輪播組件的結(jié)構(gòu)　134 7.6　滾動(dòng)監(jiān)聽組件　135 7.6.1　監(jiān)聽導(dǎo)航　135 7.6.2　監(jiān)聽導(dǎo)航條　136 7.7　組件的應(yīng)用——輪播廣告　138 7.7.1　頁(yè)面結(jié)構(gòu)的描述　138 7.7.2　導(dǎo)航部分的設(shè)計(jì)　139 7.7.3　輪播廣告部分的設(shè)計(jì)　140 7.7.4　CSS代碼　142 習(xí)題　143 第8章　Bootstrap 5的表單 8.1　表單控件　145 8.1.1　輸入框　145 8.1.2　單選按鈕和復(fù)選框　147 8.1.3　下拉列表　150 8.1.4　滑動(dòng)條　151 8.1.5　輸入框組　151 8.2　表單布局　152 8.2.1　內(nèi)聯(lián)表單　152 8.2.2　水平表單　154 8.2.3　復(fù)雜表單　156 8.3　表單的校驗(yàn)　158 8.4　表單的應(yīng)用——響應(yīng)式表單　160 8.4.1　頁(yè)面結(jié)構(gòu)的描述　160 8.4.2　導(dǎo)航部分的設(shè)計(jì)　161 8.4.3　表單部分的設(shè)計(jì)　162 8.4.4　CSS代碼　163 習(xí)題　165 第9章　定制與優(yōu)化Bootstrap 5 9.1　CSS預(yù)處理程序　166 9.1.1　CSS預(yù)處理程序的概念　166 9.1.2　引入CSS預(yù)處理程序的原因　166 9.2　Sass的安裝與使用　168 9.2.1　安裝Ruby　168 9.2.2　安裝Sass和Sass命令　169 9.3　Sass的基本應(yīng)用　170 9.3.1　使用變量　170 9.3.2　計(jì)算功能　171 9.3.3　選擇器嵌套　171 9.3.4　注釋　172 9.3.5　代碼重用　173 9.3.6　控制語(yǔ)句　176 9.4　Sass的擴(kuò)展庫(kù)Compass　179 9.4.1　Compass的安裝　179 9.4.2　Compass的內(nèi)置模塊　179 9.4.3　Compass的Helpers函數(shù)　183 9.5　Sass的應(yīng)用——修改Bootstrap 5源碼　184 習(xí)題　186 第 10章　綜合案例1——Web學(xué)習(xí)網(wǎng)站的設(shè)計(jì) 10.1　頁(yè)面分析　187 10.1.1　頁(yè)面結(jié)構(gòu)設(shè)計(jì)　187 10.1.2　引入Web框架　189 10.1.3　案例中的Bootstrap 5元素　190 10.2　頁(yè)頭部分的設(shè)計(jì)　190 10.2.1　頂部導(dǎo)航條　191 10.2.2　banner欄目　193 10.2.3　搜索欄目　194 10.3　課程和大綱等模塊的設(shè)計(jì)　195 10.4　學(xué)習(xí)路徑、教學(xué)團(tuán)隊(duì)和問(wèn)答等模塊的設(shè)計(jì)　198 10.4.1　學(xué)習(xí)路徑模塊　198 10.4.2　教學(xué)團(tuán)隊(duì)模塊　199 10.4.3　問(wèn)答模塊　202 10.5　頁(yè)腳部分的設(shè)計(jì)　203 習(xí)題　206 第 11章　綜合案例2——產(chǎn)品展示網(wǎng)站的設(shè)計(jì) 11.1　頁(yè)面分析　208 11.1.1　頁(yè)面結(jié)構(gòu)設(shè)計(jì)　208 11.1.2　引入Web框架　210 11.1.3　案例中的全局樣式　211 11.2　頁(yè)頭部分的設(shè)計(jì)　211 11.3　輪播模塊的設(shè)計(jì)　213 11.4　熱點(diǎn)機(jī)型和智能電視模塊的設(shè)計(jì)　216 11.4.1　熱點(diǎn)機(jī)型模塊的設(shè)計(jì)　216 11.4.2　智能電視模塊的設(shè)計(jì)　219 11.5　特色產(chǎn)品模塊的設(shè)計(jì)　220 11.6　附件和頁(yè)腳的設(shè)計(jì)　224 習(xí)題　226 參考文獻(xiàn)