Bootstarp学习教程（8）按钮-蒲公英云

Bootstarp学习教程（8）按钮

港控/mmm° 2023-10-16 19:11 92阅读 0赞

按钮

选项

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

Center

尺寸:使用.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>

Center 1

通过给按钮添加 "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>

Center 2

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

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

Center 3
可作按钮使用的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">