本文给大家介绍按钮标签的实例代码,具体内容如下:
通过将按钮类添加到 <a>, <button>, <input> 来实现按钮样式
<a class="btn btn-default" href="#" rel="external nofollow" 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">
仅仅 <button> 适用于导航条以及导航条控件
如果 <a> 被作为按钮使用而不是链接, 请注意添加 role="button"
高度推荐使用 <button>
选项
<!-- standard button -->
<button type="button" class="btn btn-default">default</button>
<!-- provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">primary</button>
<!-- indicates a successful or positive action -->
<button type="button" class="btn btn-success">success</button>
<!-- contextual button for informational alert messages -->
<button type="button" class="btn btn-info">info</button>
<!-- indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">warning</button>
<!-- indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">danger</button>
<!-- deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">link</button>
尺寸
通过添加 .btn-lg , .btn-sm , .btn-xs 来实现尺寸
<p>
<button type="button" class="btn btn-primary btn-lg">large button</button>
<button type="button" class="btn btn-default btn-lg">large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">default button</button>
<button type="button" class="btn btn-default">default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">small button</button>
<button type="button" class="btn btn-default btn-sm">small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">extra small button</button>
<button type="button" class="btn btn-default btn-xs">extra small button</button>
</p>
通过添加 .btn-block 来实现块级按钮
<button type="button" class="btn btn-primary btn-lg btn-block">block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">block level button</button>
激活状态
<button type="button" class="btn btn-primary btn-lg active">primary button</button>
<button type="button" class="btn btn-default btn-lg active">button</button>
禁用状态
ie9以下无法兼容
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">button</button>
以上所述是小编给大家介绍的bootstrap 3 按钮标签实例代码,希望对大家有所帮助