Bootstrap中的各种下拉菜单

@*基本下拉菜单与按钮下拉菜单的样式完全一致。不过,基本的下拉菜单使用<div class="dropdown">包裹,所有要换行。而按钮式下拉菜单<div class="btn-group">按钮组包裹,属于内联样式,不换行。
分割的按钮下拉菜单多了一个<button></button>作为默认选项,另一个button的内容是<span class="caret">。 而<li class="divider"></li>
导航元素中的下拉菜单用链接替换了按钮,但class="dropdown-toggle",data-toggle="dropdown"仍然保留。导航栏中下拉菜单利用了导航元素的下拉菜单。
*@

基本的下拉菜单 下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。

<div class="dropdown">
<button type="button" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" id="dropdownMenu1">
主题
<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 href="#" role="menuitem">Java</a>
</li>
<li role="presentation">
<a href="#" role="menuitem">数据挖掘</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a href="#" role="menuitem">分离的链接</a>
</li>
</ul>
</div>

2、按钮下拉菜单       如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>

3、分割的按钮下拉菜单

<div class="btn-group">
<button type="button" class="btn btn-primary">默认</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" >
<span class="caret"></span>
<span class="sr-only">切换下拉菜单</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="dropdown-header">下拉菜单标题</li>
<li><a href="#">功能</a></li>
<li><a href="#">另一个功能</a></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</div>

4、导航元素中的下拉菜单

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> //用链接替换了按钮
Java <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Swing</a></li>
<li><a href="#">jMeter</a></li>
<li><a href="#">EJB</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
</ul>

5、在导航栏内的下拉菜单

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">W3Cschool</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> //用链接替换了按钮
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>

时间: 2024-08-05 05:01:17

Bootstrap中的各种下拉菜单的相关文章

Bootstrap历练实例:下拉菜单插件方法的使用

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:下拉菜单插件方法的使用</title> <meta charset="utf-8" /> <meta name="v

用三种方式实现导航菜单中的二级下拉菜单

如何实现导航菜单栏中的二级下拉菜单? 我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</tit

Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li

InfoPath与SharePoint之(三) 在InfoPath中实现联动下拉菜单

在InfoPath中实现联动的下拉菜单是一种比较常见的需求.这里通过演示如何选择省份和城市,讲解一下如何实现联动下拉菜单. 首先在上一篇博客里建的Area List,再加一个City的column,类型就是Single Line of Text. 在上一篇的博客中创建的下拉菜单旁边,再添加一个,用来显示城市.这个时候两个下拉菜单是没有关联的,而且显示的都是全部的item. 为了方便区分,去把两个Drop-Down List改了名词,分别是Province 和City. 首先我们要去除掉省份的重复

Bootstrap单按钮的下拉菜单

简介 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了. 插件依赖 按钮式下拉菜单依赖下拉菜单插件 ,因此需要将此插件包含在你所使用的 Bootstrap 版本中. 完整代码: <!DOCTYPE HTML><html><head><link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <scr

Bootstrap 字体图标、下拉菜单

Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法很简单,需要哪个图标就在该元素上添加相对应的css文件,一般用在超链接以及按钮上面. 可以通过设置元素style属性的font-size来决定元素的大小.可以通过设置元素的color属性设置图标的颜色.可以通过设置元素的text-shadow属性设置阴影效果 <button class="bt

BootStrap学习(2)_下拉菜单&amp;按钮组

一.下拉菜单 1.基本下拉菜单 如需使用下列菜单,只需要在class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

bootstrap分割的按钮下拉菜单,按钮和下拉菜单不对齐问题

[背景] 最近在研究bootstrap,在实现分割的按钮下拉菜单时,遇到这样一个问题,按钮和下拉菜单不对齐.大小不一样,见下图: [解决方式] 需要加一句<!DOCTYPE html>,html加在<html>标签前面,jsp加在<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

bootstrap和JS实现下拉菜单

// bootstrap下拉菜单 <div class="btn-group"> <button id="button_text" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="fa