Bootstrap系列---按钮

缺乏、安全感 2022-01-25 18:11 327阅读 0赞

# Bootstrap 按钮 #

注：本系列转载于菜鸟教程，仅用以自己学习总结和使用，只会显示自己学习使用的内容，

详细内容可以查看菜鸟教程网址：[https://www.runoob.com/bootstrap/bootstrap-buttons.html][https_www.runoob.com_bootstrap_bootstrap-buttons.html]

任何带有 class **.btn** 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>, <button>, 或 <input> 元素上：

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>.btn</td> 
   <td>为按钮添加基本样式</td> 
  </tr> 
  <tr> 
   <td>.btn-default</td> 
   <td>默认/标准按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-primary</td> 
   <td>原始按钮样式（未被操作）</td> 
  </tr> 
  <tr> 
   <td>.btn-success</td> 
   <td>表示成功的动作</td> 
  </tr> 
  <tr> 
   <td>.btn-info</td> 
   <td>该样式可用于要弹出信息的按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-warning</td> 
   <td>表示需要谨慎操作的按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-danger</td> 
   <td>表示一个危险动作的按钮操作</td> 
  </tr> 
  <tr> 
   <td>.btn-link</td> 
   <td>让按钮看起来像个链接 (仍然保留按钮行为)</td> 
  </tr> 
  <tr> 
   <td>.btn-lg</td> 
   <td>制作一个大按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-sm</td> 
   <td>制作一个小按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-xs</td> 
   <td>制作一个超小按钮</td> 
  </tr> 
  <tr> 
   <td>.btn-block</td> 
   <td>块级按钮(拉伸至父元素100%的宽度)</td> 
  </tr> 
  <tr> 
   <td>.active</td> 
   <td>按钮被点击</td> 
  </tr> 
  <tr> 
   <td>.disabled</td> 
   <td>禁用按钮</td> 
  </tr> 
 </tbody> 
</table>

## 按钮大小 ##

下表列出了获得各种大小按钮的 class：

<table> 
 <tbody> 
  <tr> 
   <th>Class</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>.btn-lg</td> 
   <td>这会让按钮看起来比较大。</td> 
  </tr> 
  <tr> 
   <td>.btn-sm</td> 
   <td>这会让按钮看起来比较小。</td> 
  </tr> 
  <tr> 
   <td>.btn-xs</td> 
   <td>这会让按钮看起来特别小。</td> 
  </tr> 
  <tr> 
   <td>.btn-block</td> 
   <td>这会创建块级的按钮，会横跨父元素的全部宽度。</td> 
  </tr> 
 </tbody> 
</table>

## 按钮状态 ##

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

### 激活状态 ###

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

<table> 
 <tbody> 
  <tr> 
   <th>元素</th> 
   <th>Class</th> 
  </tr> 
  <tr> 
   <td>按钮元素</td> 
   <td>添加&nbsp;<strong>.active</strong>&nbsp;class 来显示它是激活的。</td> 
  </tr> 
  <tr> 
   <td>锚元素</td> 
   <td>添加&nbsp;<strong>.active</strong>&nbsp;class 到 &lt;a&gt; 按钮来显示它是激活的。</td> 
  </tr> 
 </tbody> 
</table>

### 禁用状态 ###

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

<table> 
 <tbody> 
  <tr> 
   <th>元素</th> 
   <th>Class</th> 
  </tr> 
  <tr> 
   <td>按钮元素</td> 
   <td>添加&nbsp;<strong>disabled</strong>&nbsp;<em>属性</em>&nbsp;到 &lt;button&gt; 按钮。</td> 
  </tr> 
  <tr> 
   <td>锚元素</td> 
   <td>添加&nbsp;<strong>disabled</strong>&nbsp;<em>class</em>&nbsp;到 &lt;a&gt; 按钮。</td> 
  </tr> 
 </tbody> 
</table>

## 按钮标签 ##

您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class，避免跨浏览器的不一致性问题。

## 自适应大小的按钮组 ##

可以通过 .btn-group-justified 类来设置自适应大小的按钮组。

## 内嵌下拉菜单的按钮组 ##

按钮组内嵌的按钮可以设置下拉菜单

[https_www.runoob.com_bootstrap_bootstrap-buttons.html]: https://www.runoob.com/bootstrap/bootstrap-buttons.html