Bootstrap button


May 04, 2021 06:00 Bootstrap


Table of contents


Bootstrap button

This chapter will show you how to use the Bootstrap button through examples. A ny element with class .btn inherits the default appearance of the fillet gray button. But Bootstrap provides some options to define the style of the button, as shown in the following table:

The following styles can be used on the elements of the .

Class Describe Instance
.btn Add a basic style to the button Give it a try
.btn-default Default/Standard button Give it a try
.btn-primary Original button style (not actioned) Give it a try
.btn-success Represents a successful action Give it a try
.btn-info This style can be used for buttons to eject information Give it a try
.btn-warning A button that indicates that you need to operate with caution Give it a try
.btn-danger The operation of a button that represents a dangerous action Give it a try
.btn-link Make the button look like a link (still retains the button behavior) Give it a try
.btn-lg Make a big button Give it a try
.btn-sm Make a small button Give it a try
.btn-xs Make an ultra-small button Give it a try
.btn-block Block button (stretched to 100% width of parent element) Give it a try
.active The button is clicked Give it a try
.disabled Disable the button Give it a try

The following example demonstrates all of the above button class:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 按钮选项</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body></html>

The result is as follows:

Bootstrap button


The size of the button

The following table lists the classes for getting buttons of various sizes:

Class 描述
.btn-lg 这会让按钮看起来比较大。
.btn-sm 这会让按钮看起来比较小。
.btn-xs 这会让按钮看起来特别小。
.btn-block 这会创建块级的按钮,会横跨父元素的全部宽度。

The following example demonstrates all of the above button class:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 按钮大小</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><p>
   <button type="button" class="btn btn-primary btn-lg">
      大的原始按钮   </button>
   <button type="button" class="btn btn-default btn-lg">
      大的按钮   </button></p><p>
   <button type="button" class="btn btn-primary">
      默认大小的原始按钮   </button>
   <button type="button" class="btn btn-default">
      默认大小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-sm">
      小的原始按钮   </button>
   <button type="button" class="btn btn-default btn-sm">
      小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-xs">
      特别小的原始按钮   </button>
   <button type="button" class="btn btn-default btn-xs">
      特别小的按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg btn-block">
      块级的原始按钮   </button>
   <button type="button" class="btn btn-default btn-lg btn-block">
      块级的按钮   </button></p></body></html>

The result is as follows:

Bootstrap button


Button status

Bootstrap provides class for activation, disable, and other button states, which are explained in more detail below.

The activation status

When activated, the button appears as a pressed appearance (dark background, dark border, shadow).

The following table lists classes that activate button and anchor elements:

元素 Class
按钮元素 添加 .active class 来显示它是激活的。
锚元素 添加 .active class 到 <a> 按钮来显示它是激活的。

The following example demonstrates this:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 按钮激活状态</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><p>
   <button type="button" class="btn btn-default btn-lg ">
      默认按钮   </button>
   <button type="button" class="btn btn-default btn-lg active">
      激活按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮   </button>
   <button type="button" class="btn btn-primary btn-lg active">
      激活的原始按钮   </button></p></body></html>

The result is as follows:

Bootstrap button

The state is disabled

When you disable a button, its color fades by 50% and you lose the gradient.

The following table lists classes that disable button and anchor elements:

元素 Class
按钮元素 添加 disabled 属性 到 <button> 按钮。
锚元素 添加 disabled class 到 <a> 按钮。
注意:该 class 只会改变 <a> 的外观,不会改变它的功能。在这里,您需要使用自定义的 JavaScript 来禁用链接。

The following example demonstrates this:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 按钮禁用状态</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><p>
   <button type="button" class="btn btn-default btn-lg">
      默认按钮   </button>
   <button type="button" class="btn btn-default btn-lg" disabled="disabled">
      禁用按钮   </button></p><p>
   <button type="button" class="btn btn-primary btn-lg ">
      原始按钮   </button>
   <button type="button" class="btn btn-primary btn-lg" disabled="disabled">
      禁用的原始按钮   </button></p><p>
   <a href="#" class="btn btn-default btn-lg" role="button">
      链接   </a>
   <a href="#" class="btn btn-default btn-lg disabled" role="button">
      禁用链接   </a></p><p>
   <a href="#" class="btn btn-primary btn-lg" role="button">
      原始链接   </a>
   <a href="#" class="btn btn-primary btn-lg disabled" role="button">
      禁用的原始链接   </a></p></body></html>

The result is as follows:

Bootstrap button


Button label

You can use the button class on the elements of the . However, it is recommended that you use the button class on the element to avoid cross-browser insistency.

The following example demonstrates this:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 按钮标签</title>
   <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >
   <script src="//apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script></head><body><a class="btn btn-default" href="#" role="button">链接</a><button class="btn btn-default" type="submit">按钮</button><input class="btn btn-default" type="button" value="输入"><input class="btn btn-default" type="submit" value="提交"></body></html>

The result is as follows:

Bootstrap button

Extend the exercise

After learning the above, you must have a deeper understanding of Bootstrap buttons, then now you can try to see how to use Bootstrap responsive single button!