響應(yīng)式網(wǎng)頁(yè)開發(fā)基礎(chǔ)ch6課件

1、第6章 Bootstrap組件設(shè)計(jì)1Bootstrap組件設(shè)計(jì)Bootstrap表單設(shè)計(jì)Bootstrap下拉菜單Bootstrap導(dǎo)航及分頁(yè)Bootstrap消息提示Bootstrap內(nèi)置組件本章實(shí)訓(xùn)：使用Bootstrap實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式網(wǎng)頁(yè)Bootstrap表單設(shè)計(jì)使用Bootstrap，通過一些簡(jiǎn)單的 HTML 標(biāo)簽和擴(kuò)展的類，即可創(chuàng)建出不同樣式的表單。Bootstrap 提供了3種類型的表單布局：垂直表單（默認(rèn)）、內(nèi)聯(lián)表單和水平表單。垂直表單是Bootstrap表單的默認(rèn)形式?；镜谋韱谓Y(jié)構(gòu)是 Bootstrap 自帶的。創(chuàng)建基本表單的步驟：（1）向父 元素添加 role=form。

2、（2）把標(biāo)簽和控件放在一個(gè)帶有class為form-group的 中。.form-group設(shè)置了15px的下邊距，因此這樣可以獲取表單元素的最佳間距。（3）向所有的文本元素 、 和 添加 class =form-control。創(chuàng)建一個(gè)垂直表單（基本表單）的例子：【例6-1】Bootstrap表單設(shè)計(jì)內(nèi)聯(lián)表單：如果需要?jiǎng)?chuàng)建一個(gè)表單，它的所有元素是內(nèi)聯(lián)的，向左對(duì)齊的，標(biāo)簽是并排的，可向標(biāo)簽添加class .form-inline?？梢苑謩e使用.input-lg/ input-sm和.col-lg-*類來分別設(shè)置表單的文字大小和寬度?！纠?-2】?jī)?nèi)聯(lián)表單示例默認(rèn)情況下（即垂直表單中），Boots

3、trap 中的input、select和textarea均為100% 寬度。而使用內(nèi)聯(lián)表單時(shí)，可以對(duì)表單控件設(shè)置一個(gè)寬度。如果要隱藏內(nèi)聯(lián)表單的標(biāo)簽，可使用類sr-only【例6-3】?jī)?nèi)聯(lián)表單示例Bootstrap表單設(shè)計(jì)水平表單與其他表單相比不僅標(biāo)記的數(shù)量上不同，而且表單的呈現(xiàn)形式也不同。如果要?jiǎng)?chuàng)建一個(gè)水平布局的表單，可按下面的幾個(gè)步驟進(jìn)行。（1）向父元素添加對(duì)類.form-horizontal的引用，即class=form-horizontal。（2）把標(biāo)簽和控件放在一個(gè)帶有對(duì)類.form-group引用的 中。（3）向標(biāo)簽添加對(duì)類.control-label的引用。在水平表單中，可以把標(biāo)簽

4、label和表單元素顯示在同一行。水平表單示例【例6-4】Bootstrap表單設(shè)計(jì)表單輸入（input）Bootstrap 提供了對(duì)所有原生的 HTML 5的input類型的支持，包括text、password、radio、checkbox、image、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color等。Bootstrap表單設(shè)計(jì)表單控件設(shè)置在垂直表單中，Bootstrap 中的input、select和textarea均為100% 寬度。對(duì)一系列復(fù)選框和單選框使用“class=

5、checkbox-inline”或“class=radio-inline”，可控制它們顯示在同一行上。行內(nèi)顯示示例：【例6-5】Bootstrap 表單控件可以在輸入框 input 上設(shè)置一個(gè)塊級(jí)幫助文本。為了添加一個(gè)占用整個(gè)寬度的內(nèi)容塊，可在 后插入一個(gè)class=help-block的塊級(jí)元素。示例：【例6-6】如果需要在一個(gè)表單標(biāo)簽后放置純文本，可以對(duì)使用class=“form-control-static”。示例：【例6-7】Bootstrap表單設(shè)計(jì)表單驗(yàn)證狀態(tài)Bootstrap 包含了錯(cuò)誤、警告和成功消息的驗(yàn)證樣式。只需要對(duì)父元素簡(jiǎn)單地調(diào)用.has-warning、.has-err

6、or 或 .has-success的類，即可使用驗(yàn)證狀態(tài)，示例：【例6-8】Bootstrap表單設(shè)計(jì) 按鈕組示例：【例6-9】使用類.btn-group-lg、.btn-group-sm、.btn-group-xs可以調(diào)整按鈕組的大小。示例：【例6-10】class描述.btn-group該class用于形成基本的按鈕組。在.btn-group中放置一系列帶有 class.btn的按鈕.btn-toolbar該 class 有助于把幾組 結(jié)合到一個(gè) 中，一般獲得更復(fù)雜的組件.btn-group-lg.btn-group-sm.btn-group-xs這些 class 可應(yīng)用到整個(gè)按鈕組的大小

