Bootstrap组件
无数可复用的组件(包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能)
一、glyphicons字体图标
1、引用：bootstrap框架内自带，可直接使用<glyphicons图标一般是收费的，但是他们允许Bootstrap免费使用>
2、如何使用： 图标类不能和其他组件直接联合使用，故应该创建一个嵌套的<span>标签，并将图标应用到该标签上。
如： <span class="glyphicon glyphicon-start"></span> -- 展示在页面上的效果如下所示
PS:为了更好的页面展示效果<好设置正确的内补(padding)>，务必在图标和文本之间添加一个空格
如下：<span class="glyphicon glyphicon-star"></span> star --- 展示在页面上的效果如下所示
3、注意事项(提高图标的可访问性)
<1>、图标只是单纯的去美化和修饰 如：<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
aria-hidden="true" 可以告诉屏幕阅读器，该图标是只是单纯的修饰页面的UI元素
<2>、图标具有特定的指向和含义 如：<button type="button" class="btn btn-default" aria-label="add"><span class="glyphicon glyphicon-plus"></span></button> --- 展示在页面上的效果如下所示
此处的"+"有新增的语义，并且也有新增的操作功能，为了提高可访问性，在button中添加aria-label="add",更有利于屏幕阅读器识别
<2-1>、如果你使用图标是为了表达某些含义（不仅仅是为了装饰用），请确保你所要表达的意思能够通过被辅助设备识别。
如：包含额外的内容并通过 .sr-only 类让其在视觉上表现出隐藏的效果，如下案例：(class="sr-only")
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>Enter a valid email address
</div> --- 展示在页面上的效果如下所示
二、下拉菜单和按钮
下拉菜单的组成方式：button+ul列表 其次还有一个图标的向上显示和向下显示 外围需要添加一个必须包含样式 position:relative; 的元素。实例如下：
<div class="dropdown"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="true"> dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">action1</a></li> <li><a href="#">action2</a></li> <li><a href="#">action3</a></li> </ul> </div>
展示的效果如下：
1、下拉菜单的标题，给当前的li添加类 class="dropdown-header" 如：<li class="dropdown-header">下拉按钮标题</li>
2、下拉菜单的分割线，给当前的li添加类和对应角色 role="separator" class="divider" 如：<li role="separator" class="divider"></li>
PS: aria-* 讲解
aria-expanded
aria-labelledby 和 aria-label
aria-expanded表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。
aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。
