Bootstrap 5從入門到精通（視頻教學版）

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