bootstrap框架学习笔记四（按钮、导航、导航条）

菜单、按钮及导航

下拉菜单

在使用前调用压缩好的“bootstrap.min.js”文件。
因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。
一个简单的示例：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuFood" data-toggle="dropdown">
    选择你喜欢的水果
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuFood">
        <li role="presentaiton"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
        <li role="presentaiton"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
        <li role="presentaiton"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
        <li role="presentaiton"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    </ul>
</div>

1.自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:data -toggle=”dropdown”
2.将tabIndex赋值为-1，则在使用[Tab]键时，此元素被忽略。
3.使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是role=”button”
4.aria-label属性：
正常情况下，会在表单里给input组件指定对应的label，当用户tab到输入框时，读屏软件就会读出相应label里的文本。
如：<label for=”username”>用户名：</label><input type=”text” id=”username”/>
当没有给输入框设计对应的label文本的位置时，aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。
如：<input type=”text” aria-label=”用户名”/>
此时，当焦点落到该输入框时，读屏软件就会读出aria-label里的内容，即“用户名”。
aria-labelledby属性：
当想要的标签文本已在其他元素中存在时，可以将其值为该元素的id

使用方法：
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

<ul class="dropdown-menu">

效果如下：

实现原理
通过js技术手段，给父容器“div.dropdown”添加或移除类名“open”来控制下拉菜单显示或隐藏。也就是说，默认情况，“div.dropdown”没有类名“open”，当用户第一次点击时，“div.dropdown”会添加类名“open”；当用户再次点击时，“div.dropdown”容器中的类名“open”又会被移除。

下拉分割线

<li role="presentation" class="divider"></li>

实现原理：

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

菜单标题

<li role="presentation" class="dropdown-header">第一部分菜单头部</li>

每一部分的头部
示例：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div> 

效果：

对齐方式
下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名，
与“dropdown-menu-right”相反的类名“dropdown-menu-left”，其效果就是让下拉菜单与父容器左边对齐

按钮

使用方法：

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>

不管使用什么标签，“.btn-group”容器里的标签元素需要带有类名“.btn”。
效果如下：

按钮组的四个角都是圆角！