Bootstarp学习教程（8） 按钮

按钮

选项

<!-- Standard button -->
<button type="button" class="btn btn-default">默认</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">主要</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">成功</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">信息</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">警告</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">危险</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">链接</button>

尺寸:使用

.btn-lg

、

.btn-sm

、

.btn-xs

可以获得不同尺寸的按钮

<!-- Standard button -->
<button type="button" class="btn btn-default btn-lg">默认</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary btn-sm">主要</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-xs">成功</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info btn-lg">信息</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning btn-sm">警告</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger btn-xs">危险</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link btn-xs">链接</button>

通过给按钮添加

"btn-block"

可以使其充满父节点100%的宽度，而且按钮也变为了块级（block）元素。

活动状态:当按钮处于活动状态时，其表现为被按压下（底色更深，边框夜色更深，内置阴影）。对于

<button>

元素，是通过

:active

实现的。对于

<a>

元素，是通过

.active

实现的。然而，你还可以联合使用

.active

<button>

并通过编程的方式使其处于活动状态。

<button type="button" class="btn btn-primary btn-lg active">主要按钮</button>
<button type="button" class="btn btn-default btn-lg active">默认按钮</button>

禁用状态：通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。

<button type="button" class="btn btn-primary btn-lg active" disabled="disabled">主要按钮</button>

可作按钮使用的HTML标签：可以为

<a>

、

<button>

或

<input>

元素添加按钮class。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">