2019-04-12 按钮组(3)

基本按钮组

<div class="btn-group">

 <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-toolbar" role="toolbar">

<div class="btn-group"> 

 <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"> 

 <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"> 

 <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>

按钮大小

.btn-group-lg, .btn-group-sm, .btn-group-xs

嵌套

可以在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group 。当您想让下拉菜单与一系列按钮组合使用时

<div class="btn-group">

 <button type="button" class="btn btn-default">按钮 1</button>

 <button type="button" class="btn btn-default">按钮 2</button> 

 <div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉

        <span class="caret"></span>    </button>    

<ul class="dropdown-menu">        

<li><a href="#">下拉链接 1</a></li>        

<li><a href="#">下拉链接 2</a></li>    

</ul>    </div></div>

垂直按钮组

class .btn-group-vertical