中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：Bootstrap4 按鈕 下一篇：Bootstrap4 徽章（Badges）

Bootstrap4 按鈕組

在Bootstrap 4中，除了單個(gè)按鈕外，還允許我們將按鈕放在同一行上，組成按鈕組。

我們可以在 <div> 元素上添加 .btn-group 類來創(chuàng)建按鈕組。

實(shí)例

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

運(yùn)行代碼 ?

提示: 我們可以使用 .btn-group-lg|sm|xs 類來設(shè)置按鈕組的大小。

實(shí)例

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

運(yùn)行代碼 ?

垂直按鈕組

可以使用 .btn-group-vertical 類來創(chuàng)建垂直的按鈕組：

實(shí)例

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

運(yùn)行代碼 ?

內(nèi)嵌按鈕組及下拉菜單

我們可以在按鈕組內(nèi)設(shè)置下拉菜單：

實(shí)例

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

運(yùn)行代碼 ?

拆分按鈕下拉菜單

實(shí)例

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

運(yùn)行代碼 ?

垂直按鈕組及下拉菜單

實(shí)例

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

運(yùn)行代碼 ?
上一篇：Bootstrap4 按鈕 下一篇：Bootstrap4 徽章（Badges）