HTML5+CSS3+JavaScript+Bootstrap網(wǎng)站開(kāi)發(fā)技術(shù)（第3版）課件 第9章 Bootstrap的組件和插件

Glyphicons字體圖標(biāo)1下拉菜單2導(dǎo)航和導(dǎo)航條3標(biāo)簽和徽章4列表組和分布5標(biāo)簽和提示框6第9章Bootstrap的組件和插件折疊和輪播7應(yīng)用案例89.1Glyphicons字體圖標(biāo)Bootstrap可用的圖標(biāo)是來(lái)自GlyphiconsHalflings的字體圖標(biāo)Bootstrap中的Glyphicons包括超過(guò)260個(gè)的字體圖標(biāo)在安裝目錄的fonts文件夾內(nèi)包含字體圖標(biāo)文件使用字體圖標(biāo)，需要在span元素中引用字體圖標(biāo)類(lèi)9.1Glyphicons字體圖標(biāo)<spanclass="glyphiconglyphicon-search"></span>9.2下拉菜單設(shè)計(jì)Bootstrap下拉菜單時(shí)，按鈕和菜單項(xiàng)都要包含在代碼<divclass="dropdown>……＜/div>中要向按鈕或鏈接添加.dropdown-toggle類(lèi)和data-toggle="dropdown"觸發(fā)器。

在放置菜單項(xiàng)的無(wú)序列表中，需要添加.dropdown-menu類(lèi)。<spanclass="caret"></span>用于添加向下的三角箭頭。代碼<liclass=“divider”></li>用于添加分隔線。9.2下拉菜單9.3導(dǎo)航和導(dǎo)航條9.3.1導(dǎo)航導(dǎo)航組件使用.nav類(lèi)來(lái)實(shí)現(xiàn)為列表添加.nav-tabs類(lèi)或.nav-pills類(lèi)9.3導(dǎo)航和導(dǎo)航條9.3.2導(dǎo)航條導(dǎo)航條（Navbar）是響應(yīng)式布局的重要組件。導(dǎo)航條在移動(dòng)設(shè)備的窗口中是可折疊的，隨著窗口寬度的增加，導(dǎo)航條會(huì)呈現(xiàn)水平展開(kāi)樣式。①創(chuàng)建nav元素或div元素，作為導(dǎo)航條的容器，添加.navbar類(lèi)和.navbar-default類(lèi)。②創(chuàng)建div元素，添加標(biāo)題類(lèi).navbar-header，包含了用.navbar-brand類(lèi)描述的a元素，標(biāo)題文本呈突出顯示。③向?qū)Ш綑谔砑渔溄?，添加帶?nav類(lèi)、.navbar-nav類(lèi)的無(wú)序列表。9.3導(dǎo)航和導(dǎo)航條9.3.2導(dǎo)航條9.3導(dǎo)航和導(dǎo)航條9.3.2導(dǎo)航條實(shí)現(xiàn)響應(yīng)式導(dǎo)航條當(dāng)瀏覽器窗口縮小到一定程度時(shí)，將被折疊在導(dǎo)航條中添加表單和下拉菜單9.4標(biāo)簽與徽章標(biāo)簽（Labels）多用于實(shí)現(xiàn)顯示計(jì)數(shù)、消息提示等功能Bootstrap內(nèi)置6種常用的標(biāo)簽類(lèi).label-default（默認(rèn)）、.label-primary（主要）、.label-success（成功）、.label-info（消息）、.label-warning（警告）、.label-danger（危險(xiǎn)）徽章與（Badges）的邊角更加圓滑徽章主要用于突出顯示頁(yè)面上新消息或未讀消息使用徽章時(shí)，只需要把代碼<spanclass="badge">添加到鏈接、Bootstrap導(dǎo)航等元素上即可。9.4標(biāo)簽與徽章9.5列表組和分頁(yè)9.5.1列表組列表組（Listgroup）用于以列表形式呈現(xiàn)復(fù)雜的或自定義的內(nèi)容①向ul、ol、div等容器元素添加.list-group類(lèi)；②向列表項(xiàng)添加.list-group-item類(lèi)。9.5列表組和分頁(yè)9.5.2分頁(yè)分頁(yè)（Pagination）是一種無(wú)序列表.pagination類(lèi)實(shí)現(xiàn)分頁(yè)樣式.pagination-lg類(lèi)或.pagination-sm類(lèi)得到更大或更小的分頁(yè)組件9.6標(biāo)簽頁(yè)和提示框9.6.1標(biāo)簽頁(yè)標(biāo)簽頁(yè)（Tab）插件也叫選項(xiàng)卡，由Bootstrap提供的腳本文件tab.js實(shí)現(xiàn)。標(biāo)簽頁(yè)由分別是標(biāo)簽頁(yè)（導(dǎo)航）部分和與標(biāo)簽頁(yè)對(duì)應(yīng)的內(nèi)容部分組成。9.6標(biāo)簽頁(yè)和提示框9.6.1標(biāo)簽頁(yè)標(biāo)簽頁(yè)部分用列表實(shí)現(xiàn)為ul元素或ol元素添加.nav類(lèi)和.nav-tabs類(lèi)，使其展現(xiàn)為標(biāo)簽頁(yè)的樣式，列表項(xiàng)中的<a>鏈接填加data-toggle="tab"觸發(fā)器，并且href屬性值和內(nèi)容部分的id值對(duì)應(yīng)。內(nèi)容部分在<divclass=“tab-content”>……</div>內(nèi)部，其中包括若干div元素。每個(gè)標(biāo)簽的內(nèi)容在<divclass="tab-pane"id="tab1">…</div>內(nèi)部，元素的id值用于與標(biāo)簽頁(yè)的href屬性值對(duì)應(yīng)。9.6標(biāo)簽頁(yè)和提示框9.6.2提示框提示框用于在網(wǎng)頁(yè)中顯示不同形式的提示語(yǔ)提供了工具提示條、彈出框、警告框等3種不同形式的提示框工具提示由Bootstrap腳本文件tooltip.js實(shí)現(xiàn)9.7折疊和輪播9.7.1折疊插件折疊（Collapse）插件用于內(nèi)容的展開(kāi)和收起由腳本文件collapse.js實(shí)現(xiàn).panel-group、.panel-default.、panel-heading、.panel-title、.panel-collapse9.7折疊和輪播9.7.2輪播插件輪播（Carousel）插件可用于響應(yīng)式地向頁(yè)面添加滑塊式的顯示效果。輪播的內(nèi)容可以是圖像、內(nèi)嵌框架、視頻或者其他想要放置的任何類(lèi)型的內(nèi)容由Bootstrap提供的腳本文件carousel.js實(shí)現(xiàn).carousel、.carousel-indecators、.carousel-inner、.carousel-control、.left、.right9.7折疊和輪播9.7.2輪播插件輪播插件的結(jié)構(gòu)輪播的實(shí)現(xiàn)主要依靠4個(gè)部分（1）設(shè)計(jì)輪播容器（2）設(shè)計(jì)輪播計(jì)數(shù)器（3）設(shè)計(jì)輪播項(xiàng)目（4）設(shè)計(jì)輪播控制器（5）CSS樣式定義9.8應(yīng)用案例使用輪播插件、柵格系統(tǒng)、導(dǎo)航條等元素，結(jié)合媒體查詢功能，設(shè)置一些元素的CSS樣式，實(shí)現(xiàn)一個(gè)旅游輪播廣告的效果。9.8應(yīng)用案例設(shè)計(jì)過(guò)程1．頁(yè)面結(jié)構(gòu)描述頁(yè)面的第一部分是導(dǎo)航條，第二部分即為輪播廣告，每一個(gè)輪播項(xiàng)目由6張圖片組成。當(dāng)視口寬度為超小屏幕時(shí)，隱藏輪播廣告；當(dāng)視口寬度小于1200px時(shí)，輪播廣告圖片分2行顯示2．導(dǎo)航部分的設(shè)計(jì)3．輪播廣告部分的設(shè)計(jì)每個(gè)輪播項(xiàng)（item）由6幅圖片構(gòu)成，調(diào)整不同輪播項(xiàng)圖片的出現(xiàn)位置，設(shè)置輪播項(xiàng)和其中每個(gè)圖片的大小4．CSS代碼小結(jié)Bootstrap可復(fù)用的組件，包括字體圖標(biāo)、下拉菜單、導(dǎo)航、導(dǎo)航條、列表組、分頁(yè)等組件，這些組件是通過(guò)bootstrap.css中的類(lèi)來(lái)定義的Bootstrap的標(biāo)簽頁(yè)插件、提示框插件、折疊插件、輪播插件等。每個(gè)插件對(duì)應(yīng)一個(gè).js文件，用戶可以單個(gè)引