master

分支 (1)

管理

管理

master

Light-Year-Admin-Using-Iframe-v5
/
lyear_components_button_group.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。">
<title>按钮组 - 光年(Light Year Admin V5)后台管理系统模板</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<link rel="stylesheet" type="text/css" href="css/materialdesignicons.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.min.css">
</head>

<body>
<div class="container-fluid">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">按钮组</div></header>
        <div class="card-body">

          <p>将一系列按钮组合在一行上或将它们堆叠在垂直列中。</p>

          <h6>基本示例</h6>
          <p>在 <code>.btn-group</code> 中用 <code>.btn</code> 包裹一系列按钮。</p>
          <div class="border-example">
            <div class="btn-group" role="group" aria-label="Basic example">
              <button type="button" class="btn btn-primary">左</button>
              <button type="button" class="btn btn-primary">中</button>
              <button type="button" class="btn btn-primary">右</button>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="Basic example"&gt;
  &lt;button type="button" class="btn btn-primary"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;右&lt;/button&gt;
&lt;/div&gt;</pre>

          <div class="callout callout-warning mb-3">
            <strong>确保角色正确并提供标签</strong>
            <p>为了让辅助技术（例如屏幕阅读器）传达一系列按钮被分组的意思，需要提供适当的角色属性。对于按钮组，这将是 <code>role="group"</code>，而工具栏应该有一个 <code>role="toolbar"</code>。</p>

            <p>此外，组和工具栏应该被赋予明确的标签，因为大多数辅助技术不会公布它们，尽管存在正确的角色属性。在此处提供的示例中，我们使用 <code>aria-label</code>，但也可以使用 <code>aria-labelledby</code> 等替代方法。</p>
          </div>

          <p>这些类也可以添加到链接组中，作为 <code>.nav</code> 导航组件的替代方案。</p>
          <div class="border-example">
            <div class="btn-group">
              <a href="#" class="btn btn-primary active" aria-current="page">选中的链接</a>
              <a href="#" class="btn btn-primary">链接</a>
              <a href="#" class="btn btn-primary">链接</a>
            </div>
          </div>
          <pre>&lt;div class="btn-group"&gt;
  &lt;a href="#" class="btn btn-primary active" aria-current="page"&gt;选中的链接&lt;/a&gt;
  &lt;a href="#" class="btn btn-primary"&gt;链接&lt;/a&gt;
  &lt;a href="#" class="btn btn-primary"&gt;链接&lt;/a&gt;
&lt;/div&gt;</pre>

          <h6>混合风格</h6>
          <div class="border-example">
            <div class="btn-group" role="group" aria-label="基本混合样式示例">
              <button type="button" class="btn btn-danger">左</button>
              <button type="button" class="btn btn-warning">中</button>
              <button type="button" class="btn btn-success">右</button>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="基本混合样式示例"&gt;
  &lt;button type="button" class="btn btn-danger"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-warning"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-success"&gt;右&lt;/button&gt;
&lt;/div&gt;</pre>

          <h6>轮廓样式</h6>
          <div class="border-example">
            <div class="btn-group" role="group" aria-label="基本边框样式示例">
              <button type="button" class="btn btn-outline-primary">左</button>
              <button type="button" class="btn btn-outline-primary">中</button>
              <button type="button" class="btn btn-outline-primary">右</button>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="基本边框样式示例"&gt;
  &lt;button type="button" class="btn btn-outline-primary"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-primary"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-primary"&gt;右&lt;/button&gt;
&lt;/div&gt;</pre>

          <h6>复选框和单选按钮组</h6>
          <p>将类似按钮的复选框和单选切换按钮组合成一个外观无缝的按钮组。</p>
          <div class="border-example">
            <div class="btn-group" role="group" aria-label="基本复选框切换按钮组">
              <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck1">复选框 1</label>

              <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck2">复选框 2</label>

              <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
              <label class="btn btn-outline-primary" for="btncheck3">复选框 3</label>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="基本复选框切换按钮组"&gt;
  &lt;input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off"&gt;
  &lt;label class="btn btn-outline-primary" for="btncheck1"&gt;复选框 1&lt;/label&gt;

  &lt;input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off"&gt;
  &lt;label class="btn btn-outline-primary" for="btncheck2"&gt;复选框 2&lt;/label&gt;

  &lt;input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off"&gt;
  &lt;label class="btn btn-outline-primary" for="btncheck3"&gt;复选框 3&lt;/label&gt;
