Bootstrap是一個基于HTML5和CSS3的前端開發(fā)框架，它現(xiàn)成可用的HTML標記、CSS樣式、JavaScript插件，極大地提高了Web前端界面的開發(fā)效率。目前，它已成為了前端設計領域流行的輔助技術(shù)。 本書共分8章，圍繞Bootstrap 4框架的使用，講述了Bootstrap 4框架中各類排版元素，表單、表格、列表、圖片、導航等各類CSS組件和輪播、對話框、下拉菜單、滾動監(jiān)聽等JavaScript插件。前7章都有豐富的實例，第8章是一個綜合案例。此外，個賬實訓案例均配有微課視頻。
原Bootstrap暢銷書重磅升級，核心案例移植到Bootstrap4；
注重實踐應用，作者融多年教學經(jīng)驗和前端開發(fā)經(jīng)驗于一體；
每章配完整的案例，微課視頻、項目指導、教學PPT等資源輔助教學。
趙丙秀，副教授，現(xiàn)任職于武漢軟件工程職業(yè)學院信息學院軟件技術(shù)專業(yè)，先后獲得 “武漢優(yōu)秀青年教師”，武漢軟件工程職業(yè)學院“雙師素質(zhì)”教師、“優(yōu)秀中青年骨干教師”。出版過10多本計算機相關專業(yè)課程書籍，發(fā)表學術(shù)論文10多篇。
1 Bootstrap 是什么
1.1 Bootstrap 簡述
1.2 如何使用 Bootstrap
1.3 包含內(nèi)容
1.4 簡單模板
1.5 案例：簡單實例
2 網(wǎng)格系統(tǒng)
2.1 實現(xiàn)原理
2.2 工作原理
2.3 基本用法
2.4 列偏移
2.5 列排序
2.6 列嵌套
2.7 案例：招商銀行首頁
實訓項目---頁面布局
3 CSS布局
3.1 標題
3.1.1標題
3.1.2 小標題
3.1.3 display類
3.2 文本
3.2.1 lead類
3.2.2 mark 標簽
3.2.3 del 和 s 標簽
3.2.4 ins 和 u 標簽
3.2.5 strong 和 b 標簽
3.2.6 em 和 i 標簽
3.2.7 文本對齊方式
3.2.8 字母大小寫
3.2.9 縮略語
3.2.10 地址
3.1.11 引用
3.2 列表
3.2.1 有序列表和無序列表
3.2.2無樣式列表
3.2.3 內(nèi)聯(lián)列表
3.2.4描述列表
.
3. 3 代碼
3.4 圖片
3.4.1 圖片形狀
3.4.2響應式圖片
3.4.3 對齊圖片
3.4.4 圖文組合
3. 5 表格
3. 4.1 基礎表格
3. 4.2 條紋表格
3. 4.3帶邊框的表格
3. 4.4 高亮行
3. 4.5 緊湊型表格
3. 4.6 響應式表格
3.4.7 表格顏色
3.6 按鈕
3.5.1 基本按鈕
3.5.2 多標簽
3.5.3 按鈕風格
3.5.4 按鈕大小
3.5.5 塊狀按鈕
3.5.6 激活和禁用
3.8 案例—個人主頁
實訓項目--頁未模塊
4 工具類
4.1 顏色
4.2 邊框
4.3 flex布局
4.4 浮動類
4.4.1 浮動
4.4.2 清除浮動
4.5 關閉圖標
4.6 文本類
4.6.1 文本對齊
4.6.2 折行和溢出
4.6.3 單詞中斷
4.6.4 文本轉(zhuǎn)換
4.6.5 等寬字體
4.6.6 粗細斜體
4.6.7 顏色重置
4.6.8 去掉超鏈接下劃線
4.7 display屬性
4.7.1 基本使用
4.7.2 隱藏元素
4.7.3 print值
4.8 溢出
4.9 定位
4.10 尺寸
4.11 間隔
4.12 垂直對齊
4.13 可見性
4.14 案例---各類工具的使用
實訓項目--圖文模塊
5 表單
5.1 基礎表單
5.1.1 基本實例
5.1.2 內(nèi)聯(lián)表單
5.1.3 水平表單
5.2 表單控件
5.2.1 輸入框
5.2.2 下拉框
5.2.3 文本域
5.2.4 多選框和單選框
5.3 表單焦點
5.4 表單禁用
5.5 驗證樣式
4.5.1 顏色提示
4.5.2 圖標提示
4.5.3 文字提示
5.6 元素大小
4.6.1 高度
4.6.2 寬度
5.7 輸入框組
5.8 自定義表單
5.9 案例：一個表單頁面
實訓項目--表單部分
6 Css組件
6.1 下拉菜單
6.1.1 基本用法
6.1.2 基本原理
6.1.3 分割線
6.1.4 菜單標題
6.1.5 對齊方式
6.1.6 菜單狀態(tài)
6.3導航
6.3.1導航基礎樣式
6.3.2選項卡導航
6.3.3 Pills導航
6.3.4垂直導航
6.3.5導航狀態(tài)
6.3.6自適應導航
6.3.7導航二級菜單
6.3.8面包屑導航
6.4導航條
6.4.1 導航條的基本用法
6.4.2 品牌圖標
6.4.3導航條上的表單
6.4.4導航條上的按鈕
6.4.5導航條上的文本
6.4.6導航條上的鏈接
6.4.7導航條中的二級菜單
6.4.8固定導航條
6.4.9反色導航條
6.5分頁導航
6.6標簽和徽章
6.7 卡片
5.7.1 基本卡片
5.7.1面板的標題和腳注
5.7.1卡片里的元素
5.7.1圖片卡片
6.9提示框
6.10進度條
6.10.1基礎進度條
6.10.2顯示進度條
5.10.3彩色進度條
5.10.4堆疊效果
6.11列表組
6.11.1基礎列表組
6.11.2帶徽章的列表組
6.11.3鏈接列表組
6.11.4其他元素的支持
6.11.5狀態(tài)設置
6.11.6列表組主題
6.12媒體對象
6.12.1基本構(gòu)成
6.12.2對齊方式
6.12.3嵌套對象
6.12.4媒體列表組
6.13 巨幕
6.14 旋轉(zhuǎn)圖標
6.15 圖標
6.14 案例：制作一個簡單的公司主頁
實訓項目--導航條、頁頭等模塊
7 javascript插件
7.1插件庫說明
7.2對話框
7.2.1對話框的結(jié)構(gòu)
7.2.2對話框的特點
7.2.3彈出框觸發(fā)方式
7.2.4過度效果
7.2.5觸發(fā)參數(shù)data-*
7.2.6JavaScript觸發(fā)
7.3下拉菜單
7.3.1聲明式觸發(fā)
7.3.2JavaScript觸發(fā)
7.3.3事件
7.4滾動監(jiān)聽
7.4.1組件說明
7.4.2滾動監(jiān)聽實現(xiàn)步驟
7.4.3聲明式觸發(fā)
7.4.4JavaScript觸發(fā)
7.5 Tab選項卡
7.5.1選項卡的組成
7.5.2聲明式觸發(fā)
7.5.3JavaScript觸發(fā)
7.5.4Pills導航
7.5.5過渡效果
7.5.6事件
7.6Tip提示框
7.6.1結(jié)構(gòu)
7.6.2JavaScript觸發(fā)
7.6.3Data-*屬性
7.6.4事件
7.7Popover彈出框
7.7.1彈出框結(jié)構(gòu)
7.7.2聲明式屬性
7.7.3JavaScript觸發(fā)
7.7.4事件
7.8警告框
6.8.1 Alert結(jié)構(gòu)
6.8.2聲明式觸發(fā)
6.8.3JavaScript觸發(fā)
6.8.4事件
7.9 toast彈框
6.9.1 Alert結(jié)構(gòu)
6.9.2聲明式觸發(fā)
6.9.3JavaScript觸發(fā)
6.9.4事件
7.10折疊
6.10.1結(jié)構(gòu)
6.10.2聲明式觸發(fā)
6.10.3方法
6.10.4事件
7.11輪播圖
6.11.1輪播結(jié)構(gòu)
6.11.2聲明式觸發(fā)
6.11.3javaScript觸發(fā)
6.11.4事件
7.13綜合案例：一個公司主頁
實訓項目--輪播、模態(tài)框等模塊
8 企業(yè)網(wǎng)站
8.1 準備啟動文件
8.2 頁頭區(qū)
8.2.1 把Logo 放到導航條上方
8.2.2 調(diào)整導航條
8.3 添加實用導航
8.4 調(diào)整響應式導航
8.5 調(diào)整配色
8.6 調(diào)整折疊后的導航條配色
8.7 設計復雜的響應式布局
8.7.1 調(diào)整中、寬布局
8.7.2 調(diào)整標題、字體大小和按鈕
8.7.3 增大主欄
8.7.4 調(diào)整第三欄
8.7.5 針對多個視口進行微調(diào)
8.8 復雜的頁腳
8.8.1 準備標記
8.8.2 調(diào)整布局適應平板
8.8.3 針對性地清除
8.8.4 修整細節(jié)
附錄
書單推薦
