Bootstrap组件之下拉菜单
.dropdown——设置父元素为下拉菜单组件,向下弹出子菜单;
.dropup——设置父元素为下拉菜单组件,向上弹出子菜单;
.dropdown-toggle——设置button为下拉菜单切换button;
.dropdown-menu——设置ul元素为下拉菜单;
.dropdown-menu-right——将菜单右对齐;
.pull-right——将菜单组件的父元素右对齐;
.dropdown-header——为菜单项加入标题;
.divider——为菜单项加入切割线;
.disabled——禁用对应菜单项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSS全局样式_下拉菜单</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<script src="jquery-1.11.1.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown pull-right">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">中超Big4</li>
<li><a href="#" role="menuitem">上海上港</a></li>
<li><a href="#" role="menuitem">广州恒大</a></li>
<li><a href="#" role="menuitem">山东鲁能</a></li>
<li class="disabled"><a href="#" role="menuitem">北京国安</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">中超5-8</li>
<li><a href="#" role="menuitem">上海申花</a></li>
<li><a href="#" role="menuitem">江苏舜天</a></li>
<li><a href="#" role="menuitem">长春亚泰</a></li>
<li><a href="#" role="menuitem">河南建业</a></li>
</ul>
</div>
</div> </body>
</html>
Bootstrap组件之下拉菜单的更多相关文章
- 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--组件之下拉菜单
用于显示链接列表的可切换.有上下文的菜单. 对齐 B默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度. 为 .dropdown-menu 添加 .dropdown-menu-ri ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
- Bootstrap的下拉菜单float问题
在学习bootstrap中的下拉菜单时,遇到下面情况: <div class="dropdown"> <button class="btn btn-de ...
随机推荐
- POJ 1163&& 3176 The Triangle(DP)
The Triangle Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 41169 Accepted: 24882 De ...
- Struts2中文件下载
在struts.xml中配置如下 <action name="download" class="cn.itcast.domain.User" method ...
- chrome的input输入框填充后背景颜色变成黄色 (input:-webkit-autofill 导致的)
填写form表单时发现chrome的一个好坑啊! 当你之前有填写过表单,获取焦点时,input会有一个记录之前填写过的文本的下拉列表式的东东, 按理说,这没什么问题,很多时候为了方便,也需要它记录输入 ...
- STL容器分析--queue
queue,顾名思义,是指队列.满足先进先出的原则.
- HDOJ 5418 Victor and World 状压DP
水状压DP Victor and World Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 262144/131072 K (Java ...
- 64位Windows系统如何配置32位ODBC数据源
在64位Windows系统中,默认“数据源(ODBC)”是64位的,包括“控制面板->管理工具->数据源 ”或在“运行”中直接运行“ODBCAD32”程序.如果客户端是32位应用程序,仍然 ...
- 如何修改Linux系统的 /etc/ssh/sshd_config 文件 "/etc/ssh/sshd_config" E212: Can't open file for writin
第一步:我们使用命令行vim /etc/ssh/sshd_config 执行修改,强制保持 :wq! 系统不让我们修改这个文件 "/etc/ssh/sshd_config" ...
- 在Linux下如何查CC攻击?
什么是CC攻击?CC攻击就是利用大量代理服务器对目标计算机发起大量连接,导致目标服务器资源枯竭造成拒绝服务.那么如何判断查询CC攻击呢?本文主要介绍了一些Linux下判断CC攻击的命令. AD:201 ...
- oblique perspective projection
参考: https://en.wikibooks.org/wiki/GLSL_Programming/Vertex_Transformations <3D游戏与计算机图形学中的数学方法>E ...
- Html Agility Pack/SgmlReader 解析html
Html Agility Pack/SgmlReader 解析html HtmlDocument htmlDoc = new HtmlDocument(); //输出成xml格式 htmlDoc.Op ...