第十一谈：按钮和按钮组

本节课我们来开始学习 Bootstrap 的按钮和按钮组的样式功能。

一．按钮样式

1. 使用.btn 和.btn-*实现按钮的预设样式；

      <button type="button" class="btn btn-primary">Bootstrap4.x</button>
      <button type="button" class="btn btn-secondary">Bootstrap4.x</button>
      <button type="button" class="btn btn-success">Bootstrap4.x</button>
      <button type="button" class="btn btn-danger">Bootstrap4.x</button>
      <button type="button" class="btn btn-warning">Bootstrap4.x</button>
      <button type="button" class="btn btn-info">Bootstrap4.x</button>
      <button type="button" class="btn btn-light">Bootstrap4.x</button>
      <button type="button" class="btn btn-dark">Bootstrap4.x</button>
      <button type="button" class="btn btn-link">Bootstrap4.x</button>

2. .btn 不单单在<button>元素下使用，也可以在<a>、<input>下使用；

      <a href="#" class="btn btn-success">Bootstrap4.x</a>
      <input type="submit" class="btn btn-danger" value="Bootstrap4.x">

3. 使用.btn .btn-outline-*可以实现按钮的轮廓效果；

      <button type="button" class="btn btn-outline-danger">Bootstrap4.x</button>
      <button type="button" class="btn btn-outline-warning">Bootstrap4.x</button>

4. 使用.btn-lg .btn-sm 可以实现按钮尺寸的大和小；

      <button type="button" class="btn btn-lg btn-success">Bootstrap4.x</button>
      <button type="button" class="btn btn-sm btn-danger">Bootstrap4.x</button>

5. 使用.btn-block 将按钮进行 block 区块设置；

      <button type="button" class="btn btn-success btn-block">Bootstrap4.x</button>
      <button type="button" class="btn btn-danger btn-block">Bootstrap4.x</button>

6. 使用.active 启用按钮(默认)，使用.disabled 禁用按钮，特别注意的禁用；

      <button type="button" class="btn btn-success active">Bootstrap4.x</button>
      <button type="button" class="btn btn-success" disabled>Bootstrap4.x</button>
      <a href="#" class="btn btn-success disabled">Bootstrap4.x</a> //写在 class 里
      <input type="submit" class="btn btn-danger" disabled value="Bootstrap4.x">

7. 添加 data-toggle="button"实现按钮切换效果，使用.active 可以默认按下；

      <button type="button" class="..." data-toggle="button">Bootstrap4.x</button>

二．按钮组样式

1. 使用.btn-group 实现传统方案的复选框和单选框样式；

      <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-secondary active">
          <input type="checkbox" checked> HTML
          </label>
                      <label class="btn btn-secondary">
          <input type="checkbox"> CSS
          </label>
                      <label class="btn btn-secondary">
          <input type="checkbox"> JavaScript
          </label>
      </div>
      
      <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-secondary active">
          <input type="radio" name="options" checked> HTML
          </label>
                      <label class="btn btn-secondary">
          <input type="radio" name="options"> CSS
          </label>
                      <label class="btn btn-secondary">
          <input type="radio" name="options"> JavaScript
          </label>
      </div>

2. 使用.btn-group .btn-group-toggle 实现全新方案的复选框和单选框；

      <div class="btn-group btn-group-toggle" data-toggle="buttons">

3. 使用.btn-group 构建普通的按钮组；

      <div class="btn-group">
          <button type="button" class="btn btn-secondary">左</button>
          <button type="button" class="btn btn-secondary">中</button>
          <button type="button" class="btn btn-secondary">右</button>
      </div>

4. 使用.btn-toolbar 构建分页工具类；

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

5. 使用.btn-group-lg 和.btn-group-sm 实现大尺寸和小尺寸；

      <div class="btn-group btn-group-lg">
      <div class="btn-group btn-group-sm">

6. 使用.btn-group-vertical 设置垂直按钮组；

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