前端之家收集整理的这篇文章主要介绍了
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
本文实例讲述了Bootstrap组件之下拉菜单,多级菜单及按钮布局方法。分享给大家供大家参考，具体如下：@H_301_1@
下拉菜单@H_301_1@
,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@H_301_1@
注意：
.dropdown-submenu(多级导航中，可能bootstrap中没有)自行添加：@H_301_1@
.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有效@H_301_1@
实现菜单样式：@H_301_1@
<
Meta charset="utf-8">
无<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>文档
结果：@H_301_1@
@H_301_1@@H_301_1@
PS：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：@H_301_1@
在线bootstrap可视化布局编辑工具：
@H_301_1@
希望本文所述对大家基于bootstrap的程序设计有所帮助。@H_301_1@
