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

 本文章转载于http://blog.csdn.net/a316212802/article/details/24940577

1、Glyphicons图标

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

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

那么如何使用呢？

如何使用

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

不要和其它组件混合使用

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

[html] view plain copy print ?

1. <button type="button" class="btn btn-default btn-lg">  
2. <span style="white-space:pre">      </span><span class="glyphicon glyphicon-star"></span> Star<span style="white-space:pre">    </span>  
3. <span style="white-space:pre">      </span></button>  
4. <span style="white-space:pre">      </span><button type="button" class="btn btn-default btn-lg">  
5. <span style="white-space:pre">      </span><span class="glyphicon glyphicon-search"></span>  
6. <span style="white-space:pre">      </span></button>  

小例子：

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

 预览：

2、下拉菜单

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

1）、案例

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

代码段：

[html] view plain copy print ?

1. <div class="dropdown">  
2.         <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">  
3.             下拉菜单  
4.             <span class="caret"></span>  
5.         </button>  
6.         <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">  
7.             <li role="presentation"><a href="#" role="menuitem" tabindex="-1">Action</a></li>  
8.             <li role="presentation"><a href="#" role="menuitem" tabindex="-1">Another action</a></li>  
9.             <li role="presentation"><a href="#" role="menuitem" tabindex="-1">something else here</a></li>  
10.             <li role="presentation" class="divider"></li>  
11.             <li role="presentation"><a href="#" role="menuitem" tabindex="-1">separated link</a></li>  
12.         </ul>  
13.     </div>  
14.       

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

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

预览效果：

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

标题

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

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

禁用的菜单项

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

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

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

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

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