【Bootstrap学习笔记】3.图标菜单按钮组件

七、图标菜单按钮组件

学习内容

• 小图标组件
• 下拉菜单组件
• 按钮组组件
• 按钮式下拉菜单

● 图标组件

1、建议配合<i>标签或<span>标签来使用
2、两个样式.glyphicon .glyphicon-*需要组合使用，如<span class="glyphicon glyphicon-user"></span>

<buttom class="btn btn-default btn-lg">
    <i class="glyphicon glyphicon-user"> User</i>
 </buttom>

 <buttom class="btn btn-default">
     <i class="glyphicon glyphicon-user"> User</i>
 </buttom>

 <buttom class="btn btn-default btn-sm">
     <i class="glyphicon glyphicon-user"> User</i>
 </buttom>

 <buttom class="btn btn-default btn-xs">
     <i class="glyphicon glyphicon-user"> User</i>
 </buttom> 

● 下拉菜单组件

概念：下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。
1、需要包裹在一个class为.dropdown（或.dropup）的容器内
2、需要一个点击元素，可以是超链接，可以是图片，可以是button等，用data-toggle="dropdown"来标识，如<button data-toggle="dropdown"></button>
3、需要一个点击后产生的列表项，用class.dropdown-menu来标识
4、列表项的对齐方式可以用class.dropdown-menu-right来约束
5、分隔符用class.divider来定义，<li class=divider></li>
6、禁用.disabled
7、.dropdown-header用于给下拉菜单添加标题
8、.dropup用于向上拉，三角箭头会自动改变成向上的方向
9、.dropdown的容器加上class.open可默认打开下拉选项列表

<!--需要放在一个.dropdown的容器内-->
<div class="dropdown">
    <!--点击元素-->
    <button class="btn btn-default btn-lg" data-toggle="dropdown">
        这是一个下拉按钮
        <span class="caret"></span>
    </button>
    <a href="#" data-toggle="dropdown">这是一个超链接
        <span class="caret"></span>
    </a>
    <!--点击后产生的列表项-->
    <ul class="dropdown-menu">
        <li class="dropdown-header">这是一个标题</li>
        <li><a href="#">首页</a></li>
        <li><a href="#">资讯</a></li>
        <li><a href="#">科技</a></li>
        <li class="divider"></li>
        <li class="disabled"><a href="#">关于</a></li>
    </ul>
</div>

● 按钮组组件

.btn-group 该 class 用于形成基本的按钮组。在.btn-group中放置一系列带有 class.btn的按钮。
.btn-toolbar 该 class 有助于把几组<div class="btn-group">结合到一个<div
class="btn-toolbar">中，一般获得更复杂的组件。 .btn-group-lg, .btn-group-sm,
.btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

<div class="btn-toolbar">
   <div class="btn-group btn-group-lg">
        <buttom class="btn btn-default">A</buttom>
        <buttom class="btn btn-default">B</buttom>
        <buttom class="btn btn-default">C</buttom>
    </div>
    <div class="btn-group">
        <buttom class="btn btn-default">D</buttom>
        <buttom class="btn btn-default">E</buttom>
        <buttom class="btn btn-default">F</buttom>
    </div>
    <div class="btn-group btn-group-sm">
        <buttom class="btn btn-default">G</buttom>
        <buttom class="btn btn-default">H</buttom>
        <buttom class="btn btn-default">I</buttom>
    </div>
    <div class="btn-group btn-group-xs">
        <buttom class="btn btn-default">J</buttom>
        <buttom class="btn btn-default">K</buttom>
        <buttom class="btn btn-default">L</buttom>
    </div>
</div>
<BR>
<div class="btn-group-vertical">
    <buttom class="btn btn-default">1</buttom>
        <buttom class="btn btn-default">2</buttom>
        <buttom class="btn btn-default">3</buttom>
</div>

嵌套一个分组
示例：按钮组嵌套一个dropdown

1、这里是嵌套一个分组，不是嵌套一个dropdown，所以在按钮组的后面紧接着写一个<div class="btn-group"></div>
2、添加一个点击元素，给元素添加class.dropdown-toggle，同时data-toggle="dropdown"也要保留
3、添加点击后生成的项目列表，同样给与class.dropdown-menu
4、和之前的dropdown相比，区别在于没有包裹在一个.dropdown的容器内，而是给点击元素增加一个class.dropdown-toggle

<div class="btn-group btn-group-lg">
    <button class="btn btn-default">A</button>
    <button class="btn btn-default">B</button>
    <button class="btn btn-default">C</button>
    <div class="btn-group btn-group-lg">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉按钮
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li class="divider"></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</div>

● 按钮式下拉菜单

同上一节的嵌套dropdown
可以做一个分割式，左边是按钮，右边是下拉
向上弹出：给.btn-group容器增加一个class.dropup

<div class="btn-group btn-group-lg">
<button class="btn btn-default">A</button>
    <button class="btn btn-default">B</button>
    <button class="btn btn-default">C</button>
    <div class="btn-group btn-group-lg dropup">
       <buttom class="btn btn-default">上拉按钮</buttom>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li class="divider"></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
    <div class="btn-group btn-group-lg">
        <buttom class="btn btn-default">下拉按钮</buttom>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">科技</a></li>
            <li class="divider"></li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</div>