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