Bootstrap 图标菜单和按钮组件（五）

一、小图标组件

      具体图标样式class名称参考官网。

     可配合 <span> 或 <i> 使用 ，也可配合 <button> 使用     

<button class="btn btn-primary btn-lg">
   <span class="glyphicon glyphicon-bell"></span>
</button>

 

二、下拉菜单组件    

<div class="dropdown">
      <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      
      <ul class="dropdown-menu dropdown-menu-right">
        <li class="dropdown-header">网站导航</li>
        <li class="divider"></li>
        <li><a href="#">首页</a></li> 
        <li><a href="#">资讯</a></li> 
        <li><a href="#">产品</a></li> 
        <li class="disabled"><a href="#">关于</a></li> 
      </ul>
</div>

    1、下拉菜单必须有一个被点击的元素，可以是超链接，可以是图片或者button 按钮（多），按钮需要设置 data-toggle ="dropdown" 才能有效(相当于在 dropdown 处切换 class="open" )。

    2、外边要有一个容器 .dropdown 包含被点击的元素和被触发的列表项（即菜单） 

    3、菜单部分，设置 class="dropdown-menu" 才能自动隐藏并添加固定样式

    4、设置 class="caret" 表示箭头，可上可下。

    

.dropdown  //  下拉菜单

.dropdown.open   //  菜单列表项默认显示

.dropup      //   上拉菜单

.dropdown-menu  //  菜单列表项

.dropdown-menu-left  //  菜单项目左对齐，默认为左

.dropdown-menu-right  //  菜单项目右对齐

.dropdown-header  //  网站导航，设置菜单标题，不要加超链接

.divider  //  菜单分割线

.disabled  //  菜单禁用项  

 

三、按钮组组件

<div class="btn-toolbar">
      <div class="btn-group btn-group-lg">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
      </div>
      <div class="btn-group">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>         
      </div>
</div>

 .btn-group    //  多个按钮 集成在该容器里

 .btn-toolbar    //  多个按钮组 整合在该容器里，便于管理。

 

//  设置按钮组大小（从大到小）

 .btn-group-lg   

 不设置

 .btn-group-sm    

 .btn-group-xs    

 

四、按钮式下拉菜单（嵌套一个分组）

<div class="btn-toolbar">
      <div class="btn-group">
        <button class="btn btn-default">左</button>
        <button class="btn btn-default">中</button>
        <button class="btn btn-default">右</button>
         <div class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              下拉菜单
              <span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu dropdown-menu-right">
              <li class="dropdown-header">网站导航</li>
              <li class="divider"></li>
              <li><a href="#">首页</a></li> 
              <li><a href="#">资讯</a></li> 
              <li><a href="#">产品</a></li> 
              <li class="disabled"><a href="#">关于</a></li> 
            </ul>
        </div>
      </div>
</div>

 .btn-group    //  嵌套一个分组，还用 .btn-group，而不是一个下拉菜单

 .dropdown-toggle    //   在 <button> 中添加类 dropdown-toggle , 增加了下拉菜单圆角样式

 

 在 .btn-group 处替换类名，显示不同的效果

 .btn-group-vertical    //  设置按钮组垂直排列（竖着排）

 .btn-group-justified    //  设置两端对齐按钮组，使用的是 <a> 标签 ，如果需要使用 <button> 需要在标签外设置 div.btn-group

 .btn-group.dropup     //   向上弹出式  

 

五、分裂式按钮下拉菜单

 可以加 两个 <button> 使得按钮下拉菜单两个 button 分体式（中间有竖线隔开）显示。