Bootstrap 字体图标，下拉列表组件的使用

Bootstrap 字体图标，下拉列表组件的使用

Glyphicons 字体图标

通过代码可以看到图标类的使用方法，图标类不能和其它组件直接联合使用，图标类只能应用在不包含任何文本内容或子元素的元素上。所以一般在Button的text前面搞一个span标签,用来渲染图标。

aria-label:有的图标可以没有文本，此时可以在代码中通过aria-label这个属性来表明图标的含义，比如这里的“左对齐”。

aria-hidden：设置其为true，表示图标只是为了装饰之用，避免读取设备的抓取，“aria”是“咏叹调，独唱曲”的意思，所以可以意会一下。

如果需要图标表达某种含义，可以通过.sr-only类进行表达，同时在视觉上隐藏，我的理解是：相当于制定各种约定，从而与外界环境交互。

示例：

<button type="button" class="btn btn-default" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default" aria-label="Go to cloud">
      <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default" aria-label="Email Me">
      <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default" aria-label="Glass, be care">
      <span class="glyphicon glyphicon-glass" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
    </button>

    <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>

Bootstrap 下拉列表(Dropdowns)

通过为.dropdown-menu 添加 .dropdown-menu-right 类设置下拉菜单右对齐是有问题的（如何解决？），如下图：

.dropdown-header可以为一组菜单添加标题;

可用直线为下拉菜单分组

添加 .disabled 类，可以禁用相应的菜单项。

示例：

<div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="false" aria-expanded="true">
      Dropdown
      <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">Dropdown header 1</li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">苹果</a></li>
        <li><a href="#">苹果</a></li>
        <li class="disabled"><a href="#">尼玛</a></li>
        <li class="dropdown-header">Dropdown header 2</li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>

参考：

Glyphicons 字体图标

Dropdowns