玩轉Bootstrap（基礎）

課程簡介

本Bootstrap教程能夠讓您了解到，Bootstrap框架是一個非常受歡迎的前端開發框架，他能讓後端程式設計師和不懂設計的前端人員製作出優美的Web頁面或Web應用程式。在這個Bootstrap教程中，將帶領大家了解Bootstrap框架以及如何盼和使用Bootstrap框架，通過本教程學習能夠獨立定製出適合自己的Bootstrap。

課程大綱

第1章Bootstrap簡介

本章主要介紹了Bootstrap框架的歷史、要怎么獲取Bootstrap以及Bootstrap的檔案結構等。

1-1Bootstrap簡介(02:01)

1-2Bootstrap到底精蘭奔是什麼？

1-3如何開始使用Bootstrap(05:14)

1-4基本的HTML模板

1-5全局樣式

第2章排版

Bootstrap通過覆寫元素的默認樣式，實現對頁面排版的最佳化，讓頁面在用戶面前呈現的更佳完美。

2-1標題（一）

2-2標題（二）

2-3段落（正文文本）

2-4強調內容

2-5粗體

2-6斜體

2-7強調相關的類

2-8文本對齊風格

2-9列表--簡介

2-10列表--無序列表、有序列表

2-11列表--去點列表

2-12列表--內聯列表

2-13列表--定義列表

2-14列表--水平定義列表

2-15代碼（一）

2-16代碼（二）

2-17表格

2-18表格--表格行的類

2-19表格--基礎表格

2-20表格--斑馬線表格

2-21表格--帶框線的表格

2-22表格--滑鼠懸浮高亮的表格

2-23表格--緊湊型表格

2-24表格--回響式表格

第3章表單

本章介紹Bootstrap框架再她挨核心部熱道犁分之一：表單，通過本章節的學習，可以輕鬆的使用Bootstrap框架製作出適合自己需求的表單。

3-1基礎表單

3-2水平表單

3-3內妹閥檔聯表單

3-4表單控制項(輸入框input)

3-5表單控制項(下拉選擇框select)

3-6表單控制項(文本域textarea)

3-7表單控制項(複選框checkbox和單選擇按鈕radio)

3-8表單控制項(複選框和單選按鈕水平排陵求旬府列)

3-9表單控制項(按鈕)

3-10表單控制項大小

3-11表單控制項狀態(焦點狀態)

3-12表單控制項狀態(禁用狀態)

3-13表單控制項狀態(驗證狀態)

3-14表單提示信息

3-15按鈕

3-16基本按鈕

3-17默認按鈕

3-18多標籤支持

3-19定製風格

3-20按鈕大小

3-21塊狀按鈕

3-22按鈕狀態——活動狀態

3-23按鈕狀態——禁用狀態

3-24圖像

3-25圖示（一）

3-26圖示（二）

第4章格線系統

本章介紹Bootstrap框架的格線系統，通過本章的學習，可以使用格線系統完美的實現Web的布局。

4-1實現原理

4-2工作原理

4-3基本用法

4-4列偏移

4-5列排序

4-6列的嵌套

第5章選單、按鈕及導航

選單（導航選單）是一個Web網站或者Web應用程式必不可少的一個組件。在Bootstrap框架中也提供了這樣的組件。在這一節中，我催您堡凶們主要和大家探討下拉選單組件的使用。

5-1下拉選單（基本用法）

5-2下拉選單（原理分析）

5-3下拉選單（下拉分隔線）

5-4下拉選單（選單標題）

5-5下拉選單（對齊方式）

5-6下拉選單（選單項狀態）

5-7按鈕（按鈕組）

5-8按鈕（按鈕工具列）

5-9按鈕（嵌套分組）

5-10按鈕（垂直分組）

5-11按鈕（等分按鈕）

5-12按鈕下拉選單

5-13按鈕的向下向上三角形

5-14向上彈起的下拉選單

5-15導航（基礎樣式）

5-16導航（標籤形tab導航）

5-17導航（膠囊形(pills)導航）

5-18導航（垂直堆疊的導航）

5-19自適應導航（使用）

5-20自適應導航（實現原理）

5-21導航加下拉選單（二級導航）

5-22麵包屑式導航

第6章導航條、分頁導航

導航條和上一章介紹的導航，就相差一個字，多了一個“條”字。其實在Bootstrap框架中他們還是明顯的區別。在導航條中有一個背景色、而且導航條可以是純連結（類似導航），也可以是表單，還有就是表單和導航一起結合等多種形式。

6-1導航條基礎

6-2基礎導航條

6-3為導航條添加標題、二級選單及狀態

6-4帶表單的導航條

6-5導航條中的按鈕、文本和連結

6-6固定導航條

6-7回響式導航條

6-8反色導航條

6-9分頁導航（帶頁碼的分頁導航）

6-10分頁導航（翻頁分頁導航）

6-11標籤

6-12徽章

第7章其它內置組件

在網頁製作中還有許多有用的小組件，如列表框、縮略圖等，這一章就將給大家尾尾道來。

7-1縮略圖（一）

7-2縮略圖（二）

7-3警示框

7-4警示框--默認警示框

7-5警示框--可關閉的警示框

7-6警示框--警示框的連結

7-7進度條

7-8進度條--基本樣式

7-9進度條--彩色進度條

7-10進度條--條紋進度條

7-11進度條--動態條紋進度條

7-12進度條--層疊進度條

7-13進度條--帶Label的進度條

7-14媒體對象

7-15媒體對象--默認媒體對象

7-16媒體對象--媒體對象的嵌套

7-17媒體對象--媒體對象列表

7-18列表組

7-19列表組--基礎列表組

7-20列表組--帶徽章的列表組

7-21列表組--帶連結的列表組

7-22列表組--自定義列表組

7-23列表組--列表項的狀態設定

7-24列表組--多彩列表組

7-25面板

7-26面板--基礎面板

7-27面板--帶有頭和尾的面板

7-28面板--彩色面板

7-29面板--面板中嵌套表格

7-30面板--面板中嵌套列表組

第8章Bootstrap支持的JavaScript外掛程式

本章節講Bootstrap支持的JavaScript外掛程式,包括選頂卡、彈出框、提示框。

8-1導入JavaScript外掛程式

8-2動畫過渡（Transitions）

8-3模態彈出框（Modals）

8-4模態彈出框--結構分析

8-5模態彈出框--實現原理解析（一）

8-6模態彈出框--實現原理解析（二）

8-7模態彈出框--觸發模態彈出窗2種方法

8-8模態彈出框--為彈出框增加過度動畫效果

8-9模態彈出框--模態彈出窗的使用（data-參數說明）

8-10模態彈出框--模態彈出窗的使用（JavaScript觸發）

8-11模態彈出框--JavaScript觸發時的參數設定（一）

8-12模態彈出框--JavaScript觸發時的參數設定（二）

玩轉Bootstrap（基礎）

基本介紹

課程簡介

課程大綱

相關詞條

熱門詞條