零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单
点此查看 所有教程、项目、源码导航
本文目录
- 1. 概述
- 2. 下拉菜单
- 2.1 普通下拉菜单
- 2.2 更换颜色
- 2.3 更换尺寸
- 2.4 添加分割线
- 2.5 菜单分组
- 2.6 上拉菜单
- 3. 按钮式下拉菜单
- 4. 小结
1. 概述
下拉菜单使用频率也是比较高的，比较常见的使用场景是在导航菜单栏，某个主菜单含有下拉的子菜单。
Bootstrap为下拉菜单提供了两种实现方式，即普通的下拉菜单还有按钮式的下拉菜单。我们先看一张图观察下，从图中可以看出，普通下拉菜单和按钮式下拉菜单的样式基本相同，唯一比较明显的区别是：普通下拉菜单相当于菜单，前后自动换行；而按钮式的下拉菜单相当于按钮，前后不换行。
2. 下拉菜单
2.1 普通下拉菜单
先来看下普通下拉菜单的示例代码，通过dropdown描述一个下拉菜单，下拉菜单的主按钮通过dropdown-toggle类描述，下拉子菜单的部分是dropdown-menu类描述的ul元素。最后注意下拉箭头是通过caret样式类实现的。
普通下拉菜单：<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>
效果如下：
2.2 更换颜色
其实就是更换按钮的样式类，如下代码将默认按钮改为了首选按钮btn-primary。
更换颜色:<div class="dropdown"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>
效果如下：
2.3 更换尺寸
其实就是通过btn-lg或btn-sm更换按钮的尺寸。
更换尺寸:<div class="dropdown"><button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>
效果如下：
2.4 添加分割线
可以在子菜单之间添加分割线，示例代码：
添加分割线：<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li role="separator" class="divider"></li><li><a href="#">命令2</a></li></ul></div>
效果如下：
2.5 菜单分组
如果子菜单较多，还可以进行分组：
菜单分组：<div class="dropdown"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">分组1</li><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li><li class="dropdown-header">分组2</li><li><a href="#">命令3</a></li><li><a href="#">命令4</a></li></ul></div>
效果如下：
2.6 上拉菜单
这个实现比较奇葩，可以让子菜单弹出方向改变，真实使用场景我都没见过。只需要将dropdown样式类改为dropup即可。
上拉菜单：<div class="dropup"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>
3. 按钮式下拉菜单
按钮式下拉菜单的实现，只需要将之前的dropdown样式类改为btn-group即可，有个例外是上拉菜单，需要将dropup改为btn-group和dropup两个样式类。
具体代码如下：
<div class="col-md-12">按钮式下拉菜单：<div class="btn-group"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>更换颜色:<div class="btn-group"><button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>更换尺寸:<div class="btn-group"><button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div>添加分割线：<div class="btn-group"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li role="separator" class="divider"></li><li><a href="#">命令2</a></li></ul></div>菜单分组：<div class="btn-group"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">分组1</li><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li><li class="dropdown-header">分组2</li><li><a href="#">命令3</a></li><li><a href="#">命令4</a></li></ul></div>上拉菜单：<div class="btn-group dropup"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下发命令<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">命令1</a></li><li><a href="#">命令2</a></li></ul></div></div>
4. 小结
在实际使用中，建议是用按钮式的下拉菜单。
零基础Bootstrap入门教程(19)--下拉菜单、按钮式下拉菜单相关推荐
- 零基础Bootstrap入门教程(0)--教程背景与目录
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 教程目录 3. 源码下载 1. 背景 在学习完成HTML/CSS/JS/jQuery零基础入门教程后,自然而然我们要进入Bootstra ...
- 零基础CSS入门教程(19)–盒子模型简述
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. 实例解析 3. 小结 1. 前言 之前我们讲过CSS的尺寸.边框.内边距.外边距. 其实这些都是占用网页空间,在CSS中,我们将网页元素 ...
- 零基础Bootstrap入门教程(16)--模态框
点此查看 所有教程.项目.源码导航 本文目录 1. 概述 2. 模态框样式 3. 按钮直接关联模态框 4. 通过JS方法打开/关闭模态框 5. 调整大小 6. 动画效果 7. 小结 1. 概述 模态框 ...
- 零基础Bootstrap入门教程(26)–轮播的实现
点此查看 所有教程.项目.源码导航 本文目录 1. 概述 2. 基本轮播 3. 添加轮播指示器 4. 添加轮播控件 5. 小结 1. 概述 要想从头到尾来实现一个比较好看且稳定的轮播控件,还是有一定难 ...
- 零基础Bootstrap入门教程(4)--开发标准的响应式网页
点此查看 所有教程.项目.源码导航 本文目录 1. 背景 2. 创建标准HTML5页面 3. 添加响应式内容 4. 小结 1. 背景 响应式网页指的是可以在不同尺寸/分辨率设备下都可以运行良好的网页, ...
- 零基础Bootstrap入门教程(9)--使用表单控件
点此查看 所有教程.项目.源码导航 本文目录 1. 概述 2. 基本输入控件 3. 调整表单控件的大小 4. 表单控件的特殊用法 4.1 单选框用法 4.2 复选框用法 5. 小结 1. 概述 表单控 ...
- 零基础Bootstrap入门教程(25)--折叠面板、折叠面板导航
点此查看 所有教程.项目.源码导航 本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1. 概述 上一篇我们讲述了折叠插件的用法,可以将任意的div元素包含的内容进行动态的折叠/显 ...
- 零基础SSM入门教程(0)--教程背景与目录
点此查看 零基础JavaWeb全栈文章目录及源码下载 1. 背景 本教程的出发点是写一个比较条理,比较全面的SSM系列教程,首先造福自己.理顺自己的知识体系,然后也造福大众,因为网上现存的资源相对比较 ...
- 零基础CSS入门教程(1)–初识CSS
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. HTML与CSS区别 3. CSS有哪些功能 4. 如何学习CSS 1. 前言 学习CSS是离不开HTML的,HTML是CSS的基础,如 ...
- 零基础JavaScript入门教程(1)–走进JavaScript的世界
点此查看 所有教程.项目.源码导航 本文目录 1. 前言 2. JS的历史 3. JS的地位 4. JS与HTML.CSS的区别 5. JS是真正的编程语言 6. JS的组成部分 7. 小结 1. 前 ...
最新文章
- kafka 在阿里云部署
- python request post 数组_[pve][python]用python3获取pve状态信息
- Java中获得了方法名称的字符串，怎么样调用该方法
- python3库黑客_想知道黑客为什么首先Python吗？看看这些渗透测试工具和库
- python初体验-hello world答案_Anaconda上的python3初体验
- redis客户端mac_推荐一款神仙颜值的Redis客户端工具
- html5豌豆上的公主,豌豆上的公主阅读练习及答案
- word域高级应用 if 域 域邮件合并的值的更改 日期的更改
- 230.二叉搜索树中第K小的元素
- Java自学 day02
- 视觉SLAM十四讲学习笔记——ch5 相机与图像
- R语言进行系统聚类分析并作图（数据来源国家统计局）
- 可以嵌入ppt的课堂点名器_让你相见恨晚的30个PPT技巧
- 【模拟电子技术Analog Electronics Technology 6】—— 共射放大电路的原理与改进
- python绘制基因结构图_使用TBtools绘制进化树+motif分析+基因结构~三图合一
- 安卓10源码添加系统服务后配置SeLinux让其拥有Sdcard读写权限
- 全球第一！新一代云数仓 SelectDB 登顶 ClickBench
- android自带中文字体,Android中的默认字体系列是什么？
- 22.23.24.25.盒须图（boxplot）、棉棒图(Stem Plot； Lollipop plot)、极坐标图、雷达图（Radar Chart）
- 数据结构：栈（Stack）