Bootstrap_下拉菜单
在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件。
一、普通下拉菜单
<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" aria-labelledby="dropdownMenu1">
<!-- 菜单标题-->
<li class="dropdown-header">第一部分菜单头部</li>
<li><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<!-- 分割线-->
<li class="divider"></li>
<li class="dropdown-header">菜单选中状态</li>
<li class="active"><a tabindex="-1" href="#">选中状态</a></li>
<li class="divider"></li>
<li class="dropdown-header">菜单禁用状态</li>
<li class="disabled"><a tabindex="-1" href="#">禁用状态</a></li>
</ul>
</div>
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素,示例中为:
<div class="dropdown"></div>
2、使用了一个<button>按钮做为父菜单,并且定义类名“.dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:
data-toggle="dropdown"
3、下拉菜单项使用一个ul列表,并且定义一个类名为“.dropdown-menu”,此示例为:
<ul class="dropdown-menu">
4、在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“.divider”来实现添加下拉分隔线的功能。
<!-- 分割线-->
<li class="divider"></li>
5、为了让这个分组更明显,还可以给每个组添加一个头部(标题)。
<!-- 菜单标题-->
<li class="dropdown-header">第一部分菜单头部</li>
6、菜单项有当前状态“.active”和禁用状态“.disabled”。这两种状态使用方法只需要在对应的菜单项上添加对应的类名。
<li class="active"><a href="#">选中状态</a></li>
<li class="disabled"><a href="#">禁用状态</a></li>
7、对齐方式
Bootstrap框架中下拉菜单默认是左对齐。
如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“.pull-right”或者“.dropdown-menu-right”类名。
<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu1">
二、按钮下拉菜单
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。
不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。
按钮下拉菜单其实就是普通的下拉菜单,唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
<li><a href="##">按钮下拉菜单项</a></li>
</ul>
</div>
三、向上弹起的下拉菜单
有些菜单是需要向上弹出的。在Bootstrap框架中专门为这种效果提代了一个类名“dropup”。
只需要在“btn-group”上添加“.dropup”这个类名。
如果是普通向上弹出下拉菜单,只需要在“dropdown”类名基础上追加“.dropup”类名即可。
<div class="btn-group dropup">
Bootstrap_下拉菜单的更多相关文章
- bootstrap_下拉菜单+头部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 初学者--bootstrap(六)组件中的下拉菜单----在路上(10)
组件---下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 p ...
- Bootstrap3系列:按钮式下拉菜单
1. 基本实例 把按钮放入 .btn-group 中,加入适当的菜单标签,让按钮触发下拉菜单. 1.1 示例代码 <div class="btn-group"> < ...
- Bootstrap3系列:下拉菜单
1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...
- 如何在webapp中做出原生的ios下拉菜单效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
- Html5+Css3制作下拉菜单的三种方式
一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...
- IOS第二天-新浪微博 - 添加搜索框,弹出下拉菜单 ,代理的使用 ,HWTabBar.h(自定义TabBar)
********HWDiscoverViewController.m(发现) - (void)viewDidLoad { [super viewDidLoad]; // 创建搜索框对象 HWSearc ...
- JS实现带复选框的下拉菜单
这段时间在做后台的时候需要一个可以复选的下拉菜单,用到的是easyUI中的combo的Demo,先看看官方easyUI:http://www.jeasyui.com/documentation/ind ...
- 可控制导航下拉方向的jQuery下拉菜单代码
效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...
随机推荐
- Centos7 安装codeblock( 转载)
1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可 yum install gcc yum install gcc-c++ 2.安装gtk2-deve ...
- isset 和empty 两个函数的用法
关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断哦. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SE ...
- ThinkPHP 3.2.3 数据缓存与静态缓存
ThinkPHP 3.2.3 中手册中数据缓存的地址是:http://www.kancloud.cn/manual/thinkphp/1835 静态缓存的地址是:http://www.kancloud ...
- python随机服务器的双线出口ip发送邮件
#-*- coding:utf-8 -*-import smtplibimport sysimport random import socketfrom email.mime.text import ...
- rabbitmq之partitions
集群为了保证数据一致性,在同步数据的同时也会通过节点之间的心跳通信来保证对方存活.那如果集群节点通信异常会发生什么,系统如何保障正常提供服务,使用何种策略回复呢? rabbitmq提供的处理脑裂的方法 ...
- PCM-脉码调制
1. PCM---Pulse Code Modulation,脉码调制. 在光纤通信系统中,光纤中传输的是二进制光脉冲“0”码和“1”码,它由二进 脉冲编码调制 制数字信号对光源进行通断调 ...
- 集合中list、ArrayList、LinkedList、Vector的区别、Collection接口的共性方法以及数据结构的总结
List (链表|线性表) 特点: 接口,可存放重复元素,元素存取是有序的,允许在指定位置插入元素,并通过索引来访问元素 1.创建一个用指定可视行数初始化的新滚动列表.默认情况下,不允许进行多项选择. ...
- ngrok 外网访问小能手
以前在学校的时候想把自己做的网站发布让外网访问,可是又没有虚拟服务器和域名就显得异常的麻烦,曾经试过花生壳映射,效果虽然还不错,但是略显麻烦.今天找到一个更方便的小工具--ngrok ! 简单的介绍一 ...
- angularJ表单验证
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- Web前端工程师成长之路
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript/D ...