BootStrap中的button使用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

原文地址：http://www.phloxblog.in/bootstrap-buttons/#.U5xYso2fclm

站点中事件的触发往往依赖于button或者超链接。因此，button能够觉得是站点不可或缺的组件。

而BootStrap也包括了大量的button，可是与其它的库有非常大的差别。本文则是对怎样在BootStrap中使用button进行了解说。

button样式

不论什么仅仅要赋予了.btn这个类的Dom对象会自己主动继承默认样式：圆角灰色button。除此之外，BootStrap也提供了其它的样式选项，例如以下表所看到的：

类名	描写叙述	颜色	实例
btn	Default/ Standard button.	White	<button type=”button”>Default Button</button>
btn-primary	Identifies the primary action .	Blue	<button type=”button”>Primary Button</button>
btn-success	Indicates a successful action.	Green	<button type=”button”>Success Button</button>
btn-warning	Indicates caution.	Yellow	<button type=”button”>Warning Button</button>
btn-danger	Indicates a dangerous action.	Red	<button type=”button”>Danger Button</button>
btn-link	Making a button look like link.	Blue	<button type=”button”>Link Button</button>

button状态

BootStrap也提供了改动button状态：active或者disabled的类。

激活状态

button呈现为按下的状态（含阴影的深灰色背景），下表解释了使用方法。

Element

Class

Description

Example

Button element

.active

Use .active class to show that it is activated.

Active Button

</button>

失效状态

当禁止某个button时。它的颜色会褪色50%而且失去其梯度权重。

Element

Class

Description

Example

Button element

disabled

Add the disabled attribute to <button> buttons.

Disabled Button

</button>

Anchor element

disabled

Add the disabled class to <a> buttons.

Disabled Link

</a>

button大小

Class	Description	Example
.btn-lg	This makes button size large.	<button type=”button”> Large Primary button </button>
.btn-sm	This makes button size small.	<button type=”button”> Small Primary button </button>
.btn-xs	This makes button size extra small.	<button type=”button”> Extra small Primary button </button>
.btn-block	This creates block level buttons.	<button type=”button”> Block level Primary button </button>

完整的代码例如以下所看到的：

<!DOCTYPE html>

<html>

  <head>

    <title>Try Bootstrap Online</title>

    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />

  </head>

  <body>

    <p>

      <button type="button" class="btn btn-link btn-lg">Large link button

   </button>

    </p>

    <p>

      <button type="button" class="btn btn-primary">

      Default size Primary button

   </button></p><p>

      <button type="button" class="btn btn-default">

      Default normal size button

   </button>

    </p>

    <p>

      <button type="button" class="btn btn-warning btn-sm">

      Small warning button

   </button>

    </p>

    <p>

      <button type="button" class="btn btn-success btn-xs">

      Extra small success button

   </button>

    </p>

    <p>

      <button type="button" class="btn btn-primary btn-lg btn-block btn-lg active">

      Block level Active Primary button

   </button>

      <button type="button" class="btn btn-danger  btn-default btn-lg btn-block btn-lg disabled">

      Danger Block Disabled button

   </button>

    </p>

  </body>

</html>