Bootstrap 5從入門到精通（視頻教學(xué)版）

目    錄
第 1 章  認(rèn)識Bootstrap
1.1  Bootstrap概述
1.1.1  Bootstrap的由來
1.1.2  Bootstrap的版本
1.1.3  瀏覽器支持
1.2  Bootstrap特性
1.2.1  Bootstrap的功能
1.2.2  Bootstrap的構(gòu)成
1.2.3  Bootstrap的特色
1.2.4  Bootstrap的優(yōu)勢
1.3  Bootstrap開發(fā)工具和資源
1.3.1  Bootstrap開發(fā)工具
1.3.2  Bootstrap資源
1.4  Bootstrap 5的新變化
第 2 章  使用Bootstrap 5
2.1  下載Bootstrap 5
2.2  安裝Bootstrap 5.3
2.2.1  本地安裝
2.2.2  在線安裝
2.3  實(shí)戰(zhàn)案例
2.3.1  案例1：第一個(gè)Bootstrap網(wǎng)頁
2.3.2  案例2：設(shè)計(jì)古詩網(wǎng)頁顯示樣式
2.3.3  案例3：設(shè)計(jì)網(wǎng)站主頁的按鈕
第 3 章  Bootstrap的基本架構(gòu)
3.1  Bootstrap布局基礎(chǔ)
3.1.1  響應(yīng)式設(shè)計(jì)
3.1.2  布局容器
3.1.3  響應(yīng)式容器
3.1.4  媒體查詢
3.1.5  z-index屬性
3.2  Bootstrap的網(wǎng)格系統(tǒng)
3.2.1  認(rèn)識網(wǎng)格系統(tǒng)
3.2.2  響應(yīng)列
3.2.3  響應(yīng)類
3.2.4  偏移列
3.2.5  嵌套列
3.3  實(shí)戰(zhàn)案例
3.3.1  案例1：設(shè)計(jì)網(wǎng)站動(dòng)畫特效
3.3.2  案例2：設(shè)計(jì)美食博客頁面
3.3.3  案例3：設(shè)計(jì)網(wǎng)頁資訊頁面
第 4 章  Bootstrap的彈性布局
4.1  定義彈性盒子
4.2  排列方向
4.2.1  水平方向排列
4.2.2  垂直方向排列
4.3  定義彈性布局
4.3.1  內(nèi)容排列布局
4.3.2  項(xiàng)目對齊布局
4.3.3  自動(dòng)對齊布局
4.3.4  自動(dòng)相等布局
4.3.5  等寬變換布局
4.3.6  包裹彈性布局
4.3.7  排列順序布局
4.3.8  對齊內(nèi)容布局
4.4  自動(dòng)浮動(dòng)布局
4.4.1  水平方向浮動(dòng)布局
4.4.2  垂直方向浮動(dòng)布局
4.5  實(shí)戰(zhàn)案例
4.5.1  案例1：彈性布局聯(lián)系頁面
4.5.2  案例2：彈性布局產(chǎn)品頁面
4.5.3  案例3：彈性布局員工頁面
第 5 章  精通Bootstrap頁面排版
5.1  頁面排版的初始化
5.2  文字排版
5.2.1  標(biāo)題
5.2.2  段落
5.2.3  強(qiáng)調(diào)
5.2.4  縮略語
5.2.5  引用
5.3  顯示代碼
5.3.1  行內(nèi)代碼
5.3.2  多行代碼塊
5.4  響應(yīng)式圖片
5.4.1  圖片的同步縮放
5.4.2  圖片縮略圖
5.4.3  圖片對齊方式
5.5  優(yōu)化表格的樣式
5.5.1  表格默認(rèn)樣式
5.5.2  無邊框表格樣式
5.5.3  條紋狀表格樣式
5.5.4  設(shè)計(jì)表格邊框樣式
5.5.5  鼠標(biāo)指針懸停表格樣式
5.5.6  設(shè)置表格背景顏色
5.6  實(shí)戰(zhàn)案例
5.6.1  案例1：設(shè)計(jì)人員管理頁面
5.6.2  案例2：設(shè)計(jì)商品信息管理頁面
5.6.3  案例3：設(shè)計(jì)訂單信息管理頁面
第 6 章  使用CSS通用樣式
6.1  文本處理
6.1.1  文本對齊
6.1.2  文本換行
6.1.3  轉(zhuǎn)換大小寫
6.1.4  粗細(xì)和斜體
6.1.5  其他文本樣式類
6.2  顏色樣式
6.2.1  文本顏色
6.2.2  鏈接顏色
6.2.3  背景顏色
6.3  邊框樣式
6.3.1  添加邊框
6.3.2  邊框顏色
6.3.3  圓角邊框
6.4  寬度和高度
6.4.1  相對于父元素
6.4.2  相對于視口
6.5  邊距樣式
6.5.1  邊距的定義
6.5.2  響應(yīng)式邊距
6.6  浮動(dòng)樣式
6.6.1  實(shí)現(xiàn)浮動(dòng)樣式
6.6.2  響應(yīng)式浮動(dòng)樣式
6.7  display屬性
6.7.1  隱藏或顯示元素
6.7.2  響應(yīng)式隱藏或顯示元素
6.8  其他通用樣式
6.8.1  嵌入網(wǎng)頁元素
6.8.2  內(nèi)容溢出
6.8.3  定位網(wǎng)頁元素
6.8.4  定義陰影效果
6.9  實(shí)戰(zhàn)案例
6.9.1  案例1：設(shè)計(jì)圖文混排頁面
6.9.2  案例2：設(shè)計(jì)旅游宣傳頁面
6.9.3  案例3：設(shè)計(jì)服務(wù)宣傳頁面
第 7 章  常見CSS組件的使用
7.1  下拉菜單
7.1.1  定義下拉菜單
7.1.2  設(shè)置下拉菜單
7.1.3  下拉菜單的彈出方向
7.1.4  下拉菜單中的文本項(xiàng)
7.2  按鈕
7.2.1  定義按鈕
7.2.2  設(shè)計(jì)按鈕風(fēng)格
7.2.3  設(shè)置塊級按鈕
7.3  按鈕組
7.3.1  定義按鈕組
7.3.2  設(shè)置按鈕組大小
7.3.3  設(shè)計(jì)按鈕組的布局
7.4  導(dǎo)航組件
7.4.1  定義導(dǎo)航
7.4.2  設(shè)計(jì)導(dǎo)航的布局
7.4.3  設(shè)計(jì)導(dǎo)航的風(fēng)格
7.4.4  動(dòng)態(tài)導(dǎo)航選項(xiàng)卡
7.5  信息提示框
7.5.1  定義信息提示框
7.5.2  添加鏈接
7.5.3  關(guān)閉信息提示框
7.6  實(shí)戰(zhàn)案例
7.6.1  案例1：設(shè)計(jì)左側(cè)導(dǎo)航欄頁面
7.6.2  案例2：設(shè)計(jì)橫向菜單欄頁面
7.6.3  案例3：模擬制作選擇題答題樣式頁面
第 8 章  高級CSS組件的使用
8.1  導(dǎo)航欄
8.1.1  定義導(dǎo)航欄
8.1.2  定位導(dǎo)航欄
8.1.3  不同顏色導(dǎo)航欄
8.1.4  居中對齊導(dǎo)航欄
8.1.5  垂直對齊導(dǎo)航欄
8.2  進(jìn)度條
8.2.1  定義進(jìn)度條
8.2.2  設(shè)計(jì)進(jìn)度條樣式
8.2.3  設(shè)計(jì)進(jìn)度條風(fēng)格
8.3  列表組
8.3.1  定義列表組
8.3.2  設(shè)置列表組樣式
8.3.3  定制列表組內(nèi)容
8.4  分頁效果
8.4.1  定義分頁
8.4.2  使用圖標(biāo)
8.4.3  設(shè)計(jì)分頁風(fēng)格
8.5  面包屑
8.5.1  定義面包屑
8.5.2  設(shè)計(jì)分隔符
8.6  徽章
8.6.1  定義徽章
8.6.2  設(shè)置徽章顏色
8.6.3  定義橢圓形徽章
8.6.4  徽章插入元素內(nèi)
8.7  實(shí)戰(zhàn)案例
8.7.1  案例1：設(shè)計(jì)招聘信息頁面
8.7.1  案例2：設(shè)計(jì)部門人數(shù)頁面
8.7.1  案例3：設(shè)計(jì)產(chǎn)品展示頁面
第 9 章  卡片、旋轉(zhuǎn)器和手風(fēng)琴組件
9.1  卡片內(nèi)容
9.1.1  定義卡片
9.1.2  卡片的圖片
9.1.3  卡片的列表組
9.1.4  卡片的頁眉和頁腳
9.2  控制卡片的寬度
9.2.1  使用網(wǎng)格系統(tǒng)控制
9.2.2  使用寬度類控制
9.2.3  使用CSS樣式控制
9.3  卡片中文本的對齊方式
9.4  卡片中添加導(dǎo)航
9.5  設(shè)計(jì)卡片的風(fēng)格
9.5.1  設(shè)置卡片的背景顏色
9.5.2  設(shè)置背景圖像
9.5.3 卡片的邊框顏色
9.5.4  設(shè)計(jì)卡片的樣式
9.6  卡片排版
9.7  旋轉(zhuǎn)器
9.7.1  定義旋轉(zhuǎn)器
9.7.2  設(shè)置旋轉(zhuǎn)器風(fēng)格
9.7.3  設(shè)置旋轉(zhuǎn)器的對齊方式
9.7.4  按鈕旋轉(zhuǎn)器
9.8  手風(fēng)琴組件
9.8.1  創(chuàng)建手風(fēng)琴
9.8.2  手風(fēng)琴組件的樣式
9.8.3  手風(fēng)琴組件中使用列表
9.8.4  設(shè)計(jì)手風(fēng)琴效果
9.9  實(shí)戰(zhàn)案例
9.9.1  案例1：設(shè)計(jì)卡片布局頁面
9.9.2  案例2：設(shè)計(jì)綜合評價(jià)頁面
9.9.3  案例3：設(shè)計(jì)產(chǎn)品推薦頁面
第 10 章  認(rèn)識JavaScript插件
10.1  插件概述
10.1.1  插件分類
10.1.2  安裝插件
10.1.3  調(diào)用插件
10.2  警告框插件
10.2.1  關(guān)閉警告框
10.2.2  顯示警告框
10.3  按鈕插件
10.3.1  按鈕式復(fù)選框
10.3.2  按鈕式單選按鈕
10.4  輪播插件
10.4.1  定義輪播
10.4.2  描述輪播圖片
10.4.3  設(shè)計(jì)輪播風(fēng)格
10.5  折疊插件
10.5.1  定義折疊效果
10.5.2  控制多目標(biāo)
10.6  下拉菜單插件
10.6.1  調(diào)用下拉菜單
10.6.2  設(shè)置下拉菜單
10.6.3  添加用戶行為
10.7  模態(tài)框插件
10.7.1  定義模態(tài)框
10.7.2  模態(tài)框布局
10.7.3  模態(tài)框樣式
10.8  實(shí)戰(zhàn)案例
10.8.1  案例1：設(shè)計(jì)搶紅包模態(tài)框
10.8.2  案例2：設(shè)計(jì)用戶登錄頁面
10.8.3  案例3：設(shè)計(jì)網(wǎng)頁Banner效果
第 11 章  精通JavaScript插件
11.1  側(cè)邊欄導(dǎo)航
11.1.1  創(chuàng)建側(cè)邊欄導(dǎo)航
11.1.2  側(cè)邊欄導(dǎo)航的方向
11.1.3  設(shè)置側(cè)邊欄導(dǎo)航背景樣式
11.2  彈出框插件
11.2.1  創(chuàng)建彈出框
11.2.2  彈出框方向
11.2.3  關(guān)閉彈出框
11.3  滾動(dòng)監(jiān)聽插件
11.3.1  創(chuàng)建滾動(dòng)監(jiān)聽
11.3.1  導(dǎo)航欄中的滾動(dòng)監(jiān)聽
11.3.2  垂直導(dǎo)航欄中的滾動(dòng)監(jiān)聽
11.3.2  列表組中的滾動(dòng)監(jiān)聽
11.4  標(biāo)簽頁插件
11.5  吐司消息插件
11.5.1  創(chuàng)建吐司消息
11.5.2  堆疊吐司消息
11.5.3  自定義吐司消息
11.5.4  設(shè)置吐司消息的顏色
11.6  提示框插件
11.6.1  創(chuàng)建提示框
11.6.2  提示框方向
11.6.3  調(diào)用提示框
11.7  實(shí)戰(zhàn)案例
11.7.1  案例1：設(shè)計(jì)商品推薦區(qū)頁面
11.7.2  案例2：設(shè)計(jì)側(cè)邊導(dǎo)航欄
11.7.3  案例3：設(shè)計(jì)產(chǎn)品展示區(qū)頁面
第 12 章  Bootstrap表單的應(yīng)用
12.1  Bootstrap創(chuàng)建表單
12.1.1  定義表單控件
12.1.2  設(shè)置表單控件的大小
12.1.3  設(shè)置表單控件只讀
12.1.4  設(shè)置只讀純文本
12.1.5  范圍輸入
12.2  復(fù)選框和單選按鈕
12.2.1  默認(rèn)堆疊方式
12.2.2  水平排列方式
12.2.3  開關(guān)形式的復(fù)選框
12.3  設(shè)計(jì)表單的布局
12.3.1  使用網(wǎng)格系統(tǒng)布局表單
12.3.2  設(shè)置列的寬度布局表單
12.4  下拉列表
12.4.1  單選和多選下拉列表
12.4.2  為元素設(shè)置下拉列表
12.5  幫助文本
12.6  禁用表單
12.7  浮動(dòng)標(biāo)簽
12.8  實(shí)戰(zhàn)案例
12.8.1  案例1：設(shè)計(jì)用戶登記表
12.8.2  案例2：設(shè)計(jì)員工注冊表
12.8.3  案例3：設(shè)計(jì)聯(lián)系信息頁面
第 13 章  綜合項(xiàng)目1——開發(fā)網(wǎng)上商城網(wǎng)站
13.1  網(wǎng)站概述
13.1.1  網(wǎng)站結(jié)構(gòu)
13.1.2  項(xiàng)目效果
13.1.3  設(shè)計(jì)準(zhǔn)備
13.2  設(shè)計(jì)主頁
13.2.1  設(shè)計(jì)網(wǎng)頁頭部
13.2.2  設(shè)計(jì)導(dǎo)航條
13.2.3  設(shè)計(jì)輪播廣告
13.3.4  設(shè)計(jì)橫幅廣告
13.2.5  設(shè)計(jì)產(chǎn)品介紹
13.2.6  設(shè)計(jì)特色展示
13.2.7  設(shè)計(jì)主頁底部
13.3  設(shè)計(jì)其他頁面
13.3.1  “關(guān)于我們”頁面
13.3.2  “服務(wù)介紹”頁面
13.3.3  “聯(lián)系我們”頁面
13.3.4  “客戶評價(jià)”頁面
13.3.5  “團(tuán)隊(duì)介紹”頁面