建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap4 按鈕組
Bootstrap 4 中允許我們將按鈕放在同一行上。
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、雅安服務器托管、營銷軟件、網(wǎng)站建設、隴南網(wǎng)站維護、網(wǎng)站推廣。
可以在
實例
<
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 類來創(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
>
嘗試一下 ?
內(nèi)嵌按鈕組及下拉菜單
我們可以在按鈕組內(nèi)設置下拉菜單：
實例
<
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
>
嘗試一下 ?
多個按鈕組
按鈕組可以一個個并列顯示在同一行上：
實例
<
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)Bootstrap4教程：Bootstrap4按鈕組
當前URL：http://www.5511xx.com/article/cdgciii.html
