创新互联Bootstrap5教程：Bootstrap5按钮组
Bootstrap5 按钮组
Bootstrap 5 中允许我们将按钮放在同一行上。
公司主营业务：网站设计、成都网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。成都创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联推出大冶免费做网站回馈大家。
可以在
实例
<
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 类来创建垂直的按钮组：
实例
<
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
>
尝试一下 »
本文题目：创新互联Bootstrap5教程：Bootstrap5按钮组
地址分享：http://www.zsjierui.cn/article/cccegsc.html