上一节:
下一节:

  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>
    尝试一下
    输出结果如下：
上一节:
下一节: