《Bootstrap從入門到項目實戰》是2019年9月清華大學出版社出版的圖書，作者是李愛玲。
基本介紹
- 書名：Bootstrap從入門到項目實戰
- 作者：李愛玲
- 出版社：清華大學出版社
- 出版時間：2019年09月
- 定價：78 元
- ISBN：9787302538998
內容簡介,圖書目錄,
內容簡介
《Bootstrap從入門到項目實戰》從零基礎開始講解，用實例引導讀者深入學習，深入淺出地講解了Bootstrap 4網頁設計的各項技術及實戰技能。
本書共18章，主要內容包括：開發框架Bootstrap 4簡介、使用新的架Bootstrap 4、快速掌握Bootstrap 4布局、Bootstrap 4的新布局—彈性盒子、核心工具庫—CSS通用樣式類、Bootstrap 4的新版式、認識CSS組件、深入掌握CSS組件、高級的CSS組件、Bootstrap 4的新增組件—旋轉器和卡片、快速認識JavaScript外掛程式、深入精通JavaScript外掛程式等。之後講解了6個行業熱點項目實訓，包括招聘網中的簡歷模板、仿星巴克網站、相冊類部落格項目、設計流行企業網站、Web設計與定製網站、開發神影視頻網站。
《Bootstrap從入門到項目實戰》適合任何想學習Bootstrap網頁設計的讀者，無論您是否從事相關行業，是否接觸過Bootstrap網頁設計，通過學習本書內容均可快速掌握Bootstrap網頁設計和開發動態網站的方法和技巧。
圖書目錄
第1章 開發框架Bootstrap 4簡介 001
1.1 Bootstrap概述 001
1.1.1 Bootstrap發展歷史 001
1.1.2 Bootstrap的優勢 002
1.1.3 Bootstrap 4介紹 003
1.1.4 Bootstrap 4瀏覽器支持 004
1.2 Bootstrap特性 005
1.2.1 Bootstrap 4的構成 005
1.2.2 Bootstrap的特色 007
1.3 Bootstrap套用瀏覽 007
1.3.1 Bootstrap網站 008
1.3.2 Bootstrap外掛程式 009
1.4 Bootstrap開發工具和資源 010
1.4.1 Bootstrap開發工具 010
1.4.2 Bootstrap資源 011
第2章 使用最新的框架Bootstrap 4 012
2.1 下載Bootstrap 012
2.2 Bootstrap 的結構 014
2.2.1 源碼版Bootstrap檔案結構 014
2.2.2 編譯版Bootstrap檔案結構 015
2.3 安裝 Bootstrap 016
2.3.1 本地安裝016
2.3.2 線上安裝017
2.4 案例實訓1—設計網頁按鈕 017
2.5 案例實訓2—設計網頁輪播組件 018
第3章 快速掌握Bootstrap 4布局 021
3.1 布局基礎021
3.1.1 布局容器021
3.1.2 回響斷點023
3.1.3 z-index 023
3.2 格線系統024
3.2.1 格線選項024
3.2.2 自動布局列025
3.2.3 回響類028
3.2.4 重排序031
3.2.5 列嵌套034
3.3 布局工具類 035
3.4 案例實訓1—仿QQ登錄界面 036
3.5 案例實訓2—開發電商網站特效 041
第4章 Bootstrap 4的新布局—彈性盒子 045
4.1 定義彈性盒子 045
4.2 排列方向047
4.2.1 水平方向排列047
4.2.2 垂直方向排列047
4.3 內容排列048
4.4 項目對齊050
4.5 自動對齊051
4.6 自動相等053
4.7 等寬變換053
4.8 自動浮動054
4.8.1 水平方向浮動054
4.8.2 垂直方向浮動055
4.9 彈性布局—包裹 056
4.10 排列順序057
4.11 對齊內容 057
第5 章 核心工具庫—CSS 通用樣式類 061
5.1 文本處理061
5.1.1 文本對齊061
5.1.2 文本換行063
5.1.3 文本轉換064
5.1.4 粗細和斜體065
5.1.5 其他一些文本類066
5.2 顏色 066
5.2.1 文本顏色066
5.2.2 連結文本顏色068
5.2.3 背景顏色069
5.3 框線 069
5.3.1 添加框線070
5.3.2 框線顏色071
5.3.3 圓角框線072
5.4 寬度和高度 074
5.4.1 相對於父元素074
5.4.2 相對於視口076
5.5 邊距 077
5.5.1 邊距的定義077
5.5.2 回響式邊距078
5.6 浮動 079
5.6.1 實現浮動079
5.6.2 回響式浮動080
5.7 display 屬性類 081
5.7.1 實現display 屬性 081
5.7.2 回響式的隱藏或顯示元素082
5.8 嵌入 083
5.9 內容溢出084
5.10 定位 085
5.11 陰影 086
5.12 關閉圖示087
第6 章 Bootstrap 4 的新版式 088
6.1 初始化與CSS 重置 088
6.2 排版 090
6.2.1 標題090
6.2.2 段落093
6.2.3 強調094
6.2.4 縮略語095
6.2.5 引用096
6.3 代碼 097
6.4 圖片 100
6.5 表格 102
6.5.1 表格默認風格103
6.5.2 設計個性化風格104
6.6 案例實訓— 設計後台人員管理頁面 108
第7 章 認識CSS 組件 111
7.1 正確使用CSS 組件 111
7.2 按鈕 114
7.2.1 定義按鈕114
7.2.2 設計按鈕風格114
7.3 按鈕組 117
7.3.1 定義按鈕組117
7.3.2 定義按鈕組工具列118
7.3.3 設計按鈕組布局和樣式119
7.4 下拉選單121
7.4.1 定義下拉選單121
7.4.2 設計下拉按鈕的樣式123
7.4.3 設計下拉選單的樣式124
7.5 導航 128
7.5.1 定義導航128
7.5.2 設計導航的布局129
7.5.3 設計導航的風格131
7.5.4 設計導航選項卡135
7.6 超大螢幕137
7.6.1 定義超大螢幕137
7.6.2 設計風格138
7.7 案例實訓—設計廣告牌 139
第8 章 深入掌握CSS 組件 141
8.1 徽章 141
8.1.1 定義徽章141
8.1.2 設定顏色143
8.1.3 橢圓形徽章143
8.1.4 連結徽章144
8.2 警告框 145
8.3 媒體對象148
8.3.1 媒體版式149
8.3.2 媒體嵌套149
8.3.3 對齊方式150
8.3.4 排列順序151
8.3.5 媒體列表152
8.4 進度條 153
8.4.1 定義進度條153
8.4.2 設計進度條樣式154
8.4.3 設計進度條風格156
8.5 導航欄 158
8.5.1 定義導航欄158
8.5.2 定位導航欄163
8.5.3 設計導航欄配色164
8.5.4 擴展導航欄內容165
8.6 案例實訓—設計動態進度條 167
第9 章 高級的CSS 組件 169
9.1 表單 169
9.1.1 定義表單控制項169
9.1.2 設計單選按鈕/ 複選框布局和樣式173
9.1.3 表單布局風格176
9.1.4 幫助文本180
9.1.5 禁用表單180
9.2 列表組 181
9.2.1 定義列表組181
9.2.2 設計列表組的風格樣式182
9.2.3 定製內容185
9.3 麵包屑 186
9.3.1 定義麵包屑186
9.3.2 設計分隔設定187
9.4 分頁 188
9.4.1 定義分頁188
9.4.2 使用圖示189
9.4.3 設計分頁風格190
第10 章 Bootstrap 4 的新增組件—旋轉器和卡片 194
10.1 旋轉器特效 194
10.1.1 定義旋轉器194
10.1.2 設計旋轉器風格195
10.1.3 對齊旋轉器196
10.1.4 按鈕旋轉器198
10.2 卡片 199
10.2.1 定義卡片199
10.2.2 卡片的內容類型200
10.2.3 控制卡片的寬度203
10.2.4 文本對齊方式205
10.2.5 添加導航206
10.2.6 圖像背景208
10.2.7 卡片風格208
10.2.8 卡片排版211
10.3 案例實訓1—仿雲巴網站 215
10.4 案例實訓2—動態進度條及百分比數字顯示 218
第11 章 快速認識JavaScript 外掛程式 223
11.1 外掛程式概述 223
11.1.1 外掛程式分類 223
11.1.2 安裝外掛程式 224
11.1.3 調用外掛程式 225
11.1.4 事件 226
11.2 按鈕 226
11.2.1 切換狀態 227
11.2.2 按鈕式複選框和單選框 227
11.3 警告框 230
11.3.1 關閉警告框 230
11.3.2 添加用戶行為 232
11.4 下拉選單 233
11.4.1 調用下拉選單 233
11.4.2 添加用戶行為 235
11.5 模態框 237
11.5.1 定義模態框 237
11.5.2 模態框布局和樣式 239
11.5.3 調用模態框 243
11.5.4 添加用戶行為 245
11.6 標籤頁 246
11.6.1 定義標籤頁 247
11.6.2 調用標籤頁 248
11.6.3 添加用戶行為 249
11.7 案例實訓1—仿淘寶搶紅包 251
11.8 案例實訓2—仿京東商品推薦區 252
第12 章 深入精通JavaScript 外掛程式 257
12.1 摺疊 257
12.1.1 定義摺疊257
12.1.2 控制多目標258
12.1.3 設計手風琴效果259
12.1.4 調用摺疊261
12.1.5 添加用戶行為261
12.2 工具提示263
12.2.1 定義工具提示263
12.2.2 工具提示方向264
12.2.3 調用工具提示266
12.2.4 添加用戶行為267
12.3 彈窗 269
12.3.1 定義彈窗269
12.3.2 彈窗方向271
12.3.3 調用彈窗271
12.3.4 添加用戶行為273
12.4 輪播 275
12.4.1 定義輪播275
12.4.2 設計輪播風格278
12.4.3 調用輪播279
12.4.4 添加用戶行為282
12.5 滾動監聽283
12.5.1 定義滾動監聽283
12.5.2 調用滾動監聽289
12.5.3 添加用戶行為290
12.6 實戰實訓1—設計摺疊搜尋框 291
12.7 實戰實訓2—仿小米內容展示 293
第13 章 項目實訓1—招聘網中的簡歷模板 295
13.1 案例概述295
13.1.1 案例結構295
13.1.2 設計效果296
13.1.3 設計準備298
13.2 設計布局298
13.3 設計左側信息欄 299
13.4 設計導航條 300
13.5 設計主頁301
13.5.1 工作經歷301
13.5.2 專業技能302
13.5.3 教育經歷303
13.5.4 綜合概述304
13.6 設計聯繫頁 306
13.7 設計相冊頁 306
第14 章 項目實訓2—仿星巴克網站 308
14.1 網站概述308
14.1.1 網站結構308
14.1.2 設計效果308
14.1.3 設計準備310
14.2 設計首頁布局 310
14.3 設計可切換導航 311
14.4 主體內容317
14.4.1 設計輪播廣告區317
14.4.2 設計產品推薦區319
14.4.3 設計登錄註冊區和Logo 319
14.4.4 設計特色展示區320
14.4.5 設計產品生產流程區321
14.5 設計底部隱藏導航 324
第15 章 項目實訓3—相冊類部落格項目 326
15.1 案例概述326
15.1.1 案例結構326
15.1.2 設計效果327
15.1.3 設計準備328
15.2 設計導航欄 329
15.3 首頁 330
15.3.1 設計相冊展示330
15.3.2 添加Swipebox 燈箱外掛程式333
15.4 分類頁 337
15.4.1 設計相冊分類展示337
15.4.2 添加Swipebox 燈箱外掛程式340
15.5 部落格 341
15.6 聯繫頁 343
15.6.1 設計布局343
15.6.2 添加工具提示345
第16 章 項目實訓4—設計流行企業網站 347
16.1 網站概述347
16.2 設計主頁349
16.3 設計側邊導航欄 360
16.4 設計登錄頁 362
第17 章 項目實訓5—Web 設計與定製網站 365
17.1 網站概述365
17.1.1 網站結構365
17.1.2 網站布局365
17.1.3 設計準備366
17.2 設計主頁面導航 366
17.3 設計主頁面內容 369
17.3.1 設計首頁369
17.3.2 “關於我們”頁面設計370
17.3.3 “我們的團隊”頁面設計372
17.3.4 “我們的服務”頁面設計375
17.3.5 “我們的部落格”頁面設計376
17.3.6 “我們的定製”頁面設計377
17.4 設計腳註379
第18 章 項目實訓6—開發神影視頻網站 380
18.1 網站概述380
18.2 設計主頁面 382
18.2.1 設計頭部內容382
18.2.2 設計輪播384
18.2.3 設計分類列表384
18.2.4 設計“視頻內容”頁面386
18.2.5 設計腳註391
