我們接下來(lái)要學(xué)習(xí)的東西呢，是Bootstrap為我們提供的一些組件，這些組件的使用非常簡(jiǎn)單，可以方便快捷幫助我們搭建網(wǎng)站，并且能達(dá)到一個(gè)不錯(cuò)的顯示效果。我們最需要注意的就是： HTML的結(jié)構(gòu) 和bootstrap提供 添加到結(jié)構(gòu)上的類以及屬性 。

這些組件的交互功能是依賴于jQuery庫(kù)實(shí)現(xiàn)的，所以還必須引入jQuery.js，且必須在Bootstrap.js之前。正式上線的話直接使用壓縮版本就可以了如下：

<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>

菜單

基本用法

在官方文檔中，我們看到的下拉菜單組件是這樣的：

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜單<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜單項(xiàng)1</a></li> <li><a href="#">菜單項(xiàng)2</a></li> </ul></div>

那么，到底哪一些屬性是必須的、用來(lái)控制行為的呢？又有哪一部分是起到修飾作用的？

我們來(lái)自己簡(jiǎn)化一下這一段代碼：

<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜單</button> <ul class="dropdown-menu" > <li>菜單項(xiàng)1</li> <li>菜單項(xiàng)2</li> </ul></div>

我們來(lái)看看簡(jiǎn)化前后的對(duì)比圖：

在使用Bootstrap框架中的下拉菜單組件時(shí)，其結(jié)構(gòu)運(yùn)用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運(yùn)用。經(jīng)過(guò)我們上面的簡(jiǎn)化，最終可以看到核心要求有以下幾點(diǎn)：

使用一個(gè)名為 .dropdown 的容器包裹了整個(gè)下拉菜單元素，示例中為： <div class="dropdown"></div>使用了一個(gè) <button> 按鈕做為父菜單，并且定義類名 .dropdown-toggle 和自定義 data-toggle 屬性，且值必須和最外容器類名一致，此示例為： data-toggle="dropdown"下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類名為 .dropdown-menu ，此示例為： <ul class="dropdown-menu">

也就是說(shuō)，我們僅僅需要牢記這3個(gè)步驟我們就可以使下拉菜單生效， <button> 內(nèi)的 <span> 標(biāo)簽，也僅僅是用來(lái)進(jìn)行圖標(biāo)的展示，讓菜單更加清晰。不過(guò)雖然如此，我個(gè)人建議在 實(shí)際的使用過(guò)程 中，把Bootstrap框架中的下拉菜單的 其它屬性也一并加上 ，這樣更加友好的為不同的客戶 如：屏幕閱讀器 提供了一個(gè)優(yōu)質(zhì)的體驗(yàn)。

那么這些是怎么起作用的呢？

查看CSS源碼可以看到 .dropdown-menu 有一個(gè) display:none ，所以下拉列表項(xiàng)默認(rèn)隱藏的；

我們繼續(xù)打開(kāi)chrome開(kāi)發(fā)者工具（F12），可以看到每一次在列表項(xiàng)展現(xiàn)出來(lái)時(shí)， .dropdown 類后還增加了一個(gè) .open 的類；不用多說(shuō)想肯定就是這個(gè)類在起作用，我們?cè)倮^續(xù)回到CSS源碼中去可以看到：

.open > .dropdown-menu { display: block;}

看到這里也應(yīng)該不用過(guò)多說(shuō)明了，添加了這個(gè) .open 類時(shí)， .dropdown-menu 自然的就顯示出來(lái)了。

下拉菜單修飾

下拉分隔線

在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過(guò)添加一個(gè) 空 的 <li> ，并且給這個(gè) <li> 添加類名 .divider 來(lái)實(shí)現(xiàn)添加下拉分隔線的功能。

<li class="divider"></li> 對(duì)應(yīng)的樣式代碼：

.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

菜單標(biāo)題

上一小節(jié)講解通過(guò)添加 divider 可以將下拉菜單分組，為了讓這個(gè)分組更明顯，還可以給每個(gè)組添加一個(gè)頭部（標(biāo)題）： <li class="dropdown-header">第一部分菜單頭部</li> 。

從源碼中比較關(guān)鍵的兩個(gè)點(diǎn)是：標(biāo)題的字體顏色是： color: #777; ，還有內(nèi)填充 padding: 3px 20px;

對(duì)齊方式

Bootstrap框架中下拉菜單 默認(rèn)是左對(duì)齊 也就是添加 .dropdown-menu-left 類所能達(dá)到的效果，如果你想讓下拉菜單 相對(duì)于父容器右對(duì)齊 時(shí)，可以在 .dropdown-menu 上（也就是你的菜單項(xiàng)的ul）添加一個(gè) .pull-right 或者 .dropdown-menu-right 類名，如下所示：

<ul class="dropdown-menu pull-right" >

源碼如下：

.dropdown-menu.pull-right,.dropdown-menu-right {/*兩個(gè)類自選*/ right: 0; left: auto;}

當(dāng)然你只進(jìn)行這樣的設(shè)置的話，可能還會(huì)有一些奇怪的情況出現(xiàn)，比如列表項(xiàng)跑到屏幕最右邊去了，所以同時(shí)一定要為 .dropdown 添加 float:left 樣式。

.dropdown{ float: left;}

菜單項(xiàng)狀態(tài)

下拉菜單項(xiàng)的默認(rèn)的狀態(tài)（不用設(shè)置）有懸浮狀態(tài)（ :hover ）和焦點(diǎn)狀態(tài)（ :focus ）：（包括下面提到的狀態(tài)都必須在li中包含a標(biāo)簽才有- -）

下拉菜單項(xiàng)除了上面兩種狀態(tài)，還有 當(dāng)前狀態(tài) （ .active ）和 禁用狀態(tài) （ .disabled ）。這兩種狀態(tài)使用方法只需要在對(duì)應(yīng)的菜單項(xiàng)上添加對(duì)應(yīng)的類名如： <li class="disabled"><a href="#">桃</a></li>

我們可以實(shí)現(xiàn)下面這樣的效果：

按鈕

我們?cè)?《Bootstrap入門書籍之（二）表單》 中，已經(jīng)了解過(guò)了Bootstrap中按鈕的使用，在這里我們繼續(xù)進(jìn)行一些擴(kuò)展！

按鈕組及工具欄

單個(gè)按鈕在Web頁(yè)面中的運(yùn)用有時(shí)候并不能滿足我們的業(yè)務(wù)需求，常常會(huì)看到將多個(gè)按鈕組合在一起使用，比如富文本編輯器里的一組小圖標(biāo)按鈕等。這個(gè)時(shí)候我們就會(huì)需要用到按鈕組

對(duì)于結(jié)構(gòu)方面，非常的簡(jiǎn)單。使用一個(gè)名為 .btn-group 的容器，把多個(gè)按鈕放到這個(gè)容器中。如：

<div class="btn-group"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中間</button> <button type="button" class="btn btn-default">向右</button></div>

如何轉(zhuǎn)化成工具欄呢？只需要再用一個(gè) .btn-toolbar 的內(nèi)容，將我們的 .btn-group 再進(jìn)行一次包裹，同時(shí)，我們還可以使用 .btn-group-lg 大按鈕組、 .btn-group-xs :超小按鈕組這一系列的類添加到 .btn-group 容器來(lái)進(jìn)行對(duì)一組按鈕進(jìn)行大小控制如下：

<div class= "btn-toolbar"> <!-- …… --> <div class= "btn-group "> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中間</button> <button type="button" class="btn btn-default">向右</button> </div> <div class= "btn-group btn-group-sm"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中間</button> <button type="button" class="btn btn-default">向右</button> </div> <!-- …… --></div>

上面兩段代碼效果如下：

嵌套分組

這里的嵌套分組其實(shí)就是在分組按鈕中嵌套了一個(gè)下拉菜單。使用的時(shí)候，只需要把當(dāng)初制作下拉菜單的 .dropdown 的容器換成 .btn-group ，并且和普通的按鈕放在同一級(jí)。如下所示：

<div class="btn-group"> <button class="btn btn-default" type="button">首頁(yè)</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">產(chǎn)品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司簡(jiǎn)介</a></li> <li><a href="##">企業(yè)文化</a></li> <li><a href="##">組織結(jié)構(gòu)</a></li> <li><a href="##">客服服務(wù)</a></li> </ul> </div> <button class="btn btn-default" type="button">關(guān)于</button></div>

當(dāng)然我們還可以從 水平按鈕組 變成 垂直分組 ，只需要在水平分組的最外層容器的類名 .btn-group 替換成 .btn-group-vertical ，就可以實(shí)現(xiàn)垂直分組的效果。

按鈕的向下向上三角形

我們?cè)谙吕藛魏颓短追纸M都都看到了一個(gè)按鈕的向下三角形，我們是通過(guò)在 <button> 標(biāo)簽中添加一個(gè) <span> 標(biāo)簽元素，并且命名為 caret ，這個(gè)三角形完全是通過(guò)CSS代碼來(lái)實(shí)現(xiàn)的：

.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;}

有的時(shí)候我們的下拉菜單會(huì) 向上彈起 ，這個(gè)時(shí)候我們的 三角方向需要朝上 顯示，實(shí)現(xiàn)方法：需要在 .btn-group 類上追加 dropup 類名（這也是做向上彈起下拉菜單要用的類名）。

.dropup .caret{ content: ""; border-top: 0;/*可以看到這里top與bottom的變化*/ border-bottom: 4px solid;}

那么現(xiàn)在就來(lái)對(duì)比一下，上面代碼以及類的添加可以達(dá)到的不同效果：

導(dǎo)航

導(dǎo)航對(duì)于一位前端開(kāi)發(fā)人來(lái)說(shuō)眼應(yīng)該都不陌生?？梢哉f(shuō)，每一個(gè)網(wǎng)頁(yè)里面都會(huì)有導(dǎo)航的存在，便于用戶查找網(wǎng)站所提供的各項(xiàng)功能服務(wù)。那么如何使用Bootstrap框架制作各式各樣的導(dǎo)航呢？

基礎(chǔ)樣式

Bootstrap框架中制作導(dǎo)航條主要通過(guò) .nav 樣式。默認(rèn)的 .nav 樣式 不提供 默認(rèn)的導(dǎo)航樣式，必須附加另外一個(gè)樣式才會(huì)有效，比如 nav-tabs 、 nav-pills 之類。

<ul class="nav nav-tabs"> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">JavaScript</a></li></ul>

當(dāng)然他們同樣也有 當(dāng)前狀態(tài) （ .active ）和 禁用狀態(tài) （ .disabled ），我們給第一個(gè)導(dǎo)航添加當(dāng)前狀態(tài)，最后一個(gè)導(dǎo)航添加禁用狀態(tài)，實(shí)現(xiàn)效果如下：

修飾

垂直堆疊的導(dǎo)航

在實(shí)際運(yùn)用當(dāng)中，除了水平導(dǎo)航之外，還有垂直導(dǎo)航，就類似前面介紹的垂直排列按鈕一樣。制作垂直堆疊導(dǎo)航只需要在 .nav-pills的基礎(chǔ)上添加一個(gè) .nav-stacked 類名即可，同時(shí)，我們和下拉菜單一樣，同樣可以使用組之間的分割線例，只需要在導(dǎo)航項(xiàng)之間添加 <li class=”nav-divider”></li> ,如：

<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="#">JavaScript</a></li></ul>

復(fù)制到瀏覽器中看看效果吧！

你應(yīng)該已經(jīng)發(fā)現(xiàn)了在垂直導(dǎo)航中，每一個(gè)導(dǎo)航項(xiàng)都是占 文字居左 ，占100%的父容器寬度的，如果你想有響應(yīng)式的效果，應(yīng)該和柵格系統(tǒng)一起使用，另外為什么不試試使用 nav-tabs 來(lái)實(shí)現(xiàn)垂直導(dǎo)航呢？看看效果，你就會(huì)明白為什么不使用了。

自適應(yīng)導(dǎo)航

自適應(yīng)導(dǎo)航和前面制作自適應(yīng)按鈕是一樣的，不過(guò)更換了一個(gè)類名， .nav-justified 。當(dāng)然他需要和 .nav-tabs 或者 .nav-pills

配合在一起使用。 它是響應(yīng)式的，在寬度足夠時(shí)，給多個(gè)導(dǎo)航項(xiàng)，均分空間；在達(dá)到一個(gè)臨界值（768px）時(shí)，它會(huì)和垂直導(dǎo)航一樣：每一項(xiàng)都充滿父容器的寬度，不同的是，他的文字是 居中顯示 的

導(dǎo)航中加下拉菜單（二級(jí)導(dǎo)航）

前面介紹的都是使用制作一級(jí)導(dǎo)航，但很多時(shí)候，在Web頁(yè)面常常會(huì)用到二級(jí)導(dǎo)航的效果。

在Bootstrap框架中制作二級(jí)導(dǎo)航就更容易了。只需要將li當(dāng)作父容器，使用類名 .dropdown ，同時(shí)在 li 中嵌套另一個(gè)列表 ul

<ul class="nav nav-pills"> <li ><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">JavaScript<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">JQuery</a></li> <li><a href="##">Vue</a></li> … </ul></ul>

這里的話不進(jìn)行太多的講解，與上面的嵌套按鈕效果一致。

面包屑式導(dǎo)航

面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁(yè)面的位置（ 當(dāng)前位置 ）。一般在文章、博客、列表處用的比較多，需要用到 .breadcrumb 類。

<ol class="breadcrumb"> <li><a href="#">個(gè)人首頁(yè)</a></li> <li><a href="#">標(biāo)簽</a></li> <li class="active">Bootstrap</li></ol>

可以實(shí)現(xiàn)的效果：

是不是很簡(jiǎn)潔明了呢？

關(guān)于Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航的相關(guān)知識(shí)就給大家介紹這么多，下篇給大家介紹Bootstrap入門書籍之（五）導(dǎo)航條、分頁(yè)導(dǎo)航，感興趣的朋友繼續(xù)關(guān)注，謝謝！

最新評(píng)論