BootStrap中的按钮使用

来源：互联网发布：锤子官网域名不是t.tt 编辑：程序博客网时间：2024/04/29 18:22

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

网站中事件的触发往往依赖于按钮或者超链接，因此，按钮可以认为是网站不可或缺的组件。而BootStrap也包含了大量的按钮，但是与其他的库有很大的区别。本文则是对如何在BootStrap中使用按钮进行了讲解。

按钮样式

任何只要赋予了.btn这个类的Dom对象会自动继承默认样式：圆角灰色按钮。除此之外，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>

按钮状态

BootStrap也提供了修改按钮状态：active或者disabled的类。

激活状态

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

Element

Class

Description

Example

Button element

.active

Use .active class to show that it is activated.

Active 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>

按钮大小

Class

Description

Example

.btn-lg

This makes button size large.

Large Primary button

</button>

.btn-sm

This makes button size small.

Small Primary button

</button>

.btn-xs

This makes button size extra small.

Extra small Primary button

</button>

.btn-block

This creates block level buttons.

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>

0 0