Bootstrap實戰(zhàn)從入門到精通目錄

時間：2023-07-10 13:15:01 | 來源：營銷百科

時間：2023-07-10 13:15:01 來源：營銷百科

Bootstrap實戰(zhàn)從入門到精通目錄：第 1章 初識 Bootstrap

1.1Bootstrap 概述

1.1.1Bootstrap 發(fā)展歷史

1.1.2Bootstrap 的版本

1.1.3瀏覽器支持

1.2Bootstrap 特性

1.2.1Bootstrap 的構(gòu)成

1.2.2Bootstrap 的特色

1.2.3Bootstrap 的功能

1.3Bootstrap 應(yīng)用瀏覽

1.3.1Bootstrap 網(wǎng)站

1.3.2Bootstrap 插件

1.4Bootstrap 開發(fā)工具和資源

1.4.1Bootstrap 開發(fā)工具

1.4.2Bootstrap 資訊

第 2章 使用 Bootstrap

2.1下載和定制 Bootstrap

2.1.1下載 Bootstrap

2.1.2定制 Bootstrap

2.2認識 Bootstrap 結(jié)構(gòu)

2.2.1源碼版 Bootstrap文件結(jié)構(gòu)

2.2.2編譯版 Bootstrap文件結(jié)構(gòu)

2.3安裝 Bootstrap

2.3.1 本地安裝

2.3.2在線安裝

2.4案例實戰(zhàn)

2.4.1設(shè)計按鈕

2.4.2設(shè)計 Tabs組件

2.4.3設(shè)計企業(yè)首頁

第 3章Bootstrap基本架構(gòu)

3.1響應(yīng)式設(shè)計

3.1.1認識響應(yīng)式設(shè)計

3.1.2響應(yīng)式設(shè)計流程

3.1.3設(shè)計響應(yīng)式圖片

3.1.4設(shè)計響應(yīng)式布局結(jié)構(gòu)

3.1.5自適應(yīng)顯示頁面

3.1.6設(shè)計響應(yīng)式網(wǎng)站

3.2使用 Bootstrap 柵格系統(tǒng)

3.2.1網(wǎng)頁柵格系統(tǒng)設(shè)計基礎(chǔ)

3.2.2認識 Bootstrap 柵格系統(tǒng)

3.2.3Bootstrap 響應(yīng)設(shè)備類型

3.2.4Bootstrap 設(shè)備優(yōu)先化柵格

3.2.5Bootstrap固定柵格和流式柵格

3.2.6Bootstrap柵格堆疊和水平排列

3.2.7列偏移

3.2.8列嵌套

3.2.9列排序

第 4章CSS 通用樣式

4.1版式

4.1.1標題

4.1.2文本

4.1.3強調(diào)

4.1.4對齊

4.1.5縮略語

4.1.6地址

4.1.7引用

4.1.8列表

4.1.9代碼

4.2表格

4.2.1優(yōu)化結(jié)構(gòu)

4.2.2默認風(fēng)格

4.2.3個性風(fēng)格

4.2.4表格行風(fēng)格

4.2.5響應(yīng)式表格

4.3表單

4.3.1可支持表單控件

4.3.2默認風(fēng)格

4.3.3布局風(fēng)格

4.3.4外觀風(fēng)格

4.3.5狀態(tài)風(fēng)格

4.4按鈕

4.4.1默認風(fēng)格

4.4.2定制風(fēng)格

4.4.3狀態(tài)風(fēng)格

4.5圖片

4.6工具類

4.6.1小工具類

4.6.2響應(yīng)式工具

第 5章CSS 組件（上）

5.1正確使用 CSS組件

5.2下拉菜單

5.2.1定義下拉菜單

5.2.2設(shè)置下拉菜單

5.3按鈕組

5.3.1定義按鈕組

5.3.2定義按鈕導(dǎo)航條

5.3.3設(shè)計按鈕布局和樣式

5.4按鈕式下拉菜單

5.4.1定義按鈕式下拉菜單

5.4.2設(shè)計分隔樣式

5.4.3設(shè)計向上彈出式菜單

5.5導(dǎo)航

5.5.1定義導(dǎo)航組件

5.5.2設(shè)置導(dǎo)航選項

5.5.3綁定導(dǎo)航和下拉菜單

5.5.4激活標簽頁

5.6導(dǎo)航條

