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 ...
随机推荐
- eclipse 快捷键Alt+/ 不能补充syso
通过两步来解决 1:Window->Preferences->General->Keys,输入content assist,把Binding改成alt + / 2:在下面,有一个wh ...
- rpm安装rpm-package报错:Header signature NOKEY 和 error: Failed dependencies:
以前经常遇到这个问题,一直未有记录,今天记录下来: 在安装rpm包的时候报错误如下: Question 1: warning: *.rpm: Header V3 DSA signature: NOKE ...
- PHP验证码
设计一个验证码类,在需要的时候可以随时调用 验证码类,保存为ValidateCode.class.php <?php //验证码类 session_start(); class Validate ...
- echo
echo $echo [-e] [内容字符串]显示后面的内容,缺省选项表示将后面的内容原模原样的显示出来,如果后面接的字符串不用"",会默认以空格为分隔符输出多个串 可以配合She ...
- js控制iframe跳转
网页:<iframe src="" id="iframe_a" name="iframe_a" style="width:1 ...
- 《互联网+:从IT到DT》:阿里公关稿,数据与案例不够全面客观,电商部分有一些生动的例子,三星
本书是阿里研究院的集体创作,当然要从阿里的视角写,因此其他的互联网巨头的信息很少涉及,对阿里不利的案例很少涉及. 关于“互联网+”,关于“互联网+”跟互联网的区别,书的开头有一点介绍.我感觉总体来说直 ...
- openPOWERLINK官方安装版例程(v2.3.0)附带mnobd.cdc文件断句
demo_mn_qt.exe启动所需载入的mnobd.cdc文件断句(备忘) //// Project: Demo_3CN //// NodeCount: 3 //// 0000003A //// N ...
- 【读书笔记《Android游戏编程之从零开始》】18.游戏开发基础(碰撞检测)
1.矩形碰撞 所谓矩形碰撞,就是利用两个矩形之间的位置关系来进行判断,如果矩形的像素在另外一个矩形之中,或者之上都可以认为这两个矩形发生了碰撞. 如果单纯的去考虑哪些情况会判定两个矩形发生碰撞,倒不如 ...
- 广搜+输出路径 POJ 3414 Pots
POJ 3414 Pots Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13547 Accepted: 5718 ...
- 二叉树结构 codevs 1029 遍历问题
codevs 1029 遍历问题 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 我们都很熟悉二叉树的前序.中序.后序遍 ...