元素上添加 .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
>

尝试一下 »

多个按钮组

按钮组可以一个个并列显示在同一行上：

实例

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

尝试一下 »

网站题目：创新互联Bootstrap4教程：Bootstrap4按钮组
本文网址：http://www.shufengxianlan.com/qtweb/news30/289930.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联