bootstrap学习下拉菜单整理

下拉菜单组件

基本格式 

 
<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"><a role="menuitem" tabindex="-1" href="#">...</a></li>
         ......
  </ul>
</div> 

实现原理 

button利用data-toggle在button父元素即.dropdown绑定了函数open，点击则使列表出现

相关

1.role以及aria 

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-无障碍阅读/

2.下拉分隔线

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

3.菜单标题

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

4.列表对齐button方式

首先为.dropdown添加

.dropdown{
  float: left;
}

①

与button右边对齐

<ul class="dropdown-menu pull-right（dropdown-menu-right）" role="menu" aria-labelledby="dropdownMenu1">

②

与button左边对齐  （默认对齐方式）

 

按钮

基本格式

按钮组

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

*span是一个倒三角的图标

工具栏

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
   ...
</div>

嵌套分组 （类似于导航菜单 button+ul制作）

<div class="btn-group">
<button class="btnbtn-default" type="button">...</button>
...
<div class="btn-group">
   <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">...<span class="caret"></span></button>
   <ul class="dropdown-menu">
         <li><a href="##">...</a></li>
　　　　　....
    </ul>
</div>
</div>

相关

1.垂直按钮菜单

将btn-group换成btn-group-vertical

2.等分按钮

.btn-group 加上 .btn-group-justified

3.三角图标

正三角

.btn-group中增加 downup

此时列表也会向上

倒三角

<span class="caret"></span>

导航（ul制作）

基本格式

<ul class="nav nav-tabs">
    <li><a href="##">...</a></li>
          ...
</ul>

 样式

①.nav-tabs

②.nav-pills

③垂直的导航    在.nav上添加nav-stacked

④自适应的导航  在.nav上添加nav-justified

面包屑导航

基本格式

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>