Bootstrap使用 .dropdown-menu 类创建下拉菜单
下拉菜单
下拉菜单是一种非常常见的效果,用于展示可切换、有关联的一组链接,它可以节省网页排版空间,使网页布局简洁有序。
Bootstrap内置了一套完整的下拉菜单组件,可用于不同的元素,如导航、按钮等等。配合其他元素,还可以设计出形式多样的菜单效果。
下拉菜单的交互行为还需要 下拉菜单插件(dropdown.js)的支持,因此使用下拉菜单组件时,还必须引入 dropdown.js 文件。
创建下拉菜单
Bootstrap中的下拉菜单都是基于列表实现的,可以使用无序列表(<ul>)或有序列表(<ol>),暂不支持描述列表(<dl>)。
为 <ul> 或 <ol> 添加 .dropdown-menu 类,即可创建一个下拉菜单。如:
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a tabindex="-1" href="#">Action</a></li>
<li><a tabindex="-1" href="#">Another action</a></li>
<li><a tabindex="-1" href="#">Something else here</a></li>
</ul>
效果如图 3‑8所示:
图3-8 下拉菜单
通常情况下,需要将下拉菜单默认隐藏起来,只有当用户点击某个按钮或链接时,才让它显示出来。因此,你需要把超链接或按钮以及下拉菜单全部包裹在一个 class="dropdown" 或 position: relative; 的容器中,并为按钮或链接添加 data-toggle="dropdown" 属性。这就可以让下拉菜单默认隐藏,只有在点击按钮或链接时,它才被激活并显示出来。如:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
此时,在浏览器中预览,可以看到一个按钮。如果点击按钮,下拉菜单才会被激活,并显示出来。效果如图 3‑9所示:
图3-9 激活下拉菜单
默认情况下,子菜单以下拉形式弹出。如果希望以上拉形式弹出,只需把整个下拉菜单包裹在 .dropup
的容器中即可:
<div class="dropup">
…
</div>
效果如图 3‑10所示:
图3-10 上拉菜单
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap使用 .dropdown-menu 类创建下拉菜单相关推荐
- css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
- 使用 CSS3 创建下拉菜单
当我在为 WordPress 编写 Notepad 主题 时,顺道学习了一些新的 CSS3 特性,现在此分享.查看演示可以看到一款类似 Mac 风格的多级下拉菜单,使用 border-radius,b ...
- Bootstrap系列 -- 36. 向上弹起的下拉菜单
有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出.在Bootstrap框架中专门为这种效果提代了一个类名" ...
- html 下拉框设置名称,html下拉菜单怎么做?高手教你如何在HTML和CSS中创建下拉菜单...
html下拉菜单怎么做?html下拉菜单代码是什么?这些对于刚刚入门的新手,还不是很明白,下面高手教你如何在HTML和CSS中创建下拉菜单? 很多人都会遇到将鼠标悬停在导航上,会出现下拉菜单; 一般出 ...
- python tk下拉列表_如何从Tkinter中的列表创建下拉菜单?
要创建"下拉菜单",可以在tkinter中使用OptionMenu 基本OptionMenu示例:from Tkinter import * master = Tk() varia ...
- EXCEl2013 创建下拉菜单
在EXCEl2013中实现,对某一个单元格旁边的三角形符号就能得到他的下拉菜单,然后点击下拉菜单中的某一个内容就能自动填写(做那种给别人发的填写资料的表格就很好用) 达到如下效果: 基本数据 对这一列 ...
- flask html下拉列表,如何使用Flask和HTML从python列表创建下拉菜单
我正在尝试使用来自python脚本的信息在HTML中创建一个下拉菜单.不过,到目前为止我已经让它工作了,html下拉列表将列表中的所有4个值显示为4个选项. 当前:选项1:红色.蓝色.黑色.橙色:选项 ...
- BootStrap字体图标不显示、下拉菜单不显示
在W3CSchool学习BootStrap教程时遇到的问题-- 1.字体图标不能显示 上面是正常显示的样子,不能正常显示,因为缺少下面的字体图标样式文件 (1)在下载的Bootstrap包中将font ...
- bootstrap 导航栏鼠标悬停显示下拉菜单
在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block; } 全部代码如下所示: <%@ page lan ...
最新文章
- 安装您的Sbo Add-on插件
- Monthly Expense POJ - 3273(二分最大值最小化)
- 790页微软官方《.Net核心编程》高清版PDF,提供下载
- ㊙️【教你用python挣零花钱】自动化简历内推,学弟直呼牛逼!!
- android定时切换活动,安卓手机如何定时自动切换情景模式 (全文)
- WPF中自定义的DataTemplate中的控件,在Window_Loaded事件中加载机制初探
- 分享一个办公环境文件共享服务器软件CuteHttpFileServer
- 2022全国智慧医院建设大会会议通知
- 公众号推送长图最佳尺寸_微信公众平台图片尺寸是多少
- android云新消息接收者全局,消息推送之百度云推送Android集成与用法(示例代码)...
- 嵌入式软件工程师对linux要求,嵌入式软件工程师的必备知识
- 【工具使用系列】PostScript工具 GhostScript,GSview,Epstool,RedMon
- openwrite Test
- 从狼群智能到无人机群协同决策
- [ ECUG 专题回顾]《再谈 CERL:详论 GO 与 ERLANG 的并发编程模型差异》-许式伟(七牛云存储 CEO)...
- 即使Windows DVD Maker不存在,如何在Windows 8上创建DVD-DVDStyler
- vue中实现简单答题卡,问卷调查逻辑(单选,多选,简答);
- 实验室远程登录Linux服务器并配置环境
- matlab红外遥感温度反演,一种地表温度多通道热红外遥感反演方法与流程
- chrome调用IE
热门文章
- centos 7下Hadoop 2.7.2 伪分布式安装
- AD数据库的备份与还原
- 用 git 维护 vim 代码
- screw (螺丝钉) ~ 简洁好用的数据库表结构文档生成工具
- cctv系统车站服务器功能,CCTV系统
- linux改变文件所属用户和组
- android 音频配置文件,Android音频系统
- Java中怎样创建数据库_在java中怎样创建MySQL数据库列表给个例子 爱问知识人
- hibernate连接mysql 释放连接_SSH 占用数据库连接不释放问题
- 判断整除(动态规划,递推)