Bootstrap（四）——图标、下拉菜单 20.3.20

1.Bootstrap字体图标

1.1 创建及注意事项

1. 创建一个<span>标签，class属性为其添加图标类。
2. 注意在同一个标签元素中图标类不能与其他类同时存在，而且该标签元素不能包含文本内容和子元素。
3. 如果希望添加说明文字，在<span>标签之外加，且添加一空格使显示更加美观。

点击查看Bootstrap提供的图标

	<span class="glyphicon glyphicon-arrow-left"></span>
	<span class="glyphicon glyphicon-arrow-left"></span> 向左箭头

1.2 按钮中显示图标

	<button class="btn btn-success">
	    <span class="glyphicon glyphicon-arrow-left"></span> 向左箭头
	</button>

1.3 input标签响应显示图标

	<div class="container">
	    <div class="row">
	        <div class="col-sm-2"></div>
	        <div class="col-sm-8">
	            <form action="" class="form-horizontal">
	                <div class="form-group">
	                    <label class="control-label col-sm-2">name:</label>
	                    <div class="input-group col-sm-6">
	                        <input class="form-control">
	                        <!--反馈图标 -->
	                        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
	                    </div>
	                </div>
	            </form>
	        </div>
	        <div class="col-sm-2"></div>
	    </div>
	</div>

2.Bootstrap下拉菜单（必须提前引入Jquery）

2.1 创建注意

1. 引入bootstrap文件夹中的js类，同时引入jquery库（各版本下载地址），注意先引入jquery后引入bootstrap自带js文件，顺序不要颠倒，否则不能正常显示下拉菜单。

	<script src="../static/js/jquery-3.3.1.min.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>

2. 将下拉菜单触发器和下拉菜单都包裹在加上dropdown 类的<div>标签中；
3. 触发按钮必须加上dropdown-toggle类，属性data-toggle的值必须是dropdown；
4. 下拉菜单的ul必须加上dropdown-menu类。

	<div class="dropdown">
	    <!--1. 表明这是下拉菜单的触发器 -->
	    <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
	        <span class="caret"></span>option
	    </button>
	    <!-- 2.表明这是下拉菜单的内容 -->
	    <ul class="dropdown-menu">
	        <li><a href="">add</a></li>
	        <li><a href="">delete</a></li>
	        <li><a href="">update</a></li>
	    </ul>
	</div>

2.2 菜单内容添加标题

	<li class="dropdown-header"><a href="">标题</a></li>

2.3 菜单内容添加分割线

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

3.4 菜单内容不可选

	<li class="disabled">不可选</li>

3.5 分裂式下拉菜单

	<div class="dropdown">
	    <div class="btn-group">
	        <button class="btn btn-success">option</button>
	        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
	            <span class="caret"></span>
	        </button>
	        <!-- 表明这是下拉菜单的内容 -->
	        <ul class="dropdown-menu">
	            <li class="dropdown-header">1</li>
	            <li class="divider"></li>
	            <li><a href="">add</a></li>
	            <li class="divider"></li>
	            <li class="disabled"><a href="">delete</a></li>
	            <li class="divider"></li>
	            <li><a href="">update</a></li>
	        </ul>
	    </div>
	</div>

3.6 向上弹出菜单

	<div class="dropdown">
	    <div class="btn-group dropup">
	        <button class="btn btn-success">option</button>
	        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
	                aria-expanded="false">
	            <span class="caret"></span>
	        </button>
	        <!-- 表明这是下拉菜单的内容 -->
	        <ul class="dropdown-menu">
	            <li class="dropdown-header">1</li>
	            <li class="divider"></li>
	            <li><a href="">add</a></li>
	            <li class="divider"></li>
	            <li class="disabled"><a href="">delete</a></li>
	            <li class="divider"></li>
	            <li><a href="">update</a></li>
	        </ul>
	    </div>
	</div>