秋天来啦，秋天来啦；天空像一块覆盖在大地上的蓝宝石，它已经给秋风抹试得洁净而明亮。棉花笑嘻嘻的来了，它听说好朋友—秋姑娘来了，笑的咧开了嘴。玉米在房顶上唱着歌跳着舞，别提多开心了。路边两只黑色的小狗在玩耍，看它那可爱的样子，让人忍不住的笑。石榴也许太兴奋了，竟然笑破了肚皮，苹果跑着来了，当然脸蛋是红彤彤的。
布局组件
下拉按钮
<div class="dropdown">
<button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown">
帮助<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation">
<a role="menuitem" tabindex="-1" rel="nofollow noopener noreferrer" href="#"> 关于我们 </a>
</li>
<li role="presentation">
<a role="menuitem" rel="nofollow noopener noreferrer" href="#"> 关于我们 </a>
</li>
<li role="presentation">
<a role="menuitem" rel="nofollow noopener noreferrer" href="#"> 关于我们 </a>
</li>
<li role="presentation">
<a role="menuitem" rel="nofollow noopener noreferrer" href="#"> 关于我们 </a>
</li>
</ul>
</div>
要构建一个下拉菜单,首先,需要一个div加class(dropdown)来包容所有代码(不然下拉菜单定位找不到),然后在加一个触发下拉菜单的按钮(或者a标签),再加一个下拉菜单ul
触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”
菜单样式: .dropdown-menu 属性:role=”menu” aria-labelledby='id'
其他:role=”presentation”; role=”menuitem”
样式: .divider 分割线; .dropdown-header:下拉菜单头部(不可点击); .dropdown-menu-right:向右对齐的菜单; .dropup:上拉样式(给父类容器添加)
按钮组
<div class="btn-group" role="toolbar">
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<button type="button" class="btn btn-default">按钮 3</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default">按钮 4</button>
<button type="button" class="btn btn-default">按钮 5</button>
<button type="button" class="btn btn-default">按钮 6</button>
</div>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default">按钮 7</button>
<button type="button" class="btn btn-default">按钮 8</button>
<button type="button" class="btn btn-default">按钮 9</button>
</div>
</div>
由多个按钮组构成的一个toolbar!
每个按钮组由一个div容器加 .btn-group样式构成(同时可以搭配大小等其他样式)
每个按钮组中由几个按钮组成
利用按钮组和单独的下拉菜单构成分割下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
<a rel="nofollow noopener noreferrer" href="#">功能</a>
</li>
<li>
<a rel="nofollow noopener noreferrer" href="#">另一个功能</a>
</li>
<li>
<a rel="nofollow noopener noreferrer" href="#">其他</a>
</li>
<li class="divider"></li>
<li>
<a rel="nofollow noopener noreferrer" href="#">分离的链接</a>
</li>
</ul>
</div>
以上所述是小编给大家介绍的BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
本文BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)到此结束。坚强，不是应对悲伤不流一滴泪，而是擦干眼泪后微笑着应对以后的生活。小编再次感谢大家对我们的支持！