Bootstrap--组件之下拉菜单
用于显示链接列表的可切换、有上下文的菜单。
对齐
B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为
.dropdown-menu
添加.dropdown-menu-right
类可以让菜单右对齐。可能需要额外的定位May require additional positioning
在正常的文档流中,通过 CSS 为下拉菜单进行定位。这就意味着下拉菜单可能会由于设置了
overflow
属性的父元素而被部分遮挡或超出视口(viewport)的显示范围。如果出现这种问题,请自行解决。不建议使用
.pull-right
从 v3.1.0 版本开始,我们不再建议对下拉菜单使用
.pull-right
类。如需将菜单右对齐,请使用.dropdown-menu-right
类。导航条中如需添加右对齐的导航(nav)组件,请使用.pull-right
的 mixin 版本,可以自动对齐菜单。如需左对齐,请使用.dropdown-menu-left
类。<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
标题
在任何下拉菜单中均可通过添加标题来标明一组动作。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
分割线
为下拉菜单添加一条分割线,用于将多个链接分组。
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
禁用的菜单项
为下拉菜单中的 <li>
元素添加 .disabled
类,从而禁用相应的菜单项。
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
说明:Bootstrap下拉列表默认的情况下需要点击,因为它是为了方便移动端,但是在PC端有时候我们需要鼠标悬停就显示下拉菜单,这个时候我们就需要从写一个css方法,如下:
.navbar .nav > li:hover .dropdown-menu {
display: block;
}
想了解更多Bootstrap的知识,请访问bootstrap中文官网http://www.bootcss.com/
Bootstrap--组件之下拉菜单的更多相关文章
- Bootstrap组件之下拉菜单
.dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置button为下拉菜单切换but ...
- bootstrap的下拉菜单组件与导航条
前期准备:bootstrap的css文件和js文件先引入 Bootstrap 组件-拉下菜单(class+js) 下拉菜单必需三级结构 <div class="dropdown&quo ...
- Bootstrap按钮式下拉菜单
前面的话 按钮式下拉菜单仅从外观上看,和下拉菜单效果基本上是一样的.不同的是普通的下拉菜单是block元素,而按钮式下拉菜单是inline-block元素.本文将详细介绍Bootstrap按钮式下拉菜 ...
- bootstrap多级下拉菜单
只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
- BT之下拉菜单
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" ...
- Bootstrap学习js插件篇之下拉菜单
案例 通过此插件可以为几乎所有东西添加下拉菜单,包括导航条.标签页.胶囊式按钮. 用于导航条 导航条分为四个部分.第一部分导航头,第二部分导航列,第三部分form查询表单,第四部分导航列. <n ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap的下拉菜单float问题
在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...
随机推荐
- 从头开始编写一个Orchard网上商店模块(3) - 创建Orchard.Webshop模块项目
原文地址:http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-par ...
- Error:Could not open initscript class cache for initialization script 'C:\Users\Avishek\AppData\Local\Temp\asLocalRepo14.gradle' (C:\Users\Avishek.gradle\caches\2.2.1\scripts\asLocalRepo14_dkwbdtenxxg
Error:Could not open initscript class cache for initialization script 见鬼 Android Studio打开项目时遇到这个问题 昨 ...
- oracle 物化视图及创建索引
物化视图是一种特殊的物理表,“物化”(Materialized)视图是相对普通视图而言的.普通视图是虚拟表,应用的局限性大,任何对视图的查询,Oracle都实际上转换为视图SQL语句的查询.这样对整体 ...
- JS 变量提升
var a = 1; function foo() { console.log(a); var a = 2; } foo(); //undefined 根据变量提升机制,最后得出undefined; ...
- oracle 临时表学习
临时表概念 临时表就是用来暂时保存临时数据(亦或叫中间数据)的一个数据库对象,它和普通表有些类似,然而又有很大区别.它只能存储在临时表空间,而非用户的表空间.ORACLE临时表是会话或事务级别的,只对 ...
- 基础 HTML之目录问题(相对路径和绝对路径区别)
一.相对路径和绝对路径 相对路径:以引用文件之网页所在位置为参考基础,而建立出的目录路径.因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对. 绝对路径:以Web站点根目 ...
- Linux vim的一些命令
一.vi/vim的多行注释及取消注释 1.多行注释 (1) 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 (2) 按大写字母 ...
- HDOJ-ACM1006(JAVA)
题意:输入一个角度degree,求出一天中时针分针秒针之间的角度大于这个角度degree的时间占一天总时间的比例 因此输入是0-120度, 输出比例,保留三位小数,-1为终止 暂时没想出来如何做这道题 ...
- HDOJ-ACM1014(JAVA)
这道题题意: 求最大公约数,最大公约数是1,则GOOD,否则BAD 注意: 输出时,如果是System.out.printf("%10d%10d Good Choice\n\n&quo ...
- POJ2739 - Sum of Consecutive Prime Numbers(素数问题)
题目大意 给定N,要求你计算用连续的素数的和能够组成N的种数 题解 先筛选出素数,然后暴力判断即可... 代码: #include<iostream> #include<cstrin ...