Bootstrap 按钮

本章将经过实例解说怎么运用 Bootstrap 按钮。任何带有 class .btn 的元素都会承继圆角灰色按钮的默许外观。可是 Bootstrap 供给了一些选项来界说按钮的款式,具体如下表所示:

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

描绘 实例
.btn 为按钮增加根本款式 测验一下
.btn-default 默许/规范按钮 测验一下
.btn-primary 原始按钮款式(未被操作) 测验一下
.btn-success 表明成功的动作 测验一下
.btn-info 该款式可用于要弹出信息的按钮 测验一下
.btn-warning 表明需求慎重操作的按钮 测验一下
.btn-danger 表明一个风险动作的按钮操作 测验一下
.btn-link 让按钮看起来像个链接 (依然保存按钮行为) 测验一下
.btn-lg 制造一个大按钮 测验一下
.btn-sm 制造一个小按钮 测验一下
.btn-xs 制造一个超小按钮 测验一下
.btn-block 块级按钮(拉伸至父元素100%的宽度) 测验一下
.active 按钮被点击 测验一下
.disabled 禁用按钮 测验一下

下面的实例演示了上面一切的按钮 class:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮选项</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

按钮选项

按钮巨细

下表列出了取得各种巨细按钮的 class:

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

下面的实例演示了上面一切的按钮 class:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮巨细</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

按钮巨细

按钮状况

Bootstrap 供给了激活、禁用等按钮状况的 class,下面将进行具体解说。

激活状况

按钮在激活时将呈现为被按压的外观(深色的布景、深色的边框、暗影)。

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

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

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮激活状况</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

按钮激活状况

禁用状况

当您禁用一个按钮时,它的色彩会变淡 50%,并失掉突变。

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

元素Class
按钮元素增加 disabled 特点 到 <button> 按钮。
锚元素增加 disabled class 到 <a> 按钮。
留意:该 class 只会改动 <a> 的外观,不会改动它的功用。在这里,您需求运用自界说的 JavaScript 来禁用链接。

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮禁用状况</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

按钮禁用状况

按钮标签

您能够在 <a>、<button> 或 <input> 元素上运用按钮 class。可是主张您在 <button> 元素上运用按钮 class,防止跨浏览器的不一致性问题。

下面的实例演示了这点:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 按钮标签</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></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>

成果如下所示:

按钮标签