Bootstrap入門書籍之（四）選單、按鈕及導航_javascript技巧

我們接下來要學習的東西呢，是Bootstrap為我們提供的一些組件，這些組件的使用非常簡單，可以方便快捷幫助我們搭建網站，並且能達到一個不錯的顯示效果。我們最需要注意的就是： HTML的結構 和bootstrap提供 加入結構上的類別以及屬性 。

這些元件的互動功能是依賴jQuery函式庫實現的，所以還必須引入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="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>

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

我們來自己簡化這一段程式碼：

<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>

我們來看看簡化前後的對比圖：

 

使用Bootstrap框架中的下拉式選單組件時，其結構運用的正確與否非常的重要，如果結構和類別名稱未使用正確，直接影響組件是否能正常運用。經過我們上面的簡化，最後可以看到核心要求有以下幾點：

使用一個名為.dropdown 的容器包裹了整個下拉式選單元素，範例中為：

使用了一個 按鈕做為父選單，並且定義類別名.dropdown-toggle 和自訂data-toggle 屬性，且值必須和最外容器類別名稱一致，此範例為： data-toggle="dropdown"下拉式選單項目使用一個ul列表，並且定義一個類別名為.dropdown -menu ，此範例為：

也就是說，我們只需要牢記這3個步驟我們就可以使下拉選單生效，

內的 標籤，也僅僅是用來進行圖示的展示，讓選單更加清晰。不過雖然如此，我個人建議在 實際的使用過程 中，把Bootstrap框架中的下拉菜單的 其它屬性也一並加上 ，這樣更加友好的為不同的客戶 如：屏幕閱讀器 提供了一個優質的體驗。

那麼這些是怎麼運作的呢？

查看CSS原始碼可以看到 .dropdown-menu 有一個 display:none ，所以下拉清單項目預設為隱藏的；

我們繼續打開chrome開發者工具（F12），可以看到每一次在列表項展現出來時， .dropdown 類後還增加了一個.open 的類；不用多說想肯定就是這個類在起作用，我們再繼續回到CSS源碼去可以看到：

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

看到這裡也應該不用過多說明了，添加了這個 .open 類別時， .dropdown-menu 自然的就顯示出來了。

下拉式選單修飾

下拉分隔線

在Bootstrap框架中的下拉式選單也提供了下拉分隔線，假設下拉式選單有兩個群組，那麼群組與群組之間可以透過新增一個空的

，並且給這個

新增類別名稱.divider 來實現新增下拉分隔線的功能。

對應的樣式代碼：

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

選單標題

上一小節講解透過新增divider 可以將下拉式選單分組，為了讓這個分組更明顯，也可以為每組新增一個頭部（標題）：

第一部分選單頭部

。

從原始碼比較關鍵的兩個點是：標題的字體顏色是： color: #777; ，還有內填 padding: 3px 20px;

對齊方式

Bootstrap框架中下拉選單預設是左對齊也就是新增.dropdown-menu-left 類別所能達到的效果，如果你想讓下拉式選單相對於父容器右對齊時，可以在.dropdown-menu 上（也就是你的選單項目的ul）加上一個.pull-right 或.dropdown-menu-right 類別名，如下所示：

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

原始碼如下：

.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}

當然你只進行這樣的設定的話，可能還會有一些奇怪的情況出現，比如列表項目跑到屏幕最右邊去了，所以同時一定要為 .dropdown 添加 float:left 樣式。

.dropdown{ float: left;}

 

菜单项状态

下拉菜单项的默认的状态（不用设置）有悬浮状态（ :hover ）和焦点状态（ :focus ）：（包括下面提到的状态都必须在li中包含a标签才有- -）

下拉菜单项除了上面两种状态，还有 当前状态 （ .active ）和 禁用状态 （ .disabled ）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名如：

桃

我们可以实现下面这样的效果：

 

按钮

我们在 《Bootstrap入门书籍之（二）表单》 中，已经了解过了Bootstrap中按钮的使用，在这里我们继续进行一些扩展！

按钮组及工具栏

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。这个时候我们就会需要用到按钮组

对于结构方面，非常的简单。使用一个名为 .btn-group 的容器，把多个按钮放到这个容器中。如：

<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>

如何转化成工具栏呢？只需要再用一个 .btn-toolbar 的内容，将我们的 .btn-group 再进行一次包裹，同时，我们还可以使用 .btn-group-lg 大按钮组、 .btn-group-xs :超小按钮组这一系列的类添加到 .btn-group 容器来进行对一组按钮进行大小控制如下：

<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>

上面两段代码效果如下：

 

嵌套分组

这里的嵌套分组其实就是在分组按钮中嵌套了一个下拉菜单。使用的时候，只需要把当初制作下拉菜单的 .dropdown 的容器换成 .btn-group ，并且和普通的按钮放在同一级。如下所示：

<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> <button class="btn btn-default" type="button">关于</button></div>

当然我们还可以从 水平按钮组 变成 垂直分组 ，只需要在水平分组的最外层容器的类名 .btn-group 替换成 .btn-group-vertical ，就可以实现垂直分组的效果。

按钮的向下向上三角形

我们在下拉菜单和嵌套分组都都看到了一个按钮的向下三角形，我们是通过在 标签中添加一个 标签元素，并且命名为 caret ，这个三角形完全是通过CSS代码来实现的：

.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;}

有的时候我们的下拉菜单会 向上弹起 ，这个时候我们的 三角方向需要朝上 显示，实现方法：需要在 .btn-group 类上追加 dropup 类名（这也是做向上弹起下拉菜单要用的类名）。

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

那么现在就来对比一下，上面代码以及类的添加可以达到的不同效果：

 

导航

导航对于一位前端开发人来说眼应该都不陌生。可以说，每一个网页里面都会有导航的存在，便于用户查找网站所提供的各项功能服务。那么如何使用Bootstrap框架制作各式各样的导航呢？

基础样式

Bootstrap框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式 不提供 默认的导航样式，必须附加另外一个样式才会有效，比如 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>

当然他们同样也有 当前状态 （ .active ）和 禁用状态 （ .disabled ），我们给第一个导航添加当前状态，最后一个导航添加禁用状态，实现效果如下：

 

修饰

垂直堆叠的导航

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 .nav-pills的基础上添加一个 .nav-stacked 类名即可，同时，我们和下拉菜单一样，同样可以使用组之间的分割线例，只需要在导航项之间添加

,如：

<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>

复制到浏览器中看看效果吧！

你应该已经发现了在垂直导航中，每一个导航项都是占 文字居左 ，占100%的父容器宽度的，如果你想有响应式的效果，应该和栅格系统一起使用，另外为什么不试试使用 nav-tabs 来实现垂直导航呢？看看效果，你就会明白为什么不使用了。

自适应导航

自适应导航和前面制作自适应按钮是一样的，不过更换了一个类名， .nav-justified 。当然他需要和 .nav-tabs 或者 .nav-pills

配合在一起使用。 它是响应式的，在宽度足够时，给多个导航项，均分空间；在达到一个临界值（768px）时，它会和垂直导航一样：每一项都充满父容器的宽度，不同的是，他的文字是 居中显示 的

导航中加下拉菜单（二级导航）

前面介绍的都是使用制作一级导航，但很多时候，在Web页面常常会用到二级导航的效果。

在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名 .dropdown ，同时在 li 中嵌套另一个列表 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>

这里的话不进行太多的讲解，与上面的嵌套按钮效果一致。

面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（ 当前位置 ）。一般在文章、博客、列表处用的比较多，需要用到 .breadcrumb 类。

<ol class="breadcrumb"> <li><a href="#">个人首页</a></li> <li><a href="#">标签</a></li> <li class="active">Bootstrap</li></ol>

可以实现的效果：

 

是不是很简洁明了呢？

关于Bootstrap入门书籍之（四）菜单、按钮及导航的相关知识就给大家介绍这么多，下篇给大家介绍Bootstrap入门书籍之（五）导航条、分页导航，感兴趣的朋友继续关注，谢谢！