一、Glyphicons 字体图标

1、所有可用的图标

见​​https://v3.bootcss.com/components/#glyphicons​​

 

2、如何使用

出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格；

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_html

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_bootstrap_02

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_html_03

注意：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_css_04

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-search" aria-hidden="true"/> 搜索
    </button>
    <button type="button" class="btn btn-default btn-lg" aria-label="Left Align">
      <span class="glyphicon glyphicon-align-left" aria-hidden="true"/> 左对齐
    </button>
    <button type="button" class="btn btn-default btn-lg">
      <span class="glyphicon glyphicon-star" aria-hidden="true"/> Star
    </button>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_html_05

 

3、附加

alert 组件中所包含的图标是用来表示这是一条错误消息的，通过添加额外的 .sr-only 文本就可以让辅助设备知道这条提示所要表达的意思了；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
  </head>
  <body>
    <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>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_bootstrap_06

 

二、下拉菜单

1、下拉菜单实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码；

要想实现交互效果，需要用到下拉菜单的 JavaScript 插件；

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_bootstrap_07

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <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="#">Separated link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_css_08

 

2、菜单向上弹出

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="dropup">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropup
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
        <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="#">Separated link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_css_09

 

3、对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐；

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_css_10

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
        <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="#">Separated link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_bootstrap_11

 

4、标题

在任何下拉菜单中均可通过添加标题来标明一组动作；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">我就是标题</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="#">Separated link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_css_12

 

5、分割线

为下拉菜单添加一条分割线，用于将多个链接分组；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">我就是标题</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="#">Separated link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_html_13

 

6、禁用的菜单项

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项；

代码演示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title></title>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <!-- 引入JS文件:必须先引入jquery再引入bootstrap -->
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
       aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
        <li><a href="#">Regular link</a></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">Another link</a></li>
      </ul>
    </div>
  </body>
</html>

运行结果：

【Bootstrap】011-组件：Glyphicons 字体图标、下拉菜单_bootstrap_14