Bootstrap 3 按钮

Bootstrap 3 按钮是一个在前端开发中经常使用的重要组件。它能够让用户直观地了解哪些元素可点击并为用户带来合适数量的压力效应。在本文中，我们将介绍Bootstrap 3 按钮的概念、用法和实例。

概念

在 Bootstrap 3 中，按钮是由 CSS 样式预定义的 HTML 元素。用户可以使用简单的 HTML 代码将按钮添加到页面中，然后根据需要修改样式和行为。使用 Bootstrap 3 按钮可以让页面设计变得简单而又具有吸引力。

用法

使用 Bootstrap 3 按钮只需要在 HTML 元素上添加一些类，如下所示：

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

通过添加类 btn 和 btn-*，我们可以将按钮样式设置为不同的颜色和效果。可以使用以下类：

• btn-default
• btn-primary
• btn-success
• btn-info
• btn-warning
• btn-danger
• btn-link

此外，还可以使用以下类修改按钮的大小：

• btn-lg
• btn-sm
• btn-xs

实例

下面是一些常见的实例：

基本按钮

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>

按钮组

<div class="btn-group">
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-default">Default</button>
</div>

工具栏

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <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 mr-2" role="group" aria-label="Second group">
    <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="Third group">
    <button type="button" class="btn btn-success">8</button>
  </div>
</div>

表单按钮

<form>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="reset" class="btn btn-secondary">Reset</button>
  <button type="button" class="btn btn-danger">Cancel</button>
</form>

总结

Bootstrap 3 按钮是一个非常有用的组件。它能够为用户提供一些视觉反馈，并使页面设计变得更加美观、简单。在使用 Bootstrap 3 按钮时，我们首先需要了解它的概念和用法，然后可以根据实际需求进行定制。