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

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

<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" class="active"><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="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div>

Bootstrap系列 -- 28. 下拉菜单状态的更多相关文章

  1. Bootstrap系列 -- 24. 下拉菜单基本用法

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

  2. Bootstrap系列 -- 27. 下拉菜单对齐方式

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...

  3. Bootstrap系列 -- 26. 下拉菜单标题

    Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...

  4. Bootstrap系列 -- 25. 下拉菜单分割线

    在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加 ...

  5. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  6. 【Bootstrap】 bootstrap-select2下拉菜单插件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  7. Bootstrap3系列:下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  8. bootstrap:导航下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. bootstrap中的下拉菜单

    下拉菜单必要的代码: <div  class="container"> <div  class="dropdown"> <butt ...

随机推荐

  1. Tomcat报java.lang.ClassNotFoundException: 1catalina.org.apache.juli.FileHandler

    最近在生产环境部署Tomcat的时候,在启动的时候,在控制台报"java.lang.ClassNotFoundException: 1catalina.org.apache.juli.Fil ...

  2. PHP中IP地址与整型数字互相转换详解

    这篇文章主要介绍了PHP中IP地址与整型数字互相转换详解,本文介绍了使用PHP函数ip2long与long2ip的使用,以及它们的BUG介绍,最后给出自己写的两个算法,需要的朋友可以参考下 IP转换成 ...

  3. ASP.NET5 MVC6入门教学之一(自己动手)

    等待微软开源大动作已经好几年了,终于ASP.NET 5发布了.今天给新手们写一个简单地教程,教你认识一下ASP.NET5 MVC6 1.安装kvm 首先,你需要以管理员权限打开cmd,执行如下的脚本: ...

  4. FZU 1608 Huge Mission(线段树)

    Problem 1608 Huge Mission Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description Oaiei ...

  5. CCDH证书

    4月份有些冲动,想报名考个CCDH证书,一直没有找到合适的付款方式,因为自己没有外币信用卡, 后来受到朋友的帮助,22号付了款,26号就去考了试,不是很满意,如果少冲动一下,多看两天书, 效果会更好.

  6. Linux下的C之2048

    #include <stdio.h> #include <stdlib.h> #include <curses.h> #include <time.h> ...

  7. POJ 1442 Black Box -优先队列

    优先队列..刚开始用蠢办法,经过一个vector容器中转,这么一来一回这么多趟,肯定超时啊. 超时代码如下: #include <iostream> #include <cstdio ...

  8. two sum - leetcode

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  9. Android网络之数据解析----SAX方式解析XML数据

    ​[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/ ...

  10. AC日记——逃跑的拉尔夫 codevs 1026 (搜索)

    1026 逃跑的拉尔夫  时间限制: 1 s    空间限制: 128000 KB    题目等级 : 黄金 Gold 题解       题目描述 Description   年轻的拉尔夫开玩笑地从一 ...