編輯推薦
適讀人群 :初級前端開發工程師,有一定經驗的專業前端開發工程師 你是否使用過智能手機瀏覽真正的網頁?你是否因為自己作為後端程序員而不能開發齣較漂亮的頁麵?你是否開發過能夠同時適應不同分辨率的屏幕的頁麵?
如果你齣現過上述問題並想解決這些問題,那麼你可以閱讀本書來瞭解相關的解決方案。
全書源代碼免費下載:www.broadview.com.cn/27974
內容簡介
Bootstrap 是一個基於HTML 5 和CSS 3 的前端開發框架,它提供瞭較為豐富的Web 組件,能夠快速製作一個漂亮的Web 頁麵。
《Bootstrap 基礎教程》主要圍繞Bootstrap 框架,講述瞭Bootstrap 布局、Bootstrap 錶單元素、Bootstrap 導航、Bootstrap內置組件、Bootstrap 對JavaScript 的支持,以及HTML 5 和CSS 3 的一些基礎知識等。《Bootstrap 基礎教程》是為從未接觸過Bootstrap 但又想瞭解學習Bootstrap 技術的讀者而編寫的,適閤以下人群閱讀:
熟悉JSP、PHP、ASP.NET 等後端Web 技術的開發人員;
對HTML 和CSS 有一定瞭解的UI 設計師;
對移動Web 開發有濃厚興趣的開發者;
有一定JavaScript(jQuery)開發經驗的前端開發人員。
作者簡介
賀臣,軟件開發工程師,現就職於上海某知名地産企業,曾閤夥創辦一傢軟件服務公司,對生産製造、物流倉庫等領域頗有見解;在ASP.NET、jQuery、BootStrapAngularjs、SQL Server、軟件架構等技術領域也多有涉及,業餘喜歡戶外登山,整理技術相關的博客。
目錄
第一部分 Bootstrap 布局 1 Bootstrap 是什麼 2 1.1 Bootstrap 簡述 21.2 如何使用 Bootstrap 3 1.3 包含內容 4 1.4 簡單模闆 5 1.5 簡單實例 6 2 網格係統 9 2.1 實現原理 9 2.2 工作原理 9 2.3 基本用法 11 2.4 列偏移 12 2.5 列排序 13 2.6 列嵌套 15 3 排版 163.1 標題 163.1.1 大標題 16 3.1.2 小標題 18 3.2 段落 193.3 mark 標簽 193.4 del 和 s 標簽 193.5 ins 和 u 標簽 20 3.6 strong 和 b 標簽 20 3.7 em 和 i 標簽 213.8 文本對齊方式 213.9 字母大小寫 22 3.10 abbr 標簽的 title 屬性 23 3.11 引用樣式 23 3.12 列錶 23 3.12.1 有序列錶和無序列錶 24 3.12.2 去點列錶 24 3.12.3 內聯列錶 253.12.4 定義列錶 253.12.5 水平列錶 25 3.13 代碼 273.14 錶格 28 目錄 VII 3.14.1 基礎錶格 283.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 基本實例 364.1.2 內聯錶單 37 4.1.3 水平錶單 37 4.2 輸入框 394.3 下拉框 394.4 文本域 404.5 多選框和單選框 41 4.6 錶單焦點 42 4.7 錶單禁用 42 4.8 驗證樣式 44 4.8.1 顔色提示 444.8.2 圖標提示 45 4.8.3 文字提示 46 4.9 元素大小 47 4.9.1 高度 47 4.9.2 寬度 49 4.10 按鈕 494.10.1 基本按鈕 494.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 下拉菜單 625.1 基本用法 625.2 基本原理 635.3 分割綫 645.4 菜單標題 64 5.5 對齊方式 65 5.6 菜單狀態 68 6 按鈕組 706.1 基本按鈕組 70 6.2 工具欄 71 6.3 按鈕組的大小 74 6.4 嵌套分組 76 6.5 垂直分組 77 6.6 等分按鈕 78 6.7 按鈕下拉菜單 78 第三部分 Bootstrap 導航 7 導航 847.1 導航基礎樣式 84 7.2 選項卡導航 86 7.3 Pills 導航 86 7.4 垂直導航 87 7.5 導航狀態 88 7.6 自適應導航 88 7.7 導航二級菜單 89 7.8 麵包屑導航 90 7.9 導航條 92 VIII Bootstrap 基礎教程 7.10 導航條的基本用法 927.11 品牌圖標 93 7.12 導航條――錶單 947.13 導航條――按鈕 967.14 導航條――文本和鏈接 977.15 導航條中的二級菜單 98 7.16 固定導航條 997.17 響應式導航條 1017.18 反色導航條 1037.19 分頁導航 1047.20 標簽和徽章 107 第四部分 Bootstrap 內置組件 8 內置組件 1128.1 麵闆 1128.1.1 基礎應用 113 8.1.2 麵闆的標題和腳注 1148.1.3 基礎樣式 114 8.1.4 嵌套錶格 1168.1.5 嵌套列錶 118 8.2 縮略圖 1198.3 巨幕 1228.4 頁頭 1238.5 提示框 124 8.6 進度條 127 8.6.1 基礎進度條 127 8.6.2 顯示進度 1278.6.3 彩色進度條 1298.6.4 條紋進度條 1308.6.5 堆疊效果 1318.7 媒體對象 132 8.7.1 基本構成 132 8.7.2 對齊方式 133 8.7.3 嵌套對象 134 8.7.4 媒體列錶組 1358.8 列錶組 136 8.8.1 基礎列錶組 136 8.8.2 帶徽章的列錶組 137 8.8.3 鏈接列錶組 1388.8.4 其他元素的支持 1398.8.5 狀態設置 1418.8.6 列錶組主題 143 第五部分 Bootstrap 對 JavaScript 的支持 9 JavaScript 支持 1469.1 插件庫說明 1469.2 編程方式 1479.2.1 data-*屬性 147 9.2.2 編程方式 API 149 9.2.3 命名空間衝突 1499.2.4 事件 1499.2.5 版本 1509.3 過渡效果 150 9.4 對話框 1529.4.1 對話框結構 152 9.4.2 對話框的特點 153 9.4.3 彈齣框觸發方式 156 9.4.4 過渡效果 1589.4.5 觸發參數 data-* 1599.4.6 JavaScript觸發―― 參數 161 9.4.7 JavaScript觸發―― 方法 163 目錄 IX 9.4.8 JavaScript觸發―― 事件 165 9.5 下拉菜單 167 9.5.1 聲明式觸發 167 9.5.2 JavaScript 觸發 1689.5.3 事件 1699.6 監聽滾動 171 9.6.1 組件說明 171 9.6.2 滾動監聽實現步驟 1719.6.3 聲明式觸發 1739.6.4 JavaScript 觸發 1759.7 Tab 選項卡 176 9.7.1 選項卡的組成 1779.7.2 聲明式觸發 1789.7.3 JavaScript 觸發 1809.7.4 Pills 導航 181 9.7.5 過渡效果 181 9.7.6 事件 1829.8 Tip 提示 1849.8.1 結構 185 9.8.2 JavaScript 觸發 185 9.8.3 data-*屬性 187 9.8.4 JavaScript 觸發參數 188 9.8.5 事件 189 9.9 提示框 1909.9.1 alert 結構 190 9.9.2 聲明式觸發 191 9.9.3 JavaScript 觸發 192 9.9.4 事件 193 9.10 Popover 彈齣框 1939.10.1 彈齣框結構 194 9.10.2 聲明式屬性 194 9.10.3 JavaScript 方式觸發 195 9.10.4 事件 197 9.11 按鈕 1989.11.1 按鈕加載狀態 1989.11.2 單選按鈕 1999.11.3 多選按鈕 2009.11.4 方法 2019.12 摺疊/手風琴 Collapse 203 9.12.1 結構 204 9.12.2 聲明式觸發 2059.12.3 方法 207 9.12.4 事件 2089.13 輪播圖 209 9.13.1 輪播圖構成 210 9.13.2 聲明式觸發 213 9.13.3 JavaScript 觸發 2159.13.4 事件 2169.14 Affix 插件 2169.14.1 聲明屬性 217 9.14.2 JavaScript 方法 2179.14.3 事件 220 第六部分 HTML和CSS 3的相關知識 10 HTML 元素 22210.1 錶單屬性 222 10.2 Input 類型 223 10.3 HTML 5 新標簽 22610.3.1 role 屬性 22610.3.2 header 標簽 226 10.3.3 footer 標簽 227 10.3.4 nav 標簽 22710.3.5 article 標簽 228 10.3.6 section 標簽 228 X Bootstrap基礎教程 11 CSS 3 樣式 230 11.1 選擇器 230 11.1.1 完全匹配屬性選擇器 231 11.1.2 包含匹配選擇器 231 11.1.3 首字符匹配選擇器 23111.1.4 末字符匹配選擇器 23111.2 僞類選擇器 23211.3 陰影 232 11.4 背景 233 11.5 圓角邊框 23511.6 響應式設計 235 11.6.1 什麼是響應式設計 235 11.6.2 響應式設計優缺點 236 11.6.3 Viewport 窗口 23611.6.4 Media Queries 語法 236 12 案例 240 12.1 默認樣式的不足 240 12.2 日曆控件的使用 24212.3 頁麵顯示代碼內容 243 12.4 錶格插件 24412.5 圖錶插件 246附錄 A Bootstrap 4.0 以及其他 249 A.1 重大更新 249 A.2 重要鏈接地址 250
前言/序言
你是否使用過智能手機瀏覽真正的網頁?
你是否因為自己作為後端程序員而不能開發齣較漂亮的頁麵?
你是否開發過能夠同時適應不同分辨率的屏幕的頁麵?
如果你齣現過上述問題並想解決這些問題,那麼你可以閱讀本書來瞭解相關的解決方案。
Bootstrap 討論
現今,移動互聯網已經成為熱門話題之一。近年來HTML 5 發展迅猛,各大瀏覽器都開始紛紛支持HTML 5 的標準規範。手機端的瀏覽器對HTML 5 以及CSS 3 有瞭很好的支持,使得HTML 5 強大的特性在手機端也得到瞭很好的應用。
Bootstrap 就是一個基於HTML 5 和CSS 3 的前端開發框架, 它提供瞭較為豐富的Web組件,能夠快速製作一個漂亮的Web 頁麵,同時,在最新版本的Bootstrap 中提倡瞭以移動優先的響應式布局設計,我們需要編寫齣能適應不同分辨率的PC 端瀏覽器以及移動手機端瀏覽器的代碼。也正是如此,纔有越來越多的開發者加入Bootstrap 框架的開發行列中來。
為什麼寫這本書
2015 年絕對是移動開發火熱的一年,層齣不窮的前端開發框架的齣現給開發者提供瞭很多的便利。iPhone、Android 等智能設備的快速增長,適應更多設備的響應式布局開發也成為瞭開發的熱點之一。Bootstrap 恰恰能夠很好地解決相應的問題,這讓我不得不喜歡上Bootstrap 這個優秀的前端框架。
作為後端程序開發齣身的我,有必要記錄下Bootstrap 學習的過程,並且分享給想學習Bootstrap 的同仁。
基於以上原因,我將自己的學習思路以及過程整理成瞭本書書稿,希望能給初學者帶來一定的指導方嚮,使讀者瞭解Bootstrap,並且能夠去使用它。
關於本書
本書主要圍繞Bootstrap 框架,講述如何利用Bootstrap 製作齣漂亮的前端頁麵。本書主要分為以幾部分。
第一部分主要講解瞭Bootstrap 中的布局,Bootstrap 中提供瞭網格係統用於頁麵的基本布局,同時我們也可以利用HTML 元素特性結閤CSS 來布局,Bootstrap 對這些元素的默認樣式做瞭一定程度的修改。
第二部分主要講解瞭Bootstrap 中的錶單元素,Bootstrap 在錶單上做瞭較大的處理,對錶單輸入元素以及排版上都有一定的
Bootstrap 基礎教程 下載 mobi epub pdf txt 電子書