Bootstrap下拉菜单中使用 dropdown-header 来显示菜单标题,和上一篇说道的分割线一样

<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="dropdown-header">第一部分菜单头部</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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">第二部分菜单头部</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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
</ul>
</div> <div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
选择运动
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">第一部分标题</li>
<li><a href="javascript:void(0)">足球</a></li>
<li><a href="javascript:void(0)">篮球</a></li>
<li><a href="javascript:void(0)">乒乓球</a></li>
<li class="divider"></li>
<li class="dropdown-header">蔬菜</li>
<li><a href="javascript:void(0)">足球</a></li>
<li><a href="javascript:void(0)">篮球</a></li>
<li><a href="javascript:void(0)">乒乓球</a></li>
</ul>
</div>

Bootstrap系列 -- 26. 下拉菜单标题的更多相关文章

  1. Bootstrap系列 -- 24. 下拉菜单基本用法

    在使用Bootstrap框架的下拉菜单时,必须调用Bootstrap框架提供的bootstrap.js文件.当然,如果你使用的是未编译版本,在js文件夹下你能找到一个名为“dropdown.js”的文 ...

  2. Bootstrap系列 -- 27. 下拉菜单对齐方式

    Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...

  3. Bootstrap系列 -- 25. 下拉菜单分割线

    在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加 ...

  4. Bootstrap系列 -- 28. 下拉菜单状态

    下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus). 下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled).这两种状态使用方法 ...

  5. 实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 (转)

    实现bootstrap的dropdown-menu(下拉菜单)点击后不关闭的方法 问题描述,在下拉菜单中,添加其他元素,例如,原文作者所述的<a>和我自己实际用到的<input> ...

  6. Bootstrap3系列:下拉菜单

    1.引用Bootstrap 示例引用的Bootstrap版本:v3.3.7 <script src="~/Scripts/jquery-2.2.4.min.js">&l ...

  7. 【Bootstrap】 bootstrap-select2下拉菜单插件

    这次开发了个小TRS系统,虽然是很小,但是作为初心者,第一次用到了很多看起来洋气使用起来有相对简单的各种前端(主要是和bootstrap配合使用)组件.包括bootstrap-select2,boot ...

  8. bootstrap:导航下拉菜单

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. bootstrap中的下拉菜单

    下拉菜单必要的代码: <div  class="container"> <div  class="dropdown"> <butt ...

随机推荐

  1. mysql管理(一)

    创建数据库,并指定默认字符集和排序规则:help create database;create {database|schema} [if not exists] db_name [character ...

  2. Hive2 jdbc test

    package andes; import java.io.BufferedWriter; import java.io.FileOutputStream; import java.io.IOExce ...

  3. Oracle 性能维护一点

    大数据量表的维护原则 1.如果此表经常CRUD,最好的办法是定期收集统计信息传递给oracle优化器,提高性能.例如dbms_stats.gather_table_stats命令. 可以做在ETL中, ...

  4. DimDate populate data

    日期维度 任何一个数据仓库都应该有一个日期维度. 因为很少有不需要通过日期维度看数据的情况存在. 日期维度的好处是,你可以通过他连接各个事实表,然后在报表端传送报表参数的时候, 直接自动过滤日期维度的 ...

  5. 【Android UI设计与开发】7.底部菜单栏(四)PopupWindow 实现显示仿腾讯新闻底部弹出菜单

    前一篇文章中有用到 PopupWindow 来实现弹窗的功能.简单介绍以下吧. 官方文档是这样解释的:这就是一个弹出窗口,可以用来显示一个任意视图.出现的弹出窗口是一个浮动容器的当前活动. 1.首先来 ...

  6. 集合框架学习笔记<二>

    1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素 实现了ICollection和ILis ...

  7. SpringMVC 通过post接收form参数或者json参数

    springmvc的controller很多都用来提供restful服务,成为多功能action 同一个接口既能够提供给web端,也可以提供给ios以及安卓 @RequestBody 可以把接收到的j ...

  8. Hibernate出现javax.naming.NoInitialContextException 错误的解决办法

    异常信息: 08:02:56,329 WARN SessionFactoryObjectFactory:123 - Could not unbind factory from JNDI javax.n ...

  9. 只有图片拼接的html页面图片之间有白条的解决方法

    有时候会有这样的页面,整个页面也就是几张切好的图片组成,但是把这些图片使用代码拼接好,又总会出现图片间有白条的问题,如下图: 解决方法:给图片的父容器添加 line-height: 0; 就好了,因为 ...

  10. 键盘事件keydown、keypress、keyup随笔整理总结(摘抄)

    原文1:http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html 原文2:http://www.cnblogs.com/leo ...