Bootstrap基礎(chǔ)教程

VI Bootstrap基礎(chǔ)教程 目錄 第一部分 Bootstrap 布局 1 Bootstrap 是什么 .............................. 2 1.1 Bootstrap 簡述 ............................ 21.2 如何使用 Bootstrap ..................... 3 1.3 包含內(nèi)容 ...................................... 4 1.4 簡單模板 ...................................... 5 1.5 簡單實(shí)例 ...................................... 6 2 網(wǎng)格系統(tǒng) ........................................... 9 2.1 實(shí)現(xiàn)原理 ...................................... 9 2.2 工作原理 ...................................... 9 2.3 基本用法 ..................................... 11 2.4 列偏移 .........................................12 2.5 列排序 .........................................13 2.6 列嵌套 .........................................15 3 排版 ................................................ 16 3.1 標(biāo)題 .............................................16 3.1.1 大標(biāo)題 ............................16 3.1.2 小標(biāo)題 ........................... 18 3.2 段落 ............................................ 19 3.3 mark 標(biāo)簽 ................................... 19 3.4 del 和 s 標(biāo)簽 ............................... 19 3.5 ins 和 u 標(biāo)簽 .............................. 20 3.6 strong 和 b 標(biāo)簽 ......................... 20 3.7 em 和 i 標(biāo)簽 ............................... 21 3.8 文本對齊方式 ............................ 21 3.9 字母大小寫 ................................ 22 3.10 abbr 標(biāo)簽的 title 屬性 .............. 23 3.11 引用樣式 .................................. 23 3.12 列表 .......................................... 23 3.12.1 有序列表和無序列表 ... 24 3.12.2 去點(diǎn)列表 ..................... 24 3.12.3 內(nèi)聯(lián)列表 ..................... 25 3.12.4 定義列表 ..................... 25 3.12.5 水平列表 ..................... 25 3.13 代碼 .......................................... 27 3.14 表格 .......................................... 28 目錄 VII 3.14.1 基礎(chǔ)表格 ......................28 3.14.2 斑馬線 ..........................29 3.14.3 表格邊框 ......................30 3.14.4 高亮行 ..........................31 3.14.5 緊湊型表格 ..................33 3.14.6 響應(yīng)式表格 ..................33 第二部分 Bootstrap 表單元素 4 表單 ................................................ 36 4.1 基礎(chǔ)表單 .....................................36 4.1.1 基本實(shí)例 ........................36 4.1.2 內(nèi)聯(lián)表單 ........................37 4.1.3 水平表單 ........................37 4.2 輸入框 .........................................39 4.3 下拉框 .........................................39 4.4 文本域 .........................................40 4.5 多選框和單選框 .........................41 4.6 表單焦點(diǎn) .....................................42 4.7 表單禁用 .....................................42 4.8 驗(yàn)證樣式 .....................................44 4.8.1 顏色提示 ........................44 4.8.2 圖標(biāo)提示 ........................45 4.8.3 文字提示 ........................46 4.9 元素大小 .....................................47 4.9.1 高度 ................................47 4.9.2 寬度 ................................49 4.10 按鈕 ...........................................49 4.10.1 基本按鈕 ......................49 4.10.2 多標(biāo)簽 ..........................50 4.10.3 按鈕風(fēng)格 ......................51 4.10.4 按鈕大小 ......................52 4.10.5 塊狀按鈕 ......................53 4.10.6 激活和禁用 ................. 53 4.11 圖片 .......................................... 54 4.12 圖標(biāo) .......................................... 56 4.13 輸入框組 .................................. 58 5 下拉菜單 ......................................... 62 5.1 基本用法 .................................... 62 5.2 基本原理 .................................... 63 5.3 分割線 ........................................ 64 5.4 菜單標(biāo)題 .................................... 64 5.5 對齊方式 .................................... 65 5.6 菜單狀態(tài) .................................... 68 6 按鈕組 ............................................ 70 6.1 基本按鈕組 ................................ 70 6.2 工具欄 ........................................ 71 6.3 按鈕組的大小 ............................ 74 6.4 嵌套分組 .................................... 76 6.5 垂直分組 .................................... 77 6.6 等分按鈕 .................................... 78 6.7 按鈕下拉菜單 ............................ 78 第三部分 Bootstrap 導(dǎo)航 7 導(dǎo)航 ................................................ 84 7.1 導(dǎo)航基礎(chǔ)樣式 ............................ 84 7.2 選項(xiàng)卡導(dǎo)航 ................................ 86 7.3 Pills 導(dǎo)航 ................................... 86 7.4 垂直導(dǎo)航 .................................... 87 7.5 導(dǎo)航狀態(tài) .................................... 88 7.6 自適應(yīng)導(dǎo)航 ................................ 88 7.7 導(dǎo)航二級菜單 ............................ 89 7.8 面包屑導(dǎo)航 ................................ 90 7.9 導(dǎo)航條 ........................................ 92 VIII Bootstrap 基礎(chǔ)教程 7.10 導(dǎo)航條的基本用法 ...................92 7.11 品牌圖標(biāo) ...................................93 7.12 導(dǎo)航條——表單 .......................94 7.13 導(dǎo)航條——按鈕 .......................96 7.14 導(dǎo)航條——文本和鏈接 ...........97 7.15 導(dǎo)航條中的二級菜單 ...............98 7.16 固定導(dǎo)航條 ...............................99 7.17 響應(yīng)式導(dǎo)航條 ......................... 101 7.18 反色導(dǎo)航條 ............................. 103 7.19 分頁導(dǎo)航 ................................. 104 7.20 標(biāo)簽和徽章 ............................. 107 第四部分 Bootstrap 內(nèi)置組件 8 內(nèi)置組件 ....................................... 112 8.1 面板 ........................................... 112 8.1.1 基礎(chǔ)應(yīng)用 ...................... 113 8.1.2 面板的標(biāo)題和腳注 ...... 114 8.1.3 基礎(chǔ)樣式 ...................... 114 8.1.4 嵌套表格 ...................... 116 8.1.5 嵌套列表 ...................... 118 8.2 縮略圖 ....................................... 119 8.3 巨幕 ........................................... 122 8.4 頁頭 ........................................... 123 8.5 提示框 ....................................... 124 8.6 進(jìn)度條 ....................................... 127 8.6.1 基礎(chǔ)進(jìn)度條 .................. 127 8.6.2 顯示進(jìn)度 ...................... 127 8.6.3 彩色進(jìn)度條 .................. 129 8.6.4 條紋進(jìn)度條 .................. 130 8.6.5 堆疊效果 ...................... 131 8.7 媒體對象 ................................... 132 8.7.1 基本構(gòu)成 ...................... 132 8.7.2 對齊方式 ..................... 133 8.7.3 嵌套對象 ..................... 134 8.7.4 媒體列表組 ................. 135 8.8 列表組 ...................................... 136 8.8.1 基礎(chǔ)列表組 ................. 136 8.8.2 帶徽章的列表組 ......... 137 8.8.3 鏈接列表組 ................. 138 8.8.4 其他元素的支持 ......... 139 8.8.5 狀態(tài)設(shè)置 ..................... 141 8.8.6 列表組主題 ................. 143 第五部分 Bootstrap 對 JavaScript 的支持 9 JavaScript 支持 ............................ 146 9.1 插件庫說明 .............................. 146 9.2 編程方式 .................................. 147 9.2.1 data-*屬性 ................... 147 9.2.2 編程方式 API .............. 149 9.2.3 命名空間沖突 ............. 149 9.2.4 事件 ............................. 149 9.2.5 版本 ............................. 150 9.3 過渡效果 .................................. 150 9.4 對話框 ...................................... 152 9.4.1 對話框結(jié)構(gòu) ................. 152