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

发布时间：2020-12-18 00:37:23 所属栏目：安全来源：网络整理

导读：本篇章节讲解Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。供大家参考研究具体如下：下拉菜单菜单： ,dropdown（.dropup改变这个是上显示） data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right 按钮组：. btn-gro

本篇章节讲解Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。分享给大家供大家参考，具体如下：

下拉菜单

菜单：

,dropdown（.dropup改变这个是上显示） data-toggle="dropdown" (激活文本处) .dropdown-menu .pull-left .pull-right

按钮组：.

btn-group(各种类为btn的标签集合) .btn-toolbar（按钮导航条） .btn-group-vertical .btn-mini .btn-small .btn-large .nav-pills（胶囊样式）

注意：

.dropdown-submenu(多级导航中，可能bootstrap中没有)自行添加：

.dropdown-menu { top: 0; left: 100%; margin-top: -6px; margin-left: -1px; -webkit-border-radius: 0 6px 6px 6px; -moz-border-radius: 0 6px 6px; border-radius: 0 6px 6px 6px; } .dropdown-submenu:hover > .dropdown-menu { display: block; } .dropdown-submenu > a:after { display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover > a:after { border-left-color: #fff; } .dropdown-submenu.pull-left { float: none; } .dropdown-submenu.pull-left > .dropdown-menu { left: -100%; margin-left: 10px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px; }

添加这段css即可使.dropdown-submenu有效

实现菜单样式：

无标题文档

qiao2
qiao3

gao2

qiao2

qiao3

chao1

chao2

chao3

结果：

PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：

在线bootstrap可视化布局编辑工具：

希望本文所述对大家基于bootstrap的程序设计有所帮助。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

菜单：

按钮组：.

导航：

注意：