3.1Bootstrap学习组件篇之下拉菜单、图标

痛定思痛。 2022-08-27 03:39 96阅读 0赞

**1、Glyphicons图标**

包括200个来自Glyphicon Halflings的字体图标。[Glyphicons][] Halflings 一般不允许免费使用，但是他们的作者允许Bootstrap免费使用。为了表示感谢，希望你在使用时加上[Glyphicons][] 的链接。

好多图标~~~⊙﹏⊙b汗

那么如何使用呢？

## 如何使用 ##

出于性能的考虑，所有图标都需要基类和单独的图标类。把下面的代码放在任何地方都能使用。为了留下正确的内补（padding），一定要在图标和文本之间加上一个空格。

#### 不要和其它组件混合使用 ####

图标 class 不能和其它元素联合使用，因为这些图标被设计为独立的元素、独立使用。

小例子：

把它们放在按钮，工具栏的按钮组中，导航或输入栏的前面都可以。

预览：

![Center][]

**2、下拉菜单**

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

1）、案例

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

代码段：

<div class="dropdown">
    		<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    			下拉菜单
    			<span class="caret"></span>
    		</button>
    		<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    			<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Action</a></li>
    			<li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li>
    			<li role="presentation"><a href="#" role="menuitem" tabindex="-1">something else here</a></li>
    			<li role="presentation" class="divider"></li>
    			<li role="presentation"><a href="#" role="menuitem" tabindex="-1">separated link</a></li>
    		</ul>
    	</div>

一开始的时候没有效果，而且官网上的Button的class中添加了sr-only导致触发事件的源隐藏掉了。所以去掉sr-only。

另：必须引入bootstrap.js（或者bootstrap.min.js）和jquery.js

预览效果：

![20140504105622906][]

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。

首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。

紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

第四个li标签中有个divider其实是一个分割线的样式类。

### 对齐选项 ###

给下拉菜单`.dropdown-menu`加上`.text-right` 使文字右对齐。

<div class="dropdown">
          <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu text-right" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
          </ul>
        </div>

### 标题 ###

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

<li role="presentation" class="dropdown-header">Dropdown header</li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>

<li role="presentation" class="dropdown-header">Dropdown header</li>        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>      </ul>    </div>

![20140504110552015][]

### 禁用的菜单项 ###

给下拉菜单中的`<li>`加上`.disabled`禁用链接。

继续修改上面的代码将Something else here行的代码进行替换

<li class="disabled" role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>

主要是在li标签中添加.disabled的样式类。

你运行之后可以查看效果，其实效果和上面的标题样式差不多，当你点击的时候会有一个禁用的图标显示。

![20140504110815640][]

[Glyphicons]: http://glyphicons.com/
[Center]: /images/20220824/056ac19531234c3b93b29df6d8198dc2.png
[20140504105622906]: /images/20220824/af4c61d0c111467a8056ad8e0fe80510.png
[20140504110552015]: /images/20220824/4af3b29e6ae349d5975c5023c3ea85ee.png
[20140504110815640]: /images/20220824/f4aafaf1ba2c4588b2594eedbd7e8fef.png