BootStrap -- API学习（五）

*****************************菜单、按钮及导航****************************
下拉菜单：下面的元素一个都不能少，少一个都没有下拉效果。
    <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>
        <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容器：<div class="dropdown"></div>
    按钮:
        data-toggle="dropdown"中的值为容器类
        <button class="btn dropdown-toggle" type="button" data-toggle="dropdown" id="dropdownMenu"></button>
    下拉元素:
        aria-labelledby="dropdownMenu1"中的值对应下拉按钮id
        li中要有超链接的，因为是菜单，需要跳转，不是下拉框
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#">下拉菜单项</a></li>
        </ul>
        
下拉菜单的原理：
    不知道大神们以前怎么控制显隐的，反正我是给div 配一个单独的class。通过class的添加和移除配合display:none来控制显隐。
    BootStrap也是这么做的，给dropdown-menu来控制一个类，控制class的display:none的存在
    
下拉菜单的下拉分割线:(为了使下拉内容分组明显)
    使用添加一个<li class="divider"></li>
    bootstrap源码:
        .dropdown-menu .divider {
          height: 1px;
          margin: 9px 0;
          overflow: hidden;
          background-color: #e5e5e5;
        }

下拉菜单的标题:(为了使内容分组更加明显)
    <li class="dropdown-header">标题</li>

下拉菜单的对其:
    左对齐: pull-left
    右对齐: pull-right

下拉菜单的状态:
    激活：active
    禁用：disable
    
按钮组:btn-group   （联想到表单组form-group）

按钮工具栏和按钮组尺寸:
    btn-toolbar : 将按钮组聚合到一起
    btn-group-n(n = xs sm md lg)    改变按钮组的尺寸
    
按钮嵌套：
    1.btn-group嵌套button和btn-group
    2.嵌套下拉菜单的时候，不要使用dropdown容器，会改变样式
    <div class="btn-group">
        <button class="btn btn-default" type="button">首页</button>
        <div class="btn-group">
                <button class="btn btn-default dropdown-toggle" id="dropdownMenu" type="button" data-toggle="dropdown">
                    产品展示<span class="caret"></span></button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
                    <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>
        <button class="btn btn-default" type="button">联系我们</button>
        <button class="btn btn-default" type="button">关于我们</button>
    div>
    
按钮垂直分组：使用垂直分组类
    <div class="btn-group-vertical"></div> 
        
等分按钮：水平按钮评分宽度 btn-group-justified
    注意：官方表示，等分按钮的时候最好使用<a class="btn btn-default"></a>的形式
    <div class="btn-wrap">
        <div class="btn-group btn-group-justified">
            <a class="btn btn-default" href="#">首页</a>
            <a class="btn btn-default" href="#">中间</a>
            <a class="btn btn-default" href="#">尾部</a>
        </div>
    </div>
    
按钮下拉菜单:
    1.效果和上述下拉菜单是一样的效果，只不过实现不同,将dropdown换成btn-group
      <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>
      
下拉菜单的三角方向：class="caret"  在容器上加类dropup 或者 dropdown
    1.三角向上，选项页向上: dropup
    2.三角向下，选项页向下: dropdown
    <div class="btn-group dropup">
      <button class="btn btn-default" type="button" id="dropdownMenu1" data-toggle="dropdown">按钮下拉菜单<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          <li><a href="">按钮下拉菜单</a></li>
          <li><a href="">按钮下拉菜单</a></li>
          <li><a href="">按钮下拉菜单</a></li>
          <li><a href="">按钮下拉菜单</a></li>
      </ul>
    </div>
    
导航：
    样式:nav-pills   nav-tabs
    例子：必须这样给
    <ul class="nav nav-tabs">
        <li><a href="##">Home</a></li>
        <li><a href="##">CSS3</a></li>
        <li><a href="##">Sass</a></li>
        <li><a href="##">jQuery</a></li>
        <li><a href="##">Responsive</a></li>
    </ul>
    
标签式导航:nav-tabs
    1.激活<li class="active"><a href="#">激活</a></li>
    2.禁用<li class="disabled"><a href="#">禁用</a></li>
    
囊式导航:nav-pills
    1.激活<li class="active"><a href="#">激活</a></li>
    2.禁用<li class="disabled"><a href="#">禁用</a></li>
    
垂直导航: nav-stacked

适应导航: nav-justified

二级导航:
    直接将导航中的li作为下拉导航菜单的容器
    <ul class="nav nav-pills">
      <li class="active"><a href="##">首页</a></li>
      <li class="dropdown">
          <a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">教程<span class="caret"></span></a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <li><a href="##">CSS3</a></li>
            <li><a href="##">Sass</a></li>
            <li><a href="##">jQuery</a></li>
            <li><a href="##">Responsive</a></li>
          </ul>
      </li>
      <li><a href="##">关于我们</a></li>
    </ul>
    
面包屑：使用的使无序列表 breadcrumb
    <ol class="breadcrumb">
      <li><a href="#">首页</a></li>
      <li><a href="#">我的书</a></li>
      <li class="active">《图解CSS3》</li>
    </ol>