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.

<button type=”button”>

Active Button

</button>

失效状态

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

Element

Class

Description

Example

Button element

disabled

Add the disabled attribute to <button> buttons.

<button type=”button” disabled=”disabled”>

Disabled Button

</button>

Anchor element

disabled

Add the disabled class to <a> buttons.

<a href=”#” role=”button”>

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>

BootStrap中的button使用

上一篇:Java开发笔记(六十五)集合:HashSet和TreeSet


下一篇:Oracle误删数据文件后出现oracle initialization or shutdown in progress解决