Bootstrap系列 -- 28. 下拉菜单状态
下拉菜单项的默认的状态(不用设置)有悬浮状态(: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. 下拉菜单状态的更多相关文章
- Bootstrap系列 -- 24. 下拉菜单基本用法
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...
- Bootstrap系列 -- 27. 下拉菜单对齐方式
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...
- Bootstrap系列 -- 26. 下拉菜单标题
Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样 <div class="dropdown"> <but ...
- Bootstrap系列 -- 25. 下拉菜单分割线
在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加 ...
- 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)
实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...
- 【Bootstrap】 bootstrap-select2下拉菜单插件
这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...
- Bootstrap3系列:下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- bootstrap:导航下拉菜单
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
- bootstrap中的下拉菜单
下拉菜单必要的代码: <div class="container"> <div class="dropdown"> <butt ...
随机推荐
- kettle初探
Kettle是Pentaho的一个组件,主要用于数据库间的数据迁移,到我用过的4.2版,还不支持noSQL,不知道4.4是不是支持了. Kettle自己有三个主要组件:Spoon,Kitchen,Pa ...
- c++字符串互相转换
1.string vs char* //string to char* string str; const char* cch = str.c_str(); ]; strcpy(ch,cch); // ...
- perl学习笔记
一.正则表达式 匹配一个文件中的某个单词,并打印出来 #!/usr/bin/perl use strict; use warnings; ; open(FILE, "< temp.pl ...
- 【读书笔记《Android游戏编程之从零开始》】15.游戏开发基础(剪切区域)
剪切区域也称为可视区域,是由画布进行设置的:它指的是在画布上设置一块区域,当画布一旦设置了可视区域,那么除此区域外,绘制的任何内容都将看不到:可视区域可以是圆形.矩形等等. 画布提供了三种设置可视区域 ...
- 内网穿透利器 Ngrok 使用教程
ngrok 服务可以分配给你一个域名让你本地的web项目提供给外网访问,特别适合向别人展示你本机的web demo 以及调试一些远程的API (比如微信公众号,企业号的开发) 下面开始教程 Step ...
- [转载]ExtJs4 笔记(5) Ext.Button 按钮
作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...
- 集合框架学习笔记<二>
1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...
- Flash剪贴板功能
做JS的都知道,如果不考虑浏览器的兼容问题,其实,JS本身的window.clipboardData对象是可以做到复制内容到剪贴板的功能,但除了IE浏览器,FF和Chrome浏览器都不支持.现在为了浏 ...
- iOS app上传错误集锦(转载)
1.工程里增加了版本自动更新. 2.未增加判断网络状态的类Reachability. 3.问题:error itms -90049 This bundel is invalid. The bundle ...
- js原生捕鱼达人(二)
昨天写到构造炮弹,有点小bug不知道大家发现没有,今天继续昨天的步骤 7>构造炮弹 思路和前面都是一样一样的 注意构造函数中需要考虑的属性 和 构造函数的原型上面的方法 <sc ...