Bootstrap布局组件教程之Bootstrap下拉菜单

本章将重点介绍 Bootstrap 下拉菜单。下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单（Dropdowns）</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</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">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

结果如下所示：

Bootstrap 下拉菜单选项

Bootstrap 下拉菜单​对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 向右对齐下拉菜单</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">主题
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu"
aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</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">
<a role="menuitem" tabindex="-1" href="#">分离的链接</a>
</li>
</ul>
</div>
</body>
</html>

结果如下所示：

Bootstrap 下拉菜单标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 下拉菜单标题</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" 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="#">Java</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>
</ul>
</div>
</body>
</html>

结果如下所示：

以上所述是小编给大家介绍的Bootstrap布局组件教程之Bootstrap下拉菜单的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • bootstrap组件之按钮式下拉菜单小结

    bootstrap组件之按钮式下拉菜单小结

    1.单按钮下拉菜单 基础的下拉菜单最外层是.dropdown的div 现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class=

  • 学习Bootstrap组件之下拉菜单

    学习Bootstrap组件之下拉菜单

    Bootstrap 是由Twitter 工程师推出的基于HTML,CSS,JAVASCRIPT的简洁灵活的流行前端框架,我们可以把它想象成一个定义了很多效果的CSS与JS的库,库里面已经定义好了各种组件的显示效果与动画. .dropdown--设置父元素为下拉菜单组件,向下弹出子菜单: .dropup--设置父元素为下拉菜单组件,向上弹出子菜单: .dropdown-toggle--设置按钮为下拉菜单切换按钮: .dropdown-menu--设置ul元素为下拉菜单: .dropdown-men

  • Bootstrap按钮下拉菜单组件详解

    Bootstrap按钮下拉菜单组件详解

    按钮组也是一个独立的组件,按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作. 把一组<div class="btn-group">组合进一个<div class="btn-toolbar">做成更复杂的组件. <div class="btn-toolbar" role="toolbar"> <div class="btn-group">

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • Bootstrap基本组件学习笔记之下拉菜单(7)

    Bootstrap基本组件学习笔记之下拉菜单(7)

    对于一些较为常用的功能模块,Bootstrap也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

  • Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

    Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例

    本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法.分享给大家供大家参考,具体如下: 下拉菜单 菜单: ,dropdown(.dropup改变这个是上显示)   data-toggle="dropdown" (激活文本处)      .dropdown-menu   .pull-left   .pull-right 按钮组:.btn-group(各种类为btn的标签集合)    .btn-toolbar(按钮导航条)  .btn-group-vertical   .

  • JS组件Bootstrap ContextMenu右键菜单使用方法

    JS组件Bootstrap ContextMenu右键菜单使用方法

    今天来总结下bootstrap的一个小组件的应用.好了,不说废话,进入正题吧. 一.ContextMenu介绍 一个需求:表格行调序,支持多选调序,并且可以不连续多选.什么意思呢?先来看看需要实现的效果图: 需求是:需要将选中的6.8.9行移动到第2行和第3行之间.撇开业务不说,单纯从技术层面来说,要想使用最少操作达到上述效果,博主想到了右键功能,如果能够在第2行或者第3行上面点击鼠标右键,通过右键菜单功能将选中的行移动到相应的位置,这样是不是最简单呢.说做咱就做,于是找组件,搜索"bootst

  • Bootstrap CSS组件之按钮下拉菜单

    按钮下拉菜单 结合使用.btn-group(btn-group-lg/btn-group-sm/btn-group-xs) .dropup .btn .dropdown-menu 按钮下拉菜单是在普通的下拉菜单的基础上封装了.btn样式得效果,就类似于单击一个button按钮,然后显示隐藏的下拉菜单. 组合式下拉菜单 分离式下拉菜单 向上弹起的下拉菜单 //源码,css实现方式主要是设置.dropdown-menu样式容器的bottom为100% .dropup .dropdown-menu,

  • 基于bootstrap按钮式下拉菜单组件的搜索建议插件

    本文实例为大家分享了Bootstrap Search Suggest搜索建议插件的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>Bootstrap 搜索建议插件</title> <meta name="viewport" content

  • Bootstrap组件(一)之菜单

    Glyphicons字体图标 基类.glyphicon {position/top/display/font-family/} 具体类 {content} --表现在伪元素上 使用要点:a.基类+具体类 b.一般图标和文本之间添加一个空格 注意点:a.不要和其他组件混用,单独使用一个标签,一般使用span,e.g.:<span class="glyphicon glyphicon-search"></span> b.已使用字体图标类的标签不要再嵌套元素或包含文本

  • Bootstrap CSS组件之下拉菜单(dropdown)

    Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:

随机推荐