&lt;/div&gt;</pre>

          <div class="border-example">
            <div class="btn-group" role="group" aria-label="基本单选切换按钮组">
              <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
              <label class="btn btn-outline-primary" for="btnradio1">单选框 1</label>

              <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
              <label class="btn btn-outline-primary" for="btnradio2">单选框 2</label>

              <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
              <label class="btn btn-outline-primary" for="btnradio3">单选框 3</label>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="基本单选切换按钮组"&gt;
  &lt;input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked&gt;
  &lt;label class="btn btn-outline-primary" for="btnradio1"&gt;单选框 1&lt;/label&gt;

  &lt;input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"&gt;
  &lt;label class="btn btn-outline-primary" for="btnradio2"&gt;单选框 2&lt;/label&gt;

  &lt;input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off"&gt;
  &lt;label class="btn btn-outline-primary" for="btnradio3"&gt;单选框 3&lt;/label&gt;
&lt;/div&gt;</pre>

          <h6>按钮工具栏</h6>
          <p>将多组按钮组组合成按钮工具栏以实现更复杂的组件。根据需要使用实用程序类来分隔组、按钮等。</p>
          <div class="border-example">
            <div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏">
              <div class="btn-group me-2" role="group" aria-label="第一组">
                <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="第二组">
                <button type="button" class="btn btn-secondary">5</button>
                <button type="button" class="btn btn-secondary">6</button>
                <button type="button" class="btn btn-secondary">7</button>
              </div>
              <div class="btn-group" role="group" aria-label="第三组">
                <button type="button" class="btn btn-info">8</button>
              </div>
            </div>
          </div>
          <pre>&lt;div class="btn-toolbar" role="toolbar" aria-label="带有按钮组的工具栏"&gt;
  &lt;div class="btn-group me-2" role="group" aria-label="第一组"&gt;
    &lt;button type="button" class="btn btn-primary"&gt;1&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;2&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;3&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;4&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group me-2" role="group" aria-label="第二组"&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;5&lt;/button&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;6&lt;/button&gt;
    &lt;button type="button" class="btn btn-secondary"&gt;7&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="btn-group" role="group" aria-label="第三组"&gt;
    &lt;button type="button" class="btn btn-info"&gt;8&lt;/button&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

          <p>随意将输入组与工具栏中的按钮组混合。与上面的示例类似，您可能需要一些实用程序来正确分隔事物。</p>
          <div class="border-example">
            <div class="btn-toolbar mb-3" role="toolbar" aria-label="带有按钮组的工具栏">
              <div class="btn-group me-2" role="group" aria-label="第一组">
                <button type="button" class="btn btn-outline-secondary">1</button>
                <button type="button" class="btn btn-outline-secondary">2</button>
                <button type="button" class="btn btn-outline-secondary">3</button>
                <button type="button" class="btn btn-outline-secondary">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="输入组示例" aria-describedby="btnGroupAddon">
              </div>
            </div>

            <div class="btn-toolbar justify-content-between" role="toolbar" aria-label="带有按钮组的工具栏">
              <div class="btn-group" role="group" aria-label="第一组">
                <button type="button" class="btn btn-outline-secondary">1</button>
                <button type="button" class="btn btn-outline-secondary">2</button>
                <button type="button" class="btn btn-outline-secondary">3</button>
                <button type="button" class="btn btn-outline-secondary">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="输入组示例" aria-describedby="btnGroupAddon2">
              </div>
            </div>
          </div>
          <pre>&lt;div class="btn-toolbar mb-3" role="toolbar" aria-label="带有按钮组的工具栏"&gt;
  &lt;div class="btn-group me-2" role="group" aria-label="第一组"&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;1&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;2&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;3&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;4&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="input-group"&gt;
    &lt;div class="input-group-text" id="btnGroupAddon"&gt;@&lt;/div&gt;
    &lt;input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon"&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="btn-toolbar justify-content-between" role="toolbar" aria-label="带有按钮组的工具栏"&gt;
  &lt;div class="btn-group" role="group" aria-label="第一组"&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;1&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;2&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;3&lt;/button&gt;
    &lt;button type="button" class="btn btn-outline-secondary"&gt;4&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="input-group"&gt;
    &lt;div class="input-group-text" id="btnGroupAddon2"&gt;@&lt;/div&gt;
    &lt;input type="text" class="form-control" placeholder="Input group example" aria-label="输入组示例" aria-describedby="btnGroupAddon2"&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

          <h6>尺寸</h6>
          <p>无需将按钮大小调整类应用于组中的每个按钮，只需将 <code>.btn-group-*</code> 添加到每个 <code>.btn-group</code>，包括嵌套多个组时的每个按钮。</p>
          <div class="border-example">
            <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
              <button type="button" class="btn btn-outline-dark">左</button>
              <button type="button" class="btn btn-outline-dark">中</button>
              <button type="button" class="btn btn-outline-dark">右</button>
            </div>
            <div class="btn-group" role="group" aria-label="Default button group">
              <button type="button" class="btn btn-outline-dark">左</button>
              <button type="button" class="btn btn-outline-dark">中</button>
              <button type="button" class="btn btn-outline-dark">右</button>
            </div>
            <div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
              <button type="button" class="btn btn-outline-dark">左</button>
              <button type="button" class="btn btn-outline-dark">中</button>
              <button type="button" class="btn btn-outline-dark">右</button>
            </div>
          </div>
          <pre>&lt;div class="btn-group btn-group-lg" role="group" aria-label="Large button group"&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;右&lt;/button&gt;
&lt;/div&gt;
&lt;div class="btn-group" role="group" aria-label="Default button group"&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;右&lt;/button&gt;
&lt;/div&gt;
&lt;div class="btn-group btn-group-sm" role="group" aria-label="Small button group"&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;左&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;中&lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-dark"&gt;右&lt;/button&gt;
&lt;/div&gt;</pre>

          <h6>嵌套</h6>
          <p>当您希望下拉菜单与一系列按钮混合时，将 <code>.btn-group</code> 放置在另一个 <code>.btn-group</code> 中。</p>
          <div class="border-example">
            <div class="btn-group" role="group" aria-label="带有嵌套下拉菜单的按钮组">
              <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-bs-toggle="dropdown" aria-expanded="false">
                  下拉
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                </ul>
              </div>
            </div>
          </div>
          <pre>&lt;div class="btn-group" role="group" aria-label="带有嵌套下拉菜单的按钮组"&gt;
  &lt;button type="button" class="btn btn-primary"&gt;1&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary"&gt;2&lt;/button&gt;

  &lt;div class="btn-group" role="group"&gt;
    &lt;button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"&gt;
      下拉
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" aria-labelledby="btnGroupDrop1"&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;下拉链接&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="dropdown-item" href="#"&gt;下拉链接&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>

          <h6>垂直变化</h6>
          <p>使一组按钮显示为垂直堆叠而不是水平堆叠。此处不支持拆分按钮下拉菜单。</p>
          <div class="border-example">
            <div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
              <button type="button" class="btn btn-dark">按钮</button>
              <button type="button" class="btn btn-dark">按钮</button>
              <button type="button" class="btn btn-dark">按钮</button>
              <button type="button" class="btn btn-dark">按钮</button>
              <button type="button" class="btn btn-dark">按钮</button>
              <button type="button" class="btn btn-dark">按钮</button>
            </div>
          </div>
          <div class="border-example">
            <div class="btn-group-vertical" role="group" aria-label="垂直按钮组">
              <button type="button" class="btn btn-primary">按钮</button>
              <button type="button" class="btn btn-primary">按钮</button>
              <div class="btn-group" role="group">
                <button id="btnGroupVerticalDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  下拉
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                </ul>
              </div>
              <button type="button" class="btn btn-primary">按钮</button>
              <button type="button" class="btn btn-primary">按钮</button>
              <div class="btn-group" role="group">
                <button id="btnGroupVerticalDrop2" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                </ul>
              </div>
              <div class="btn-group" role="group">
                <button id="btnGroupVerticalDrop3" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                </ul>
              </div>
              <div class="btn-group" role="group">
                <button id="btnGroupVerticalDrop4" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </button>
                <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                  <li><a class="dropdown-item" href="#">下拉链接</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="border-example">
            <div class="btn-group-vertical" role="group" aria-label="垂直单选切换按钮组">
              <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked="">
              <label class="btn btn-outline-danger" for="vbtn-radio1">单选框 1</label>
              <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
              <label class="btn btn-outline-danger" for="vbtn-radio2">单选框 2</label>
              <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3" autocomplete="off">
              <label class="btn btn-outline-danger" for="vbtn-radio3">单选框 3</label>
            </div>
          </div>
          <pre>&lt;div class="btn-group-vertical"&gt;
  ...
&lt;/div&gt;</pre>

        </div>
      </div>
    </div>

  </div>

</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
</body>
</html>