
前端框架Bootstrap4培訓(xùn)
1 Bootstrap4安裝
1.1 使用CDN
1.2 從官網(wǎng)下載 Bootstrap 4并本地調(diào)用
1.3 創(chuàng)建第一個Bootstrap4頁面
1.4 理解Bootstraps4與CSS、JS的關(guān)系
2 Bootstrap4 網(wǎng)格系統(tǒng)(重點(diǎn))
2.1 網(wǎng)格類
2.2 網(wǎng)格系統(tǒng)規(guī)則
2.3 網(wǎng)格的基本結(jié)構(gòu)
2.4 網(wǎng)格布局在不同終端的響應(yīng)式處理
3 Bootstrap4 文字排版
3.1 Bootstrap 4 默認(rèn)基本設(shè)置
3.2 標(biāo)題默認(rèn)設(shè)置與標(biāo)題類
3.3 常見文字相關(guān)標(biāo)簽在Bootstrap4中的默認(rèn)樣式
3.4 更多排版相關(guān)的類
4 Font Awesome字體(重點(diǎn))
4.1 基礎(chǔ)原理
4.2 使用方法
4.3 應(yīng)用場景
5 Bootstrap4 顏色
5.1 文字顏色類
5.2 背景顏色類
6 Bootstrap4 表格(重點(diǎn))
6.1 基礎(chǔ)表格
6.2 條紋表格
6.3 帶邊框表格
6.4 鼠標(biāo)懸停狀態(tài)
6.5 黑色背景表格
6.6 黑色條紋表格
6.7 特定意義的顏色類
6.8 表頭顏色
6.9 較小的表格
6.10 響應(yīng)式表格
7 Bootstrap4 圖像形狀
7.1 圓角圖片
7.2 橢圓圖片
7.3 縮略圖
7.4 圖片對齊方式
7.5 響應(yīng)式圖片
8 Bootstrap4 Jumbotron
9 Bootstrap4 信息提示框
9.1 提示框添加鏈接
9.2 關(guān)閉提示框
9.3 提示框動畫
10 Bootstrap4 按鈕與按鈕組
11 Bootstrap4 徽章
12 Bootstrap4進(jìn)度條
13 Bootstrap4分頁
14 Bootstrap4列表組
15 Bootstrap4卡片
16 Bootstrap4 下拉菜單
16.1 實(shí)例解析
16.2 下拉菜單中的分割線
16.3 下拉菜單中的標(biāo)題
16.4 下拉菜單中的可用項與禁用項
16.5 下拉菜單的定位
16.6 下拉菜單彈出方向設(shè)置
16.7 按鈕中設(shè)置下拉菜單
17 Bootstrap4 折疊
18 Bootstrap4 導(dǎo)航 (重點(diǎn))
18.1 導(dǎo)航對齊方式
18.2 垂直導(dǎo)航
18.3 選項卡
18.4 膠囊導(dǎo)航
18.5 導(dǎo)航等寬
18.6 膠囊下拉菜單
18.7 選項卡下拉菜單
18.8 動態(tài)選項卡
18.9 膠囊狀動態(tài)選項卡
19 Bootstrap4 導(dǎo)航欄 (重點(diǎn))
19.1 垂直導(dǎo)航欄
19.2 導(dǎo)航欄顏色設(shè)置
19.3 品牌/Logo
19.4 折疊導(dǎo)航欄
19.5 導(dǎo)航欄使用下拉菜單
19.6 導(dǎo)航欄的表單與按鈕
19.7 導(dǎo)航欄文本
19.8 固定導(dǎo)航欄
20 Bootstrap4 面包屑導(dǎo)航
21 Bootstrap4 表單
21.1 堆疊表單
21.2 內(nèi)聯(lián)表單
22 Bootstrap4 表單控件
22.1 input
22.2 textarea
22.3 checkbox
22.4 radio
22.5 select
23 Bootstrap4 輸入框組
24 Bootstrap4 自定義表單
24.1 自定義復(fù)選框
24.2 自定義單選框
24.3 自定義控件顯示在同一行
24.4 自定義選擇菜單
24.5 自定義滑塊控件
24.6 自定義文件上傳控件
25 Bootstrap4 輪播 (重點(diǎn))
25.1 如何創(chuàng)建輪播
25.2 輪播圖片上添加描述
26 Bootstrap4 模態(tài)框
27 Bootstrap4 提示框
28 Bootstrap4 彈出框
29 Bootstrap4 頁面滾動監(jiān)聽
30 Bootstrap4 小工具
30.1 邊框
30.2 邊框顏色
30.3 邊框圓角設(shè)置
30.4 浮動
30.5 響應(yīng)式浮動
30.6 居中對齊
30.7 寬度
30.8 高度
31 Bootstrap 4 Flex
31.1 彈性盒子(flexbox)模型
31.2 水平排列
31.3 垂直排列
31.4 垂直排列
31.5 兩端對齊
31.6 其他flex設(shè)置
32 Bootstrap 4 多媒體對象
33 Bootstrap4 實(shí)例