建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 按鈕組
Bootstrap 4 中允許我們將按鈕放在同一行上。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、雅安服務(wù)器托管、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、隴南網(wǎng)站維護(hù)、網(wǎ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
>
嘗試一下 ?
提示: 我們可以使用 .btn-group-lg|sm 類(lèi)來(lái)設(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
>
嘗試一下 ?
垂直按鈕組
可以使用 .btn-group-vertical 類(lèi)來(lái)創(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
>
嘗試一下 ?
內(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
>
嘗試一下 ?
拆分按鈕下拉菜單
實(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
>
嘗試一下 ?
垂直按鈕組及下拉菜單
實(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
>
嘗試一下 ?
多個(gè)按鈕組
按鈕組可以一個(gè)個(gè)并列顯示在同一行上：
實(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
>
<
div
class
=
"
btn-group
"
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
BMW
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Mercedes
button
>
<
button
type
=
"
button
"
class
=
"
btn btn-primary
"
>
Volvo
button
>
div
>
嘗試一下 ?
網(wǎng)站名稱：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4按鈕組
新聞來(lái)源：http://m.5511xx.com/article/cdgciii.html
