Bootstrap4 按钮组


Bootstrap4 按钮组

Bootstrap 4 中允许我们将按钮放在同一行上。

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

实例

<div class="btn-group">

<button type="button"class="btn btn-primary">Apple</button>

<button type="button"class="btn btn-primary">Samsung</button>

<button type="button"class="btn btn-primary">Sony</button></div>


演示一下 ?

提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

实例

<div class="btn-group btn-group-lg">

<button type="button"class="btn btn-primary">Apple</button>

<button type="button"class="btn btn-primary">Samsung</button>

<button type="button"class="btn btn-primary">Sony</button>

</div>


演示一下 ?

垂直按钮组

可以使用 .btn-group-vertical 类来创建垂直的按钮组:

实例

<div class="btn-group-vertical">

<button type="button"class="btn btn-primary">Apple</button>

<button type="button"class="btn btn-primary">Samsung</button>

<button type="button"class="btn btn-primary">Sony</button>

</div>


演示一下 ?

内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单:

实例

<div class="btn-group">

<button type="button"class="btn btn-primary">Apple</button>

<button type="button"class="btn btn-primary">Samsung</button>

<div class="btn-group">

<button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">      

Sony    

</button>

<div class="dropdown-menu">

<a class="dropdown-item"href="#">Tablet</a>

<a class="dropdown-item"href="#">Smartphone</a>

</div></div>

</div>


演示一下 ?

拆分按钮下拉菜单

实例

<div class="btn-group">

<button type="button"class="btn btn-primary">Sony</button>

<button type="button"class="btn btn-primary dropdown-toggle dropdown-toggle-split"data-toggle="dropdown">

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

</button>

<div class="dropdown-menu">

<a class="dropdown-item"href="#">Tablet</a>

<a class="dropdown-item"href="#">Smartphone</a>

</div>

</div>


演示一下 ?

垂直按钮组及下拉菜单

实例

<div class="btn-group-vertical">

<button type="button"class="btn btn-primary">Apple</button>

<button type="button"class="btn btn-primary">Samsung</button>

<div class="btn-group">

<button type="button"class="btn btn-primary dropdown-toggle"data-toggle="dropdown">      

Sony    

</button>

<div class="dropdown-menu">

<a class="dropdown-item"href="#">Tablet</a>

<a class="dropdown-item"href="#">Smartphone</a>

</div></div>

</div>


演示一下 ?


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved 蜀ICP备15003849号-16