建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 按鈕組
Bootstrap 5 中允許我們將按鈕放在同一行上。
公司主營業(yè)務：網站設計、成都網站設計、移動網站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出大冶免費做網站回饋大家。
可以在
實例
<
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|xs 類來設置按鈕組的大小。
實例
<
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 類來創(chuàng)建垂直的按鈕組：
實例
<
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-bs-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-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-bs-toggle
=
"
dropdown
"
>
Sony
button
>
<
ul
class
=
"
dropdown-menu
"
>
<
li
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Tablet
a
>
li
>
<
li
>
<
a
class
=
"
dropdown-item
"
href
=
"
#
"
>
Smartphone
a
>
li
>
ul
>
div
>
div
>
嘗試一下 ?
多個按鈕組
按鈕組可以一個個并列顯示在同一行上：
實例
<
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
>
嘗試一下 ?
文章標題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5按鈕組
文章源于：http://fisionsoft.com.cn/article/cccegsc.html
