Bootstrap 按钮



  • 按钮样式

    Bootstrap 提供了不同样式的按钮:
    <div class="container">
       <button type="button" class="btn">Basic</button>
       <button type="button" class="btn btn-primary">Primary</button>
       <button type="button" class="btn btn-secondary">Secondary</button>
       <button type="button" class="btn btn-success">Success</button>
       <button type="button" class="btn btn-info">Info</button>
       <button type="button" class="btn btn-warning">Warning</button>
       <button type="button" class="btn btn-danger">Danger</button>
       <button type="button" class="btn btn-dark">Dark</button>
       <button type="button" class="btn btn-light">Light</button>
       <button type="button" class="btn btn-link">Link</button>
    </div>
    
    
    输出结果如下:
    按钮类可用于<a>,<button>或<input>元素:
    <div class="container">
       <a href="#" class="btn btn-info" role="button">Link Button</a>
       <button type="button" class="btn btn-info">Button</button>
       <input type="button" class="btn btn-info" value="Input Button">
       <input type="submit" class="btn btn-info" value="Submit Button">
    </div>
    
    
    为什么我们在链接的href属性中加入#号?
    由于我们没有任何页面可以链接到该页面,并且我们不想收到“404”消息,因此我们将#用作链接。在现实生活中,它当然应该是“搜索”页面的真实URL。
  • 按钮轮廓

    Bootstrap 提供了 8 种轮廓/边框按钮:
    <div class="container">
       <button type="button" class="btn btn-outline-primary">Primary</button>
       <button type="button" class="btn btn-outline-secondary">Secondary</button>
       <button type="button" class="btn btn-outline-success">Success</button>
       <button type="button" class="btn btn-outline-info">Info</button>
       <button type="button" class="btn btn-outline-warning">Warning</button>
       <button type="button" class="btn btn-outline-danger">Danger</button>
       <button type="button" class="btn btn-outline-dark">Dark</button>
       <button type="button" class="btn btn-outline-light text-dark">Light</button>
    </div>
    
    
    输出结果如下:
  • 按钮尺寸

    .btn-lg 类用于大按钮,.btn-sm 类用于小按钮:
    <div class="container">
       <button type="button" class="btn btn-primary btn-lg">大按钮</button>
       <button type="button" class="btn btn-primary">默认的</button>
       <button type="button" class="btn btn-primary btn-sm">小按钮</button>
    </div>
    
    
    输出结果如下:
  • 块级按钮

    添加类 .btn-block 来创建一个块级按钮,该按钮跨越父元素的整个宽度。
    <div class="container">
       <button type="button" class="btn btn-primary btn-block">全宽度块级按钮</button>
    </div>
    
    
    输出结果如下:
  • 激活/禁用按钮

    .active 类使按钮看起来像被按下,而 disable 属性使按钮不可点击。 请注意,<a>元素不支持 disable 属性,因此必须使用 .disable 类使其在视觉上显得已禁用。
    <div class="container">
       <button type="button" class="btn btn-primary active">Active</button>
       <button type="button" class="btn btn-primary" disabled>Disabled</button>
       <a href="#" class="btn btn-primary disabled">Disabled Link</a>
    </div>
    
    
    输出结果如下:
    Disabled Link
  • 加载器按钮

    下面示例演示了加载器按钮:
    <div class="container">
          <button class="btn btn-primary">
             <span class="spinner-border spinner-border-sm"></span>
          </button>
          
          <button class="btn btn-primary">
             <span class="spinner-border spinner-border-sm"></span>
             Loading..
          </button>
          
          <button class="btn btn-primary" disabled>
             <span class="spinner-border spinner-border-sm"></span>
             Loading..
          </button>
          
          <button class="btn btn-primary" disabled>
             <span class="spinner-grow spinner-grow-sm"></span>
             Loading..
          </button>
       </div>
    
    
    输出结果如下: