bootstrap——组件（二、按钮组）

最新推荐文章于 2024-07-20 07:44:49 发布

原创最新推荐文章于 2024-07-20 07:44:49 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #组件 #btn-group

web 专栏收录该内容

62 篇文章

订阅专栏

本文介绍了如何使用按钮组(.btn-group)进行布局设计，包括基本的按钮组、按钮工具栏(.btn-toolbar)、不同尺寸(.btn-group-lg, .btn-group-sm, .btn-group-xs)的按钮组、垂直排列(.btn-group-vertical)的按钮组、两端对齐排列(.btn-group-justified)的按钮组以及按钮组内的嵌套结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、按钮组

.btn-group
把一些按钮放在一个btn-group里面

这里写图片描述

<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

2、按钮工具栏

.btn-toolbar
.btn-group
把一些btn-group放在btn-toolbar里面，就可以组成一个按钮工具栏

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

这里写图片描述

<div class="btn-toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">1</button>
        <button type="button" class="btn btn-default">2</button>
        <button type="button" class="btn btn-default">3</button>
        <button type="button" class="btn btn-default">4</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">5</button>
        <button type="button" class="btn btn-default">6</button>
        <button type="button" class="btn btn-default">7</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">8</button>
    </div>
</div>

3、尺寸

.btn-group-lg
.btn-group
.btn-group-sm
.btn-group-xs

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

4、垂直排列

.btn-group-vertical

<div class="btn-group-vertical">
  ...
</div>

5、两端对齐排列的按钮组

.btn-group-justified

<div class="btn-group btn-group-justified">
  ...
</div>

6、嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

这里写图片描述

<div class="btn-group">
    <button type="button" class="btn btn-default">1</button>
    <button type="button" class="btn btn-default">2</button>

    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Dropdown link</a></li>
            <li><a href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>