5.6.1定義導(dǎo)航條

5.6.2綁定對象

5.6.3設(shè)計導(dǎo)航條

第 6章CSS 組件（下）

6.1面包屑和分頁

6.1.1定義面包屑

6.1.2定義分頁組件

6.1.3設(shè)置分頁選項

6.1.4定義翻頁組件

6.2標簽和徽章

6.3縮略圖

6.3.1認識圖像占位符

6.3.2定義縮略圖

6.4警告框

6.4.1定義警告框

6.4.2添加關(guān)閉按鈕

6.4.3添加鏈接

6.5進度條

6.5.1定義進度條

6.5.2設(shè)置個性進度條

6.6媒體

6.6.1媒體版式

6.6.2媒體列表

6.7版式

6.7.1大屏幕區(qū)塊

6.7.2頁面標題

6.7.3列表組

6.7.4面板

6.7.5Well

6.8輸入框

6.8.1修飾文本框

6.8.2設(shè)計尺寸

6.8.3按鈕文本框

6.8.4按鈕式下拉菜單

6.8.5定義分段按鈕下拉菜單

6.9字體圖標

第 7章JavaScript 插件（上）

7.1插件概述

7.1.1插件分類

7.1.2安裝插件

7.1.3調(diào)用插件

7.1.4共享插件

7.1.5事件

7.1.6過渡效果

7.2模態(tài)框

7.2.1定義模態(tài)框

7.2.2調(diào)用模態(tài)框

7.2.3控制模態(tài)框

7.2.4添加用戶行為

7.3下拉菜單

7.3.1調(diào)用下拉菜單

7.3.2添加用戶行為

7.4滾動監(jiān)聽

7.4.1定義滾動監(jiān)聽

7.4.2調(diào)用滾動監(jiān)聽

7.4.3添加用戶行為

7.5標簽頁

7.5.1定義標簽頁

7.5.2調(diào)用標簽頁

7.5.3添加用戶行為

7.6工具提示

7.6.1定義工具提示

7.6.2調(diào)用工具提示

7.6.3添加用戶行為

第 8章JavaScript 插件（下）

8.1彈出框

8.1.1定義彈出框

8.1.2調(diào)用彈出框

8.1.3添加用戶行為

8.2警告框

8.2.1定義警告框

8.2.2添加用戶行為

8.3按鈕

8.3.1定義按鈕

8.3.2設(shè)置狀態(tài)

8.4折疊

8.4.1定義折疊

8.4.2調(diào)用折疊

8.4.3添加用戶行為

8.5輪播

8.5.1定義輪播

8.5.2調(diào)用輪播

8.5.3添加用戶行為

8.6Affix

8.6.1定義 Affix

8.6.2調(diào)用 Affix

第 9章Bootstrap源碼解析

9.1CSS 組件設(shè)計原則

9.1.1類型

9.1.2模塊

9.1.3擴展

9.1.4設(shè)備優(yōu)先

9.1.5基于 HTML5

9.2全局樣式

9.2.1設(shè)計思路

9.2.2樣式重用

9.2.3CSS重設(shè)

9.3JavaScript 插件

9.3.1結(jié)構(gòu)分析

9.3.2公共類定義

9.3.3插件定義

9.3.4避免污染

9.3.5Data接口

9.4插件封裝

9.4.1基本套式

9.4.2嚴格模式

9.4.3this指針

第 10章 擴展組件

10.1組件擴展概述

10.1.1CSS覆蓋

10.1.2在線定制

10.1.3第三方生成器

10.1.4LESS定制

10.1.5模塊化修改

10.1.6擴展建議

10.2案例：擴展分頁組件

10.2.1自定義形狀

10.2.2自定義顏色

第 11章 開發(fā)插件

11.1jQuery插件概述

11.1.1jQuery 插件形式

11.1.2jQuery 插件規(guī)范

11.1.3封裝代碼

11.1.4定義參數(shù)

11.1.5擴展功能

11.1.6保護隱私

11.1.7避免破壞性

11.2案例實戰(zhàn)

11.2.1設(shè)計思路

11.2.2效果預(yù)覽

11.2.3配置參數(shù)

11.2.4代碼實現(xiàn)

第 12章 使用第三方插件

12.1Bsie

12.1.1使用Bsie 插件

12.1.2手動修補 Bsie

12.2BootStrap Metro

