0

0

bootstrap4如何设置下拉菜单

angryTom

angryTom

发布时间:2019-07-18 17:49:02

|

2739人浏览过

|

来源于php中文网

原创

bootstrap4如何设置下拉菜单

Bootarp 4 下拉菜单

推荐教程:Bootstarp手册

  下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。

代码解读

  .dropdown 类用来指定一个下拉菜单。

  我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。

 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

下拉菜单中的分割线

  .dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:

下拉菜单中的标题

  .dropdown-header 类用于在下拉菜单中添加标题:

餐饮E站通-在线订餐系统 免费版
餐饮E站通-在线订餐系统 免费版

在线订餐系统源码,提供给设计人员参考一个小型的在线订餐管理系统源码,采用三层模式开发,代码注释详细前台可以进行用户注册、菜单管理及订餐后台管理员可以进行菜单管理、新闻管理、菜肴管理、用户管理操作数据库采用的是Sql2005(由于数据库在App_Data下,如果装了Sql2005数据库会自动配置)

下载

下拉菜单中的可用项与禁用项

  .active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。

  如果要禁用下拉菜单的选项,可以使用.disabled 类。

Active
Disabled

下拉菜单的定位

  如果我们想让下拉菜单右对齐,可以在元素上的 .dropdown-menu 类后添加.dropdown-menu-right 类。

指定向上弹出的下拉菜单

  如果你希望下拉菜单向上弹出,可以将

元素的 class="dropdown" 替换为 "dropup":

按钮中设置下拉菜单

  我们可以在按钮中添加下拉菜单:


相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

466

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 9.7万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号