5、bootstrap-图标菜单按钮组件

一、小图标组件

1、概要

Bootstrap 提供了免费的很多小图标，具体可以参考中文官网的组件链接：免费小图标

2、基础使用

说明
可以使用<i>或<span>标签来配合使用

基础应用

<i class="glyphicon glyphicon-home"></i>
<span class="glyphicon glyphicon-home"></span>

也可以结合按钮

<button class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-home"></span>
</button>
<button class="btn btn-default">
    <span class="glyphicon glyphicon-shopping-cart"></span>
</button>
<button class="btn btn-default btn-sm">
    <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
<button class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon glyphicon-menu-hamburger"></span>
</button>

二、下拉菜单组件

1、概要

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。注意要导入jquery.js和bootstrap.js插件

2、基础使用

按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置data-toggle="dropdown"才能有效。对于菜单部分，设置 class="dropdown-menu"才能自动隐藏并添加固定样式。设置 class="caret"表示箭头，可上可下。

基础应用

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="dropdown">
    <button class="btn btn-default" data-toggle="dropdown">下拉菜单
      <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>

设置向上触发
```
<div class="dropup">
```
菜单项居右对齐，默认值是 dropdown-menu-left
```
<ul class="dropdown-menu dropdown-menu-right">
```

设置菜单的标题，不要加超链接

<li class="dropdown-header">网站导航</li>

设置菜单的分割线
```
<li class="divider"></li>
```

设置菜单的禁用项

<li class="disabled"><a href="#">产品</a></li>

让菜单默认显示
```
<div class="dropdown open">
```

三、按钮组组件

1、概要

按钮组就是多个按钮集成在一个容器里形成独有的效果。

2、基础使用

基础应用

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

将多个按钮组整合起来便于管理

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 左 </button>
        <button type="button" class="btn btn-default"> 中 </button>
        <button type="button" class="btn btn-default"> 右 </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default"> 1 </button>
        <button type="button" class="btn btn-default"> 2 </button>
        <button type="button" class="btn btn-default"> 3 </button>
    </div>
</div>

设置按钮组大小

<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs">

嵌套一个分组

<div class="btn-group">
    <button type="button" class="btn btn-default">左</button>
    <button type="button" class="btn btn-default">中</button>
    <button type="button" class="btn btn-default">右</button>
    <div class="btn-group">
    <!--必须使用自定义属性 data-toggle才能点击显示隐藏 -->
    <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><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</div>

设置按钮组垂直排列
```
<div class="btn-group-vertical">
```

设置两端对齐按钮组，使用<a>标签

<div class="btn-group-justified">
    <a type="button" class="btn btn-default">左</a>
    <a type="button" class="btn btn-default">中</a>
    <a type="button" class="btn btn-default">右</a>
</div>

如果需要使用<button>标签，则需要对每个按钮进行群组

<div class="btn-group-justified">
    <div class="btn-group">
        <button type="button" class="btn btn-default">左</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">中</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">右</button>
    </div>
</div>

四、按钮式下拉菜单

1、概要

这个下拉菜单其实和下拉菜单组件一样，只不过，这个是在群组里，不需要<div>声明class="dropdown"。

2、基础使用

群组按钮下拉菜单

<h1>按钮组下拉菜单</h1>
<div class="btn-group">
    <button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜单
        <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>
</body>
</html>

文件与下拉分开按钮下拉菜单

<h1>分裂式按钮组下拉菜单</h1>
<div class="btn-group">
    <button type="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><a href="#">产品</a></li>
        <li><a href="#">关于我们</a></li>
    </ul>
</div>

向上弹出菜单
```
<div class="btn-group dropup">
```