12.3Color Picker

12.3.1使用Color picker

12.3.2配置Color picker

12.4Date Picker

12.4.1使用Date picker

12.4.2配置Date picker

12.5jQuery UI Bootstrap

12.6Flat UI

第 13章 配置 Bootstrap樣式

13.1認識 LESS

13.1.1LESS概述

13.1.2LESS基本特性

13.1.3比較LESS和 SASS

13.1.4LESS參考和工具

13.2使用 LESS

13.3LESS基本語法

13.3.1變量

13.3.2樣式混合

13.3.3參數(shù)混合

13.3.4模式匹配

13.3.5條件表達式

13.3.6嵌套規(guī)則

13.3.7運算

13.3.8Color 函數(shù)

13.3.9Math函數(shù)

13.3.10作用域

13.3.11命名空間

13.3.12注釋

13.3.13導(dǎo)入

13.3.14字符串插值

13.3.15轉(zhuǎn)義字符

13.3.16JavaScript 表達式

13.4在 Bootstrap 3.0中使用 LESS

第 14章 案例開發(fā)：服裝品牌網(wǎng)站

14.1設(shè)計思路

14.1.1內(nèi)容

14.1.2結(jié)構(gòu)

14.1.3效果

14.2首頁設(shè)計

14.2.1編寫結(jié)構(gòu)

14.2.2設(shè)計樣式

14.2.3設(shè)計圖片焦點效果

14.2.4設(shè)計設(shè)備響應(yīng)樣式

14.3其他頁設(shè)計

14.3.1設(shè)計師展示

14.3.2聯(lián)系表單

14.3.3關(guān)于我們

14.3.4品牌展示

第 15章 案例開發(fā)：酒店預(yù)定微信 wap 網(wǎng)站

15.1設(shè)計思路

15.1.1內(nèi)容

15.1.2結(jié)構(gòu)

15.1.3效果

15.2設(shè)計首頁

15.3設(shè)計登錄頁

15.4選擇城市

15.5選擇酒店

15.6預(yù)定酒店

第 16章 案例開發(fā)：團隊營銷網(wǎng)站

16.1設(shè)計思路

16.1.1網(wǎng)站結(jié)構(gòu)

16.1.2設(shè)計效果

16.2準備工作

16.3設(shè)計導(dǎo)航條

16.4設(shè)計主體內(nèi)容

16.4.1歡迎界面

16.4.2服務(wù)項目

16.4.3文件夾

16.4.4關(guān)于我們

16.4.5團隊成員

16.4.6交互表單

第 17章 案例開發(fā)：個人攝影相冊

17.1設(shè)計思路

17.1.1網(wǎng)站結(jié)構(gòu)

17.1.2設(shè)計效果

17.2準備工作

17.3設(shè)計單視圖導(dǎo)航條

17.4設(shè)計主體內(nèi)容

17.4.1焦點視圖

17.4.2關(guān)于我們

17.4.3作品集

17.4.4聯(lián)系我們

第 18章 案例開發(fā)：單詞分享網(wǎng)站

18.1準備工作

18.1.1定制Bootstrap

18.1.2初始化 Bootstrap

18.2首頁設(shè)計

18.2.1設(shè)計思路

18.2.2設(shè)計結(jié)構(gòu)

18.2.3設(shè)計主菜單和按鈕

18.2.4設(shè)計輪播廣告位

18.2.5設(shè)計新聞區(qū)和版權(quán)區(qū)版式

18.3閱讀頁設(shè)計

18.3.1設(shè)計響應(yīng)式主菜單

18.3.2設(shè)計附加導(dǎo)航菜單

18.3.3設(shè)計頁面版式

18.4小組頁面設(shè)計

18.5打卡頁設(shè)計

18.5.1設(shè)計頁面網(wǎng)格系統(tǒng)

18.5.2設(shè)計滾動監(jiān)聽和附加導(dǎo)航

18.6詞根頁面設(shè)計

第 19章 案例開發(fā)：企業(yè)網(wǎng)站

19.1設(shè)計思路

19.1.1網(wǎng)站結(jié)構(gòu)

19.1.2設(shè)計效果

19.2準備工作

19.3設(shè)計頁頭

19.4設(shè)計實用導(dǎo)航

19.5設(shè)計響應(yīng)式布局

19.6設(shè)計腳注^[1]