7、調(diào)整.btn-default.btn-link.btn-primary.btn-success.btn-info.btn-warning.btn-danger不同的預(yù)定義按鈕樣式，分別是默認(rèn)樣式、保持鏈接樣式、原始按鈕樣式、成功樣式、一般信息樣式、警告樣式、危險(xiǎn)樣式.btn-block塊級(jí)按鈕（拉伸至父元素100%的寬度）.active.disabled按鈕的激活及禁用狀態(tài).btn-group-vertical該class讓一組按鈕垂直堆疊顯示Bootstrap表單設(shè)計(jì)按鈕組默認(rèn)是水平顯示的，也可以通過類.btn-group-vertical使其垂直顯示。【例6-11】是一個(gè)垂直顯示按鈕組的示

8、例在DreamweaverCC中，可通過選擇“插入/Bootstrap組件/Button Groups”等菜單，插入各種形式的按鈕組。示例：【例6-12】Bootstrap表單設(shè)計(jì)輸入框組使用輸入框組，可以向基于文本的輸入框添加作為前綴和后綴的文本或按鈕。輸入框組為表單前后增加“組”，可以使用圖標(biāo)或文字。向 .form-control元素添加前綴或后綴元素的步驟如下。（1）把前綴或后綴元素放在一個(gè)帶有class=input-group的 中。（2）在相同的內(nèi)，在class=input-group-addon的 或 內(nèi)放置額外的內(nèi)容。（3）把該或放置在 元素的前面或者后面。注意為了保持跨瀏覽器的

9、兼容性，應(yīng)避免使用 元素，因?yàn)樗鼈冊(cè)?WebKit 瀏覽器中不能完全渲染出效果。也不要直接向表單組應(yīng)用輸入框組的class，因?yàn)檩斎肟蚪M是一個(gè)孤立的組件。Bootstrap下拉菜單下拉菜單示例如需使用下拉菜單，只需通過添加對(duì)類.dropdown-toggle的調(diào)用并增加data-toggle屬性的設(shè)置，即可實(shí)現(xiàn)下拉菜單。導(dǎo)航下拉菜單示例:【例6-14】打開的每個(gè)下拉菜單其實(shí)都是一個(gè)列表，這個(gè)列表需要被指定為.dropdown-menu類，而每個(gè)菜單項(xiàng)是一個(gè)列表項(xiàng)，其中，可以設(shè)置下拉菜單中的分隔線。如果要給下拉菜單增加標(biāo)題，可使用.dropdown-header。如果要禁用下拉菜單的項(xiàng)，可以使用

10、.disabled。類描述.dropdown指定下拉菜單，下拉菜單都包裹在 .dropdown 里.dropdown-menu創(chuàng)建下拉菜單.dropdown-menu-right下拉菜單右對(duì)齊.dropdown-header在下拉菜單中添加標(biāo)題.dropup指定向上彈出的下拉菜單.disabled下拉菜單中的禁用項(xiàng).divider下拉菜單中的分割線.pull-right下拉菜單右對(duì)齊Bootstrap下拉菜單下拉菜單的對(duì)齊及彈出方向也可以改變。使用類.pull-right或.dropdown-menu-right可以使得下拉菜單靠頁(yè)面右側(cè)對(duì)齊，而使用.dropup則可以使得下拉菜單向上彈出。示

11、例：【例6-15】Bootstrap下拉菜單下拉菜單實(shí)現(xiàn)方法1按鈕下拉菜單一個(gè)默認(rèn)類型的按鈕： 按鈕下拉菜單 （1）添加按鈕屬性。給按鈕添加對(duì)類dropdown-toggle的調(diào)用，并添加屬性data-toggle =dropdown。為了顯示向下箭頭，在按鈕文本處添加。（2）添加下拉菜單所顯示的列表，并對(duì)此列表增加對(duì)類.dropdown-menu的調(diào)用，如果是靠右對(duì)齊或向上彈出的菜單，可調(diào)用表6-2給出的類。（3）設(shè)置列表項(xiàng)。每個(gè)列表項(xiàng)都需設(shè)置為超鏈接形式，并可參考表6-2，設(shè)置分割線、不可用的列表項(xiàng)、列表標(biāo)題等特殊項(xiàng)目。簡(jiǎn)單按鈕下拉菜單示例：【例6-16】Bootstrap下拉菜單2導(dǎo)航下

12、拉菜單以下代碼所示的是一個(gè)導(dǎo)航，每個(gè)導(dǎo)航項(xiàng)都是一個(gè)超鏈接: 導(dǎo)航下拉菜單 其他導(dǎo)航項(xiàng) （1）對(duì)需要增加下拉菜單的導(dǎo)航項(xiàng)，增加對(duì)類.dropdown的調(diào)用，并對(duì)其對(duì)應(yīng)的超鏈接增加對(duì)類. dropdown-toggle的調(diào)用，以及data-toggle=dropdown的設(shè)置。為了顯示向下箭頭，可在文本后添加。（2）添加下拉菜單所顯示的列表，并對(duì)此列表增加對(duì)類.dropdown-menu的調(diào)用，如果是靠右對(duì)齊或向上彈出的菜單，可調(diào)用表6-2給出的類。（3）設(shè)置列表項(xiàng)。每個(gè)列表項(xiàng)都需設(shè)置為超鏈接形式，并可參考表6-2，設(shè)置分割線、不可用的列表項(xiàng)、列表標(biāo)題等特殊項(xiàng)目。簡(jiǎn)單導(dǎo)航下拉菜單示例：【例6-17

