阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Bootstrap4 按钮组

      Bootstrap4 按钮组

      Bootstrap 4 中允许我们将按钮放在同一行上。

      可以在 <div> 元素上添加 .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>
      
      目录
      目录