Bootstrap基礎教程

Bootstrap是一個基於HTML5和CSS3的前端開發框架，它現成可用的HTML標記、CSS樣式、JavaScript插件，極大地提高了Web前端界面的開發效率。目前，它已成為了前端設計領域流行的輔助技術。 本書共分8章，圍繞Bootstrap 4框架的使用，講述了Bootstrap 4框架中各類排版元素，表單、表格、列表、圖片、導航等各類CSS組件和輪播、對話框、下拉菜單、滾動監聽等JavaScript插件。前7章都有豐富的實例，第8章是一個綜合案例。此外，個賬實訓案例均配有微課視頻。

趙丙秀，副教授，職業實踐於武漢軟件工程信息學院軟件技術專業，獲得“武漢優秀青年教師”，武漢軟件軟件學院“雙師素質”教師、“優秀青年骨幹干教師”。出版過10 多本計算機相關專業課本，發表學術論文10多篇。

1 Bootstrap 是什麼
1．1 Bootstrap 簡述
1．2 如何使用Bootstrap
1．3 包含內容
1．4 簡單模板
1．5 案例：簡單實例
2 網格系統
2．1 實現原理
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 顯示類
3．2 文本
3．2．1 鉛類
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 內聯列表
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 文本轉換
4．6．5 等寬字體
4．6．6粗細斜體
4．6．7 顏色幽
4．6．8去掉超鏈接下劃線
4．7 顯示屬性
4．7．1 基本使用
4．7．2 隱藏元素
4．7．3 打印值
4．8 度
4．9 定位
4．10 尺寸
4．11 間隔
4．12 靜態氣球
4．13 可見性
4．14案例---各類工具的使用
實訓項目--圖文模塊
5 表單
5．1 基礎表單
5．1．1 基本實例
5．1．2 內聯表單
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 菜單狀態
6．3導航
6．3．1導航基礎樣式
6．3．2選項卡導航
6．3．3 丸導航
6．3．4 垂直導航
6．3．5導航狀態
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狀態設置
6．11．6列表組主題
6．12媒體對象
6．12．1基本構成
6．12．2原子方式
6．12．3 嵌套對象
6．12．4媒體列表組
6．13 巨幕
6．14 旋轉圖標
6．15 圖標
6．14 /案例：製作一個簡單的公司主頁
實訓項目--導航條、頁頭等模塊

7 javascript插件
7．1插件庫說明
7．雙2
7．2．1雙的結構
7．2．2 雙重的特點
7．2．3 彈出框觸發方式
7．2．4催有效
7．2．5觸發參數data-*
7．2．6JavaScript觸發
7．3下拉菜單
7．3．1聲明式觸發
7．3．2JavaScript觸發
7．3．3事件
7．4滾動監聽
7．4．1組件說明
7．4．2滾動監聽實現步驟
7．4．3聲明式觸發
7．4．4JavaScript觸發
7．5 選項卡選項卡
7．5．1選項卡的組成
7．5．2聲明式觸發
7．5．3JavaScript觸發
7．5．4丸導航
7．5．5漸變效果
7．5．6事件
7．6提示提示框
7．6．1結構
7．6．2JavaScript觸發
7．6．3Data-*屬性
7．6．4事件
7．7Popover彈出框
7．7．1彈出框結構
7．7．2聲明式屬性
7．7．3JavaScript觸發
7．7．4事件
7．8警告框
6．8．1 警報結構
6．8．2聲明式觸發
6．8．3JavaScript觸發
6．8．4事件
7．9 吐司彈框
6．9．1 警報結構
6．9．2聲明式觸發
6．9．3JavaScript觸發
6．9．4事件
7．10 折疊
6．10．1結構
6．10．2聲明式觸發
6．10．3方法
6．10．4事件
7．11輪播圖
6．11．1輪播結構
6．11．2聲明式觸發
6．11．3javaScript觸發
6．11．4事件
7．13綜合案例：一個公司主頁
實訓項目--輪播、模態框等模塊

8 企業網站
8．1 準備啟動文件
8．2 頁頭區
8．2．1 把Logo攜導航條啟動
8．2．2 調整導航條
8．3 添加實用導航
8．4 調整響應式導航
8．5 調整路線
8．6 調整折疊後的導航條路線
8．7 設計複雜的響應式佈局
8．7．1 調整中、寬佈局
8．7．2 調整標題、字體大小和按鈕
8．7．3 驢主欄
8．7．4 調整第三欄
8．7．5針對多個視口進行微調
8．8 複雜的頁腳
8．8．1 準備標記
8．8．2 調整佈局新客艙
8．8．3 荒地清除
8．8．4 修整細節
附錄