13、】Bootstrap導(dǎo)航及分頁(yè)在HTML 5中，可使用創(chuàng)建導(dǎo)航欄。在Bootstrap中也提供了相應(yīng)的類.nav，能方便地實(shí)現(xiàn)各種導(dǎo)航欄。Bootstrap導(dǎo)航基本樣式使用Bootstrap創(chuàng)建一個(gè)導(dǎo)航菜單主要包括以下步驟:（1）創(chuàng)建一個(gè)無序列表，對(duì)該列表添加class=nav調(diào)用類.nav。（2）添加具體要實(shí)現(xiàn)的導(dǎo)航類型。示例：【例6-18】類描述.nav默認(rèn)垂直導(dǎo)航菜單.nav nav-tabs標(biāo)簽頁(yè)導(dǎo)航.nav nav-pills膠囊式標(biāo)簽頁(yè)導(dǎo)航.nav nav-pills nav-stacked膠囊式標(biāo)簽頁(yè)以垂直方向堆疊排列.nav-justified兩端對(duì)齊的標(biāo)簽頁(yè)，在大于 768p

14、x 的屏幕上，通過 .nav-justified 類可以很容易地讓標(biāo)簽頁(yè)或膠囊式標(biāo)簽呈現(xiàn)出同等寬度。在小屏幕上，導(dǎo)航鏈接呈現(xiàn)堆疊樣式.disabled禁用的標(biāo)簽頁(yè).tab-content與 .tab-pane 和 data-toggle=tab (data-toggle=pill ) 一同使用，設(shè)置標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容隨標(biāo)簽的切換而更改.tab-pane與 .tab-content 和 data-toggle=tab (data-toggle=pill)一同使用，設(shè)置標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容隨標(biāo)簽的切換而更改Bootstrap導(dǎo)航及分頁(yè)標(biāo)簽頁(yè)式導(dǎo)航 ：標(biāo)簽頁(yè)式導(dǎo)航只需對(duì)列表添加對(duì)類.nav nav-tab

15、s的調(diào)用即可。示例：【例6-19】【例6-20】膠囊式導(dǎo)航：膠囊式導(dǎo)航對(duì)應(yīng)的類是.nav nav-pills，類似地，同時(shí)使用類.nav-justified，可以讓導(dǎo)航菜單在顯示尺寸較大時(shí)與父元素等寬。膠囊式導(dǎo)航的示例：【例6-21】在使用膠囊式導(dǎo)航的同時(shí)使用類.nav-stacked，可以讓膠囊式導(dǎo)航項(xiàng)垂直堆疊。如【例6-22】所示，在瀏覽器中可查看垂直堆疊的膠囊式導(dǎo)航效果帶下拉菜單的膠囊式導(dǎo)航代碼示例：【例6-23】Bootstrap導(dǎo)航及分頁(yè)面包屑導(dǎo)航（Breadcrumbs）：是一種基于網(wǎng)站層次信息的顯示方式。以博客為例，面包屑導(dǎo)航可以顯示發(fā)布日期、類別或標(biāo)簽。它們表示當(dāng)前頁(yè)面在導(dǎo)航層

16、次結(jié)構(gòu)內(nèi)的位置。Bootstrap 中的面包屑導(dǎo)航是一個(gè)簡(jiǎn)單的帶有 .breadcrumb class 的列表，項(xiàng)目之間分隔符會(huì)被自動(dòng)添加。示例：【例6-24】Bootstrap導(dǎo)航及分頁(yè)導(dǎo)航欄及其組件導(dǎo)航欄是Bootstrap的一個(gè)突出點(diǎn)。導(dǎo)航欄具備響應(yīng)式的特征，在移動(dòng)設(shè)備的視圖中是折疊的，隨著可用視口寬度的增加，導(dǎo)航欄也會(huì)水平展開。創(chuàng)建一個(gè)默認(rèn)的導(dǎo)航欄的簡(jiǎn)單步驟如下。（1）向 標(biāo)簽添加類.navbar、.navbar-default的調(diào)用。（2）向 標(biāo)簽添加屬性role=navigation，增加可訪問性。（3）可向 標(biāo)簽內(nèi)的 元素添加一個(gè)類 .navbar-header的調(diào)用作為標(biāo)題，里

17、面包含帶有.navbar-brand類的 元素，讓文本更大一號(hào)。（4）為了向?qū)Ш綑谔砑渔溄?，只需要?jiǎn)單地添加帶有調(diào)用類.nav及.navbar-nav 的無序列表即可。最簡(jiǎn)單的一個(gè)導(dǎo)航欄的代碼示例：【例6-25】導(dǎo)航欄的對(duì)齊方向可以通過類.navbar-left （向左）或.navbar-right （向右）來設(shè)置。Bootstrap導(dǎo)航及分頁(yè)在導(dǎo)航欄中也可以使用表單，只需把這個(gè)表單定義為.navbar-form類，就可確保表單適當(dāng)?shù)卮怪睂?duì)齊和在較窄的視口中的折疊。導(dǎo)航欄中也可以使用類.navbar-btn 向不在 中的 元素添加按鈕，類.navbar-btn 可被使用在 和 元素上。可以通過

18、類.navbar-left 或.navbar-right 設(shè)置其對(duì)齊方向?！纠?-26】是一個(gè)帶有表單的向右對(duì)齊的導(dǎo)航欄示例Bootstrap導(dǎo)航及分頁(yè)如果需要在導(dǎo)航中包含文本字符串，可使用 .navbar-text，這個(gè)類通常與 標(biāo)簽一起使用，確保文本適當(dāng)?shù)那皩?dǎo)和顏色。如果要在導(dǎo)航欄導(dǎo)航組件內(nèi)使用圖標(biāo)，也可以使用glyphicon相關(guān)的類。Bootstrap 導(dǎo)航欄可以動(dòng)態(tài)定位。默認(rèn)情況下，導(dǎo)航欄是塊級(jí)元素，它是基于在 HTML 中放置的位置定位的?？梢园阉胖迷陧?yè)面的頂部或者底部，也可以讓它成為隨著頁(yè)面一起滾動(dòng)的靜態(tài)導(dǎo)航欄。通過.navbar-fixed-top把導(dǎo)航欄始終固定在頁(yè)面頂部：

19、【例6-27】通過類.navbar-inverse創(chuàng)建一個(gè)帶有黑色背景白色文本的反色的導(dǎo)航欄。示例：【例6-28】類描述.navbar-fixed-top隨著頁(yè)面一起滾動(dòng)，始終在頁(yè)面頂部.navbar-fixed-bottom隨著頁(yè)面一起滾動(dòng)，始終在頁(yè)面底部.navbar-static-top在頁(yè)面靜態(tài)的頂部Bootstrap導(dǎo)航及分頁(yè)為了實(shí)現(xiàn)導(dǎo)航欄的響應(yīng)式特性，在需要時(shí)可以把導(dǎo)航欄中的內(nèi)容進(jìn)行折疊。實(shí)現(xiàn)導(dǎo)航欄折疊的主要步驟如下。（1）把導(dǎo)航欄中要折疊的內(nèi)容用一個(gè)元素包裹起來，并對(duì)這個(gè)元素調(diào)用類.collapse和.navbar-collapse。（2）添加一個(gè)按鈕，并對(duì)這個(gè)按鈕調(diào)用類.nav

20、bar-toggle，增加屬性 data-toggle及data-target。其中，data-toggle用于告訴 JavaScript 需要對(duì)按鈕做什么，若是折疊則可定義為data-toggle=collapse，而data-target則指示要切換到哪一個(gè)元素，通?？捎迷豬d來設(shè)置。（3）在上述按鈕元素中添加3個(gè)，用于生成所謂的 “漢堡”按鈕，單擊這個(gè)按鈕將切換到第（1）步中定義的折疊部分。一個(gè)具有折疊效果的導(dǎo)航欄示例：【例6-29】Bootstrap導(dǎo)航及分頁(yè)分頁(yè)設(shè)計(jì)分頁(yè)（Pagination）實(shí)際上也是一種無序列表。一個(gè)簡(jiǎn)單的不同大小的分頁(yè)顯示設(shè)置的示例：【例6-30】使用分頁(yè)首先

21、要調(diào)用類.pagination，類.pagination-lg及.pagination-sm分別用于設(shè)置加大或縮小的鏈接字體尺寸。如果要設(shè)置翻頁(yè)，可使用.pager類。往前一頁(yè)和往后一頁(yè)可分別使用.previous和.next。一個(gè)使用翻頁(yè)的示例：【例6-31】class描述.pagination分頁(yè)鏈接.pager翻頁(yè)鏈接，鏈接居中對(duì)齊.previous.pager 中上一頁(yè)的按鈕樣式，左對(duì)齊.next.pager 中下一頁(yè)的按鈕樣式，右對(duì)齊.pagination-lg更大尺寸的分頁(yè)鏈接顯示.pagination-sm更小尺寸的分頁(yè)鏈接顯示.disabled禁用當(dāng)前鏈接.active當(dāng)前訪問

22、頁(yè)面鏈接樣式Bootstrap導(dǎo)航及分頁(yè)滾動(dòng)監(jiān)聽（Scrollspy）插件，即自動(dòng)更新導(dǎo)航插件，會(huì)根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)。其基本的實(shí)現(xiàn)是隨著頁(yè)面的滾動(dòng)，基于滾動(dòng)條的位置向?qū)Ш綑谔砑?.active。滾動(dòng)監(jiān)聽一般結(jié)合導(dǎo)航、分頁(yè)等功能使用。可以通過data屬性或JavaScript代碼對(duì)頁(yè)面添加滾動(dòng)監(jiān)聽。如果是通過data屬性監(jiān)聽滾動(dòng)，則可對(duì)監(jiān)聽的元素（通常是 body）添加屬性data-spy=scroll，然后添加屬性data-target指定滾動(dòng)的目標(biāo)，滾動(dòng)的目標(biāo)應(yīng)為帶有Bootstrap .nav 組件的父元素的 ID 或 class。為了保證滾動(dòng)監(jiān)聽的效果，必須確保頁(yè)面主

23、體中有匹配所要監(jiān)聽鏈接的ID的元素存在。如果是通過JavaScript調(diào)用滾動(dòng)監(jiān)聽，則需選取要監(jiān)聽的元素，然后調(diào)用 .scrollspy() 函數(shù)，例如以下代碼所示：$(body).scrollspy( target: .navbar-example )Bootstrap導(dǎo)航及分頁(yè)附加導(dǎo)航（Affix）附加導(dǎo)航（Affix）插件允許指定 固定在頁(yè)面的某個(gè)位置。它們將在某個(gè)位置開始，但當(dāng)在頁(yè)面中點(diǎn)擊某個(gè)標(biāo)記，該 會(huì)鎖定在某個(gè)位置，不會(huì)隨著頁(yè)面其他部分一起滾動(dòng)。可以通過data屬性或者通過 JavaScript 來使用附加導(dǎo)航插件。如果是通過data 屬性元素添加附加導(dǎo)航行為，只需要向需要監(jiān)聽的元

24、素添加屬性設(shè)置data-spy=affix 即可，并使用偏移來定義何時(shí)切換元素的鎖定和移動(dòng)。如果是通過 JavaScript手動(dòng)為某個(gè)元素添加附加導(dǎo)航，則應(yīng)通過腳本代碼指定需要監(jiān)聽的元素及元素響應(yīng)affix事件時(shí)的操作。Bootstrap導(dǎo)航及分頁(yè)以下代碼就為id為myAffix的元素定義了如何響應(yīng)affix事件的偏移（offset）：$(#myAffix).affix( offset: top: 100, bottom: function () return (this.bottom = $(.bs-footer).outerHeight(true) )【例6-32】是一個(gè)滾動(dòng)監(jiān)聽及附加導(dǎo)航

25、的示例。首先對(duì)要滾動(dòng)監(jiān)聽的元素使用data-spy= scroll添加滾動(dòng)監(jiān)聽，用來根據(jù)滾動(dòng)條的位置自動(dòng)更新對(duì)應(yīng)的導(dǎo)航目標(biāo)，并指定滾動(dòng)的目標(biāo)是頁(yè)面導(dǎo)航元素（.nav）所在的div容器#myScrollspy。接著對(duì)導(dǎo)航元素列表使用data-spy=affix添加附加導(dǎo)航。data-offset用于在計(jì)算滾動(dòng)位置時(shí)，計(jì)算距離頂部的偏移像素。Bootstrap消息提示工具提示（tooltip）：可用于提示鏈接信息。在Bootstrap中，工具提示改用 CSS 實(shí)現(xiàn)動(dòng)畫效果，用 data 屬性存儲(chǔ)標(biāo)題信息。工具提示根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下將置于觸發(fā)元素后面?？梢允褂靡韵聝煞N方式添加工具提示

26、。（1）通過data屬性。如需添加一個(gè)工具提示，只需向一個(gè)錨標(biāo)簽添加 data-toggle=tooltip 即可。錨的title即為工具提示的文本。默認(rèn)情況下，插件把工具提示設(shè)置在頂部。例如：請(qǐng)懸停在我的上面（2）通過 JavaScript 觸發(fā)工具提示。例如使用以下語句觸發(fā)指定ID元素的工具提示：$(#identifier).tooltip(options)需要注意，工具提示插件不像之前所討論的下拉菜單及其他插件那樣，它不是純 CSS 插件。如需使用該插件，必須使用 jQuery 激活它?？墒褂孟旅娴哪_本來啟用頁(yè)面中的所有的工具提示：$(function () $(data-toggle=

27、tooltip).tooltip(); );Bootstrap消息提示工具提示中的一些設(shè)置可通過Bootstrap Data API添加或通過 JavaScript 調(diào)用?！纠?-33】是一個(gè)使用工具提示的簡(jiǎn)單示例需要注意的是，定義了工具提示后，如果要在頁(yè)面中使用，必須在后面通過一個(gè)jQuery觸發(fā)data 屬性名稱描述data-animation工具提示使用 CSS 漸變?yōu)V鏡效果data-html向工具提示插入 HTML。為true表示允許在工具提示中插入HTML代碼；如果為 false，jQuery 的 text 方法將被用于向DOM插入內(nèi)容data-placement規(guī)定如何定位工具提示

28、，其值可以是 top|bottom|left|right|autodata-selector如果提供了一個(gè)選擇器，工具提示對(duì)象將被委派到指定的目標(biāo)data-title提示信息內(nèi)容。如果未指定title屬性，則 title 選項(xiàng)是默認(rèn)的title值data-trigger定義如何觸發(fā)工具提示，其值可以是click| hover | focus | manual?？梢詡鬟f多個(gè)觸發(fā)器，每個(gè)觸發(fā)器之間用空格分隔data-delay延遲顯示和隱藏工具提示的毫秒數(shù)，這個(gè)屬性對(duì) manual 手動(dòng)觸發(fā)類型不適用。如果提供的是一個(gè)數(shù)字，那么延遲將會(huì)應(yīng)用于顯示和隱藏。如果提供的是對(duì)象，要設(shè)置其顯示和隱藏的時(shí)間，

29、其結(jié)構(gòu)如下所示：delay: show: 500, hide: 100 data-container向指定元素追加工具提示顯示的位置Bootstrap消息提示方法描述實(shí)例.tooltip(options)向元素集合附加工具提示句柄$().tooltip(options).tooltip(toggle)切換顯示/隱藏元素的工具提示$(#element).tooltip(toggle).tooltip(show)顯示元素的工具提示$(#element).tooltip(show).tooltip(hide)隱藏元素的工具提示$(#element).tooltip(hide).tooltip(des

30、troy)隱藏并銷毀元素的工具提示$(#element).tooltip(destroy)事件描述實(shí)例show.bs.tooltip當(dāng)調(diào)用 show 實(shí)例方法時(shí)立即觸發(fā)該事件$(#myTooltip).on(show.bs.tooltip, function () )shown.bs.tooltip當(dāng)工具提示對(duì)用戶可見時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）$(#myTooltip).on(shown.bs.tooltip, function () )hide.bs.tooltip當(dāng)調(diào)用 hide 實(shí)例方法時(shí)立即觸發(fā)該事件$(#myTooltip).on(hide.bs.tooltip,

31、function () )hidden.bs.tooltip當(dāng)工具提示對(duì)用戶隱藏時(shí)觸發(fā)該事件（將等待 CSS 過渡效果完成）$(#myTooltip).on(hidden.bs.tooltip, function () )Bootstrap消息提示警告框組件（alert）警告框（alert）消息大多是用來向終端用戶顯示諸如警告或確認(rèn)消息的信息。也可以通過dismiss取消顯示。有以下方法可以取消警示框組件。（1）通過data屬性可取消警告框顯示。只需要向關(guān)閉按鈕添加屬性data-dismiss=alert，就會(huì)為警告框添加關(guān)閉功能。例如以下代碼：可點(diǎn)擊關(guān)閉警告框（2）可通過 JavaScrip

32、t 取消警告框顯示，例如以下語句可以讓頁(yè)面內(nèi)指定的警告框帶有關(guān)閉功能：$(#identifier).alert();類說明.alert普通警示框.alert-success成功警示框.alert-danger危險(xiǎn)提示警示框.alert-warning警告提示警示框.alert-info信息提示警示框Bootstrap消息提示彈出框（popover）彈出框（popover）與工具提示（tooltip）類似，提供了一個(gè)擴(kuò)展的視圖，如需激活彈出框，用戶只需把鼠標(biāo)指針懸停在元素上即可。彈出框插件根據(jù)需求生成內(nèi)容和標(biāo)記，默認(rèn)情況下是把彈出框放在它們的觸發(fā)元素后面?？梢杂靡韵聝煞N方式添加彈出框。（1）通過

33、data屬性。如需添加一個(gè)彈出框，只需向一個(gè)錨/按鈕標(biāo)簽添加屬性 data-toggle= popover 即可。錨的 title 即為彈出框的文本。默認(rèn)情況下，插件把彈出框設(shè)置在頂部。例如以下就是一個(gè)簡(jiǎn)單的彈出框的例子：請(qǐng)懸停在我的上面（2）還可通過 JavaScript 啟用彈出框。例如使用以下語句啟用彈出框：$(#identifier).popover(options);Bootstrap消息提示彈出框不是純 CSS 插件，使用時(shí)必須通過 jQuery 激活它可通過類似下面的腳本語句來啟用頁(yè)面中的所有的彈出框：$(function () $(data-toggle=popover).po

34、pover(); );由于彈出框插件依賴于工具提示插件，與工具提示類似地，彈出框也可通過data-placement屬性設(shè)置彈出框的位置。而表6-5中關(guān)于工具提示的插件也適用于彈出框插件?！纠?-36】是一個(gè)彈出框的示例，其對(duì)象的data-placement屬性設(shè)置了顯示位置，title屬性和data-content屬性分別是彈出框的標(biāo)題和內(nèi)容。方法描述實(shí)例.popover(options)向元素集合附加彈出框句柄$().popover(options).popover(toggle)切換顯示/隱藏元素的彈出框$(#element).popover(toggle).popover(show)顯

35、示元素的彈出框$(#element).popover(show).popover(hide)隱藏元素的彈出框$(#element).popover(hide).popover(destroy)隱藏并銷毀元素的彈出框$(#element).popover(destroy)Bootstrap內(nèi)置組件Bootstrap自帶 12 種 jQuery 插件，包括有過渡、輪播圖、模態(tài)窗口等。這些插件擴(kuò)展了網(wǎng)頁(yè)的功能，可以給站點(diǎn)添加更多的互動(dòng)。即使不是一名高級(jí)的 JavaScript 開發(fā)人員，也可以學(xué)習(xí)和使用 Bootstrap的JavaScript插件。利用 Bootstrap 數(shù)據(jù) API（Boots

36、trap Data API），大部分的插件可以在不編寫任何代碼的情況被觸發(fā)。網(wǎng)頁(yè)站點(diǎn)引用 Bootstrap 內(nèi)置組件的方式有以下兩種。（1）單獨(dú)引用：使用 Bootstrap 的個(gè)別的 *.js 文件。一些插件和 CSS 組件依賴于其他插件。如果單獨(dú)引用插件，請(qǐng)先確保弄清這些插件之間的依賴關(guān)系。該方法就是我們?cè)谇懊嬉胘Query插件的方法。（2）編譯（同時(shí)）引用：使用 bootstrap.js 或壓縮版的 bootstrap.min.js，但要注意，不要同時(shí)引用這兩個(gè)文件。引用后，就可以通過data屬性API使用所有的 Bootstrap 插件，無須寫一行JavaScript代碼。Boot

37、strap內(nèi)置組件所謂的輪播圖，就是將若干圖像、視頻等網(wǎng)頁(yè)元素按順序依次播放?！纠?-37】給出了輪播圖的一個(gè)示例。示例中的圖像地址可替換為需要顯示的圖像。關(guān)于data- 屬性：（1）data-slide 接受的值為prev 或 next，用來改變幻燈片相對(duì)于當(dāng)前對(duì)象的位置。（2）data-slide-to 來向輪播底部創(chuàng)建一個(gè)原始滑動(dòng)索引，比如data-slide-to=2將把滑動(dòng)塊移動(dòng)到一個(gè)特定的索引2，索引從 0 開始計(jì)數(shù)。（3）data-ride=carousel屬性標(biāo)記輪播在頁(yè)面加載時(shí)開始動(dòng)畫播放。屬性名稱描述data-interval默認(rèn)值 5000，幻燈片的等待時(shí)間（毫秒）。如果

38、為false，輪播將不會(huì)自動(dòng)開始循環(huán)data-pause默認(rèn)鼠標(biāo)指針停留在幻燈片區(qū)域（hover）即暫停輪播，鼠標(biāo)指針離開即啟動(dòng)輪播data-wrap輪播是否持續(xù)循環(huán)，默認(rèn)值trueBootstrap內(nèi)置組件如果在JavaScript調(diào)用可直接使用鍵值對(duì)方法，并去掉data，如以下代碼所示：$(#myCarousel).carousel( /設(shè)置自定義屬性 interval : 2000, /設(shè)置自動(dòng)播放2秒 pause : hover, /設(shè)置暫停按鈕的事件 wrap : false, /只播一次);方法名稱描述cycle循環(huán)各幀（默認(rèn)從左到右）pause停止輪播number輪播到指定的圖片

39、上（小標(biāo)從 0 開始，類似數(shù)組）prev循環(huán)輪播到上一個(gè)項(xiàng)目next循環(huán)輪播到下一個(gè)項(xiàng)目方法名稱描述slide.bs.carousel當(dāng)調(diào)用slide實(shí)例方式時(shí)立即觸發(fā)該事件slid.bs.carousel當(dāng)輪播完成一個(gè)幻燈片觸發(fā)該事件Bootstrap內(nèi)置組件如果設(shè)置單擊按鈕執(zhí)行，則可通過JavaScript代碼控制輪播執(zhí)行，比如可對(duì)【例6-37】添加以下代碼：$(button).on(click, function () /點(diǎn)擊后，自動(dòng)播放 $(#myCarousel).carousel(cycle);如果要設(shè)置當(dāng)調(diào)用實(shí)例后觸發(fā)，可使用以下代碼：$(#myCarousel).on(slid

40、e.bs.carousel, function () alert(當(dāng)調(diào)用 slide 實(shí)例方式時(shí)立即觸發(fā)););$(#myCarousel).on(slid.bs.carousel, function () alert(當(dāng)輪播完成一個(gè)幻燈片觸發(fā)););也可以直接在Adobe Dreamweaver CC中插入輪播圖Bootstrap內(nèi)置組件縮略圖通過Bootstrap中的類.thumbnail，可在網(wǎng)頁(yè)中簡(jiǎn)便地生成縮略圖。使用 Bootstrap 創(chuàng)建縮略圖，可先在圖像周圍添加調(diào)用了.thumbnail類 的 標(biāo)簽，就可以對(duì)圖像添加4個(gè)像素的內(nèi)邊距（padding）和一個(gè)灰色的邊框，當(dāng)鼠標(biāo)指針

41、懸停在圖像上時(shí)，會(huì)動(dòng)畫顯示出圖像的輪廓。【例6-38】是一個(gè)最簡(jiǎn)單的縮略圖的例子如果要使得縮略圖顯示更多的內(nèi)容，可以把調(diào)用.thumbnail 類的標(biāo)簽由改為，就可以在中添加按鈕、布局元素等，使得縮略圖的顯示效果更靈活多樣。Bootstrap內(nèi)置組件巨幕效果巨幕，意為超大屏幕（Jumbotron），顧名思義該組件可以增加標(biāo)題的大小，并為登錄頁(yè)面內(nèi)容添加更多的外邊距（margin），巨幕組件主要是展示網(wǎng)站的關(guān)鍵性區(qū)域。使用超大屏幕（Jumbotron）的步驟如下。（1）創(chuàng)建一個(gè)帶有 class.jumbotron的容器 ；（2）除了更大的 ，其他字體粗細(xì) font-weight 被減為 200p

42、x。巨幕顯示主要有以下兩種樣式。一種是占用全部寬度且不帶圓角的超大屏幕，在 .container類外使用 .jumbotron類，如【例6-39】所示另一種是在固定的范圍內(nèi)帶有圓角的顯示，在.jumbotron類外使用.container類，代碼如【例6-40】所示Bootstrap內(nèi)置組件進(jìn)度條Bootstrap 進(jìn)度條使用CSS 3過渡和動(dòng)畫來獲得。需要注意的是，在Bootstrap中使用進(jìn)度條要考慮瀏覽器的兼容性，Internet Explorer 9 及之前的版本和舊版的 Firefox 都不支持進(jìn)度條的顯示，而Opera 12 不支持進(jìn)度條的動(dòng)畫。要?jiǎng)?chuàng)建一個(gè)基本的進(jìn)度條的步驟如下。（

43、1）添加一個(gè)，對(duì)這個(gè)添加類.progress 的調(diào)用。（2）在上面的 內(nèi)，添加一個(gè)調(diào)用類.progress-bar 的空的 。（3）對(duì)class=“progress-bar”的div添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style=width: 60%表示進(jìn)度條在60%的位置?！纠?-41】是一個(gè)簡(jiǎn)單的進(jìn)度條示例，style=width: 40%;表示該進(jìn)度條在40%的位置。Bootstrap內(nèi)置組件不同的進(jìn)度條樣式一個(gè)動(dòng)態(tài)的條紋進(jìn)度條的示例:【例6-42】如果把多個(gè)進(jìn)度條的放在相同的一個(gè).progress 中，可以實(shí)現(xiàn)進(jìn)度條的堆疊效果要注意堆疊的進(jìn)度條寬度加起來不要超過10

44、0%，否則將無法完整顯示所有進(jìn)度條。類名描述.progress-bar基本進(jìn)度條。用于顯示進(jìn)度條的.progress-bar progress-bar-success成功信息進(jìn)度條.progress-bar progress-bar-info提示信息進(jìn)度條.progress-bar progress-bar-warning警告信息進(jìn)度條.progress-bar progress-bar-danger危險(xiǎn)信息進(jìn)度條.progress用于定義外層的，這個(gè)包裹顯示進(jìn)度條元素的.progress progress-striped顯示帶條紋的進(jìn)度條，用于定義外層的.progress progress-

45、striped active顯示動(dòng)態(tài)的帶條紋的進(jìn)度條，用于定義外層的Bootstrap內(nèi)置組件模態(tài)框（modal）模態(tài)框（modal）是覆蓋在父窗體上的子窗體，一般用于顯示來自一個(gè)單獨(dú)的源的內(nèi)容，可以在不離開父窗體的情況下有一些互動(dòng)，例如提供信息、交互等。創(chuàng)建一個(gè)模態(tài)框需要先把外層的調(diào)用.moda，如果要把模態(tài)框顯示為對(duì)話框的形式，還要在其內(nèi)部創(chuàng)建一個(gè)調(diào)用類.modal-dialog的。除了顯示為對(duì)話框形式的類.modal-dialog，還可以設(shè)置為加大顯示尺寸.modal-lg及加小顯示尺寸.modal-sm。模態(tài)框內(nèi)容要在里面創(chuàng)建一個(gè)定義為類.modal-content來包裹。而模態(tài)框里面

46、還可包括頭部.modal-header（可選）、主體內(nèi)容.modal-body、腳注.modal-footer（可選）等部分，每部分可以包含標(biāo)題.modal-title和正文。Bootstrap內(nèi)置組件模態(tài)框一般要通過一些事件來觸發(fā)，例如按鍵點(diǎn)擊、鏈接點(diǎn)擊等。觸發(fā)模態(tài)框可以在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle=modal，同時(shí)設(shè)置 data-target=#identifier 或 href=#identifier 來指定要切換的特定的模態(tài)框（做個(gè)模態(tài)框帶有 屬性id=identifier）。還可以通過JavaScript來觸發(fā)模態(tài)框，例如把以下JavaScrip

47、t語句添加到要綁定的觸發(fā)事件，當(dāng)事件發(fā)生將觸發(fā)指定屬性id=identifier的模態(tài)框：$(#identifier).modal(options)【例6-43】Bootstrap內(nèi)置組件屬性名稱類型/默認(rèn)值描述data-backdropboolean 或string static默認(rèn)值：true指定一個(gè)靜態(tài)的背景，當(dāng)用戶點(diǎn)擊模態(tài)框外部時(shí)不會(huì)關(guān)閉模態(tài)框data-keyboardboolean默認(rèn)值：true當(dāng)按下【Esc】鍵時(shí)關(guān)閉模態(tài)框，設(shè)置為 false 時(shí)則按鍵無效data-showBoolean默認(rèn)值：true當(dāng)初始化時(shí)顯示模態(tài)框data-remotepath默認(rèn)值：false使用 jQ

48、uery.load方法，為模態(tài)框的主體注入內(nèi)容。如果添加了一個(gè)帶有有效 URL 的 href，則會(huì)加載其中的內(nèi)容方法描述實(shí)例modal(options)把內(nèi)容作為模態(tài)框激活。接受一個(gè)可選的選項(xiàng)對(duì)象$(#identifier).modal(keyboard: false )modal(toggle)手動(dòng)切換模態(tài)框$(#identifier).modal(toggle)modal(show)手動(dòng)打開模態(tài)框$(#identifier).modal(show)modal(hide)手動(dòng)隱藏模態(tài)框$(#identifier).modal(hide)Bootstrap內(nèi)置組件well和面板（panel）所