按钮组

按钮组-Bootstrap 5和Material Design 2.0组件

通过按钮组将一系列按钮分组在一起。


基本例子

.btn-group 中的 .btn 包裹一系列按钮。


          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
          </div>
        

确保正确的角色并提供标签:
为了使辅助技术(例如屏幕阅读器)传达一系列 按钮已分组,需要提供适当的 role 属性。对于 按钮组,这将是 role =“ group” ,而工具栏应具有 role =“工具栏”
此外,应为组和工具栏指定一个明确的标签,以提供最大的帮助 尽管存在正确的角色,否则技术将不会宣布它们 属性。在此处提供的示例中,我们使用 aria-label ,但也可以使用 aria-labelledby 之类的替代方法 用过的。

这些类也可以添加到链接中。使用 .active 类突出显示 链接。


          <div class="btn-group">
            <a href="#!" class="btn btn-primary active">Active link</a>
            <a href="#!" class="btn btn-primary">Link</a>
            <a href="#!" class="btn btn-primary">Link</a>
          </div>
        

轮廓样式


          <div class="btn-group shadow-0" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
              Left
            </button>
            <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
              Middle
            </button>
            <button type="button" class="btn btn-outline-secondary" data-mdb-color="dark">
              Right
            </button>
          </div>
        

工具列

将按钮组集合组合到按钮工具栏中,以获取更复杂的组件。使用工具 所需的类,以分隔组,按钮等。


          <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group me-2" role="group" aria-label="First group">
              <button type="button" class="btn btn-primary">1</button>
              <button type="button" class="btn btn-primary">2</button>
              <button type="button" class="btn btn-primary">3</button>
              <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="btn-group me-2" role="group" aria-label="Second group">
              <button type="button" class="btn btn-primary">5</button>
              <button type="button" class="btn btn-primary">6</button>
              <button type="button" class="btn btn-primary">7</button>
            </div>
            <div class="btn-group" role="group" aria-label="Third group">
              <button type="button" class="btn btn-primary">8</button>
            </div>
          </div>
        

随意将输入组与工具栏中的按钮组混合使用。与示例类似 上面,您可能需要一些实用程序来适当地隔开空间。


          <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
            <div class="btn-group me-2" role="group" aria-label="First group">
              <button type="button" class="btn btn-primary">1</button>
              <button type="button" class="btn btn-primary">2</button>
              <button type="button" class="btn btn-primary">3</button>
              <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="input-group">
              <div class="input-group-text" id="btnGroupAddon">@</div>
              <input
                type="text"
                class="form-control"
                placeholder="Input group example"
                aria-label="Input group example"
                aria-describedby="btnGroupAddon"
              />
            </div>
          </div>

          <div
            class="btn-toolbar justify-content-between"
            role="toolbar"
            aria-label="Toolbar with button groups"
          >
            <div class="btn-group" role="group" aria-label="First group">
              <button type="button" class="btn btn-primary">1</button>
              <button type="button" class="btn btn-primary">2</button>
              <button type="button" class="btn btn-primary">3</button>
              <button type="button" class="btn btn-primary">4</button>
            </div>
            <div class="input-group">
              <div class="input-group-text" id="btnGroupAddon2">@</div>
              <input
                type="text"
                class="form-control"
                placeholder="Input group example"
                aria-label="Input group example"
                aria-describedby="btnGroupAddon2"
              />
            </div>
          </div>
        

浆纱

不必将按钮大小调整类应用于组中的每个按钮,只需添加 .btn-group-* 到每个 .btn-group ,包括嵌套时的每个 多个组。






          <!-- Large -->
          <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
          </div>

          <!-- Standard -->
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
          </div>

          <!-- Small -->
          <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Left</button>
            <button type="button" class="btn btn-primary">Middle</button>
            <button type="button" class="btn btn-primary">Right</button>
          </div>
        

套料

当您需要下拉菜单时,将 .btn-group 放在另一个 .btn-group 中 菜单与一系列按钮混合在一起。


          <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>

            <div class="btn-group" role="group">
              <button
                id="btnGroupDrop1"
                type="button"
                class="btn btn-primary dropdown-toggle"
                data-mdb-toggle="dropdown"
                aria-expanded="false"
              >
                Dropdown
              </button>
              <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                <li><a class="dropdown-item" href="#">Dropdown link</a></li>
              </ul>
            </div>
          </div>
        

垂直变化


            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
            </div>
          


            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <div class="btn-group" role="group">
                <button
                  id="btnGroupVerticalDrop1"
                  type="button"
                  class="btn btn-primary dropdown-toggle"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                >
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
              </div>
              <button type="button" class="btn btn-primary">Button</button>
              <button type="button" class="btn btn-primary">Button</button>
              <div class="btn-group" role="group">
                <button
                  id="btnGroupVerticalDrop2"
                  type="button"
                  class="btn btn-primary dropdown-toggle"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                >
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
              </div>
              <div class="btn-group" role="group">
                <button
                  id="btnGroupVerticalDrop3"
                  type="button"
                  class="btn btn-primary dropdown-toggle"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                >
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
              </div>
              <div class="btn-group" role="group">
                <button
                  id="btnGroupVerticalDrop4"
                  type="button"
                  class="btn btn-primary dropdown-toggle"
                  data-mdb-toggle="dropdown"
                  aria-expanded="false"
                >
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                  <li><a class="dropdown-item" href="#">Dropdown link</a></li>
                </ul>
              </div>
            </div>
          

色彩
















          <div class="btn-group shadow-0" role="group">
            <button type="button" class="btn btn-light" data-mdb-color="dark">Left</button>
            <button type="button" class="btn btn-light" data-mdb-color="dark">Middle</button>
            <button type="button" class="btn btn-light" data-mdb-color="dark">Right</button>
          </div>

          <div class="btn-group shadow-0" role="group">
            <button type="button" class="btn btn-link" data-mdb-color="dark">Left</button>
            <button type="button" class="btn btn-link" data-mdb-color="dark">Middle</button>
            <button type="button" class="btn btn-link" data-mdb-color="dark">Right</button>
          </div>

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

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

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

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

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

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