Bootstrap基礎教程

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