Boostrap（五）组件_pootstrap组件

一、Boostrap组件——字体图标

概述

包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。

如何使用字体图标

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

不要和其他组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。、

只对内容为空的元素起作用

图标类只能应用在不包含任何文本内容或子元素的元素上。

二、 Boostrap组件——下拉菜单

描述

用于显示链接列表的可切换、有上下文的菜单。

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里 。

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

 对齐

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。

为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

为 .dropdown-menu 添加 .dropdown-menu-left 类可以让菜单左对齐。

举例：<ul class= “dropdown-menu dropdown-menu-right”></ul>

分割线

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

举例：<li role="separator" class="divider"></li>

禁用的菜单项

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

实例：<li class=“disabled”><a href=“#”></a></li>