码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap-11

时间:2015-12-08 18:17:50      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

下拉菜单(基本用法)

  在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。

  注意:因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件,所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

  

<div class="dropdown">
<button class="btn btn-default 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 role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
   …
   <li role="presentation" class="divider"></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

  解析:1.使用名为dropdown的容器包裹整个下拉菜单元素    

<div class="dropdown"></div>

     2.使用了一个<button>按钮作为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一直

data-toggle="dropdown"

     3.下拉菜单项使用一个ul列表,并且一个类名为"dropdown-menu"

<ul class="dropdown-menu">

  

下拉菜单(下拉分割线)

  在bootstrap框架中的下拉菜单还提供了下拉分割线,假设下拉菜单有两个组,那么组与组之间可以听过添加一个空的<li>,并且给这个li添加类名"divider"来实现添加下拉分割线的功能。

 

下拉菜单(菜单标题)

  可以给每个组添加一个头部(标题) .dropdown-header

 

下拉菜单(对齐方式)

  实现右对齐方法:可以在dropdown-menu上添加一个pull-right或者dropdown-menu-right类名。

  dropdown-menu-left:左对齐

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle dropdown-menu-right" type="button" id="dropdownMenu1" data-toggle="dropdown">
    食物
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="dropdown-header">水果</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">桃</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation" class="dropdown-header">蔬菜</li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">苹果</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">香蕉</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">梨</a></li>
  </ul>
</div> 

  

下拉菜单(菜单项状态)

  下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)

  除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled),这两种状态使用方法只需要在对应的菜单项上添加对应的类名即可。

 

bootstrap-11

标签:

原文地址:http://www.cnblogs.com/jodie-blog/p/5029698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!