本文实例讲述了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（胶囊样式）导航：
.nav .nav-tabs .pull-right .disabled .nav-stacked（堆叠） .nav-list data-toggle="tab" .tabbable(容器) .tabs-left (right,below) .tab-content注意：
.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有效
实现菜单样式：
<Meta charset="utf-8">
无<a href="https://www.jb51.cc/tag/biaoti/" target="_blank" class="keywords">标题</a>文档
结果：
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
希望本文所述对大家基于bootstrap的程序设计有所帮助。
原文链接：https://www.f2er.com/bootstrap/39017.html