Bootstrap 按钮组总结

版权声明：转载请附上文章地址 https://blog.csdn.net/weixin_38134491/article/details/86987452

常用的class：

1. .btn-group   用于形成基本的按钮组
2. .btn-toolbar    是按钮工具栏，把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中，一般获得更复杂的组件
3. .btn-group-lg, .btn-group-sm, .btn-group-xs   可调整个按钮组的大小，而不需要对每个按钮进行大小调整
4. .btn-group-vertical   让一组按钮垂直堆叠显示，而不是水平堆叠显示

<div class="btn-group">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<button type="button" class="btn btn-default">斗破苍穹</button>
</div>

<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
	<button type="button" class="btn btn-default">海贼王</button>
	<button type="button" class="btn btn-default">火影忍者</button>
	<button type="button" class="btn btn-default">灌篮高手</button>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-default">猫和老鼠</button>
	<button type="button" class="btn btn-default">唐老鸭</button>
	<button type="button" class="btn btn-default">米奇乐园</button>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-default">镇魂街</button>
	<button type="button" class="btn btn-default">画江湖</button>
	<button type="button" class="btn btn-default">一人之下</button>
</div>
</div>

<div class="btn-group-vertical">
<button type="button" class="btn btn-default">海贼王</button>
<button type="button" class="btn btn-default">火影忍者</button>
<div class="btn-group-vertical">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		樱桃小丸子
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
		<li><a href="#">丸子</a></li>
		<li><a href="#">乔治</a></li>
	</ul>
</div>
</div>

嵌套

在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 

下拉菜单与一系列按钮组合使用时，就会用到这个

<div class="btn-group">
	<button type="button" class="btn btn-default">海贼王</button>
	<button type="button" class="btn btn-default">火影忍者</button>
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">斗破苍穹
	<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" style="margin-left: 11.875rem;">
        <li><a href="#">熊大</a></li>
        <li><a href="#">熊二</a></li>
	</ul>
</div>

扫描二维码关注公众号，回复： 5160396 查看本文章