Bootstrap 教程第五课:制作下拉菜单
发布日期:2021-11-30 16:49:55 浏览次数:9 分类:技术文章

本文共 821 字,大约阅读时间需要 2 分钟。

在Bootstrap教程第二课制作网站菜单中,提到了制作下拉菜单的相关代码(),只是没有细细讲解,这节,我们来说说下拉菜单的制作。
首页,制作一个按钮,可以是a标签,也可以是button按钮,代码如下:

我们可以在btn的后面添加上 .btn-default 或 .btn-primary 类,使得这个按钮看起来更漂亮一些。
现在我们需要在“下拉菜单”这几个文字后面添加上一个向下的箭头图标,表示这是一个下拉菜单,代码如下:

现在在这个按钮的下方,添加下拉菜单,需要给这个菜单的ul添加.dropdown-menu类,示例代码:

最后,给button按钮添加上触发 data-toggle="dropdown",再将下拉按钮和下拉菜单都包裹在.dropdown里。完整代码如下:

效果图:
我们还可以根据自己的要求,使用
.dropdown-menu-left 或 .dropdown-menu-right 类来控制下拉菜单的左或右对齐。
还可以给下拉菜单添加下拉菜单的标题,来说明这组下拉菜单的功能:
还可以添加分割线,将下拉菜单中的功能进行分组:
还可以给li元素添加.disabled类,从而禁止使用相应的菜单功能:

转载地址:https://leeguoren.blog.csdn.net/article/details/51721935 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Bootstrap 教程第六课:各种按钮组合样式
下一篇:Bootstrap 教程第四课:制作一组功能图标按钮

发表评论

最新留言

初次前来,多多关照!
[***.217.46.12]2024年03月12日 18时25分25秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

FreeBSD可以安装Linux软件吗,在Linux服务器上面通过网络安装FreeBSD 2021-06-24
.net core linux 桌面应用,C# dotnet core + AvaloniaUI 开发桌面软件,hello world 2021-06-24
linux tcp 113错误,linux系统报tcp_mark_head_lost错误的处理方法 2021-06-24
南昌工程学院c语言答案,南昌工程学院C语言程序设计基础课件第3讲运算符和表达式... 2021-06-24
python学画画_python学画画(下) 2021-06-24
云栖社区 mysql_【直播结束,已更新回放】PG、MySQL到底哪个好?云栖说这次请来五位专家撕了一下-阿里云开发者社区... 2021-06-24
老男孩mysql 百度云_英语语录:除了你,没人能掌控你的幸福 2021-06-24
mysql驱动多次执行问题_Laravel5.2队列驱动expire参数设置带来的重复执行问题 数据库驱动... 2021-06-24
mysql获取刚新增的数据库_如何取得刚插入数据库的数据的id mysql 2021-06-24
python将10到1递减_(Python)如何将3个递减列表合并成一个递减列表? 2021-06-24
python脚本怎么用来处理数据_长时间运行数据处理python脚本的程序结构 2021-06-24
python转成c 语言_将Python对象转换为C void类型 2021-06-24
resin mysql_Eclipse+resin+mysql 安装及环境配置 2021-06-24
redis的使用 Java_java中使用redis 2021-06-24
java 数组元素位置_Java – 在数组中获取元素位置 2021-06-24
c 泛型与java泛型_C ++和Java中的“泛型”类型之间有什么区别? 2021-06-24
java 返回实体对象_java 封装返回结果实体类 返回结果以及错误信息 2021-06-24
java web 防止sql注入攻击_JavaWeb防注入知识点(一) 2021-06-24
java ssm 异常分类_SSM项目常见的异常与处理提示(一) 2021-06-24
java定义矩形类_Java定义矩形类 2021-06-24