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

对于一些较为常用的功能模块，Bootstrap也进行了封装。包括下拉菜单、按钮组、导航、分页、缩略图、进度条等。
下面先总结下下拉菜单的使用。

直接看下面的例子：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>下拉菜单</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>下拉菜单</h1>
 </div>
 <div class="col-lg-6">
 <h3>样式1</h3>
 <div class="dropdown">
  <a href="#" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  </ul>
 </div>
 </div>
 <div class="col-lg-6">
 <h3>样式2</h3>
 <div class="dropdown">
  <button class="btn btn-lg btn-primary expanded" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
  <li class="active"><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li class="divider"></li>
  <li><a href="#">菜单3</a></li>
  </ul>
 </div>
 </div>
</div>
</body>
</html>

效果如下：

说明：
（1）按钮（超链接）和下拉选择需要包含在<div class=”dropdwon”>…</div>内；
（2）按钮（超链接）必须添加data-toggle="dropdown"触发器；
（3）放置下拉选项的无序列表需要添加. dropdown-menu类；
（4）添加一个空的<li class="divider"></li>标签来实现分隔列表项。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

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

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

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

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

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

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

  • Bootstrap组件(一)之菜单

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

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

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

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

  • 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:

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

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

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

  • 学习Bootstrap组件之下拉菜单

    学习Bootstrap组件之下拉菜单

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

  • 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按钮下拉菜单组件详解

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

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

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

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

随机推荐