按钮
轻松创建拥有不同样式的漂亮按钮。
用法
要应用这个组件,在一个 <a> 或 <button> 元素中添加 btn
类即可。现在你已经创建了一个按钮。在 <button> 元素中添加disabled
属性可以禁用按钮。
示例
代码
<b class="btn">按钮</b>
<span class="btn">按钮</span>
<a class="btn">按钮</a>
<input type="button" class="btn" value="按钮">
<button class="btn">按钮</button>
<div class="btn">按钮</div>
按钮状态
示例
默认
信息
成功
警告
危险
链接
默认
激活
禁用
代码
<span class="btn ">Default</span>
<span class="btn btn-info">Primary</span>
<span class="btn btn-success">Success</span>
<span class="btn btn-warning">Warning</span>
<span class="btn btn-danger">Danger</span>
<span class="btn btn-link">Link</span>
<span class="btn active">Active</span>
<span class="btn disabled">Disabled</span>
按钮尺寸
示例
迷你按钮
迷你按钮
小按钮
小按钮
默认按钮
默认按钮
大按钮
大按钮
代码
<span class="btn btn-mi">...</span>
<span class="btn btn-sm">...</span>
<span class="btn">...</span>
<span class="btn btn-lg">...</span>
块按钮
块按钮将占满整个容器宽度。
示例
按钮
按钮
代码
<span class="btn btn-block">...</span>
<span class="btn btn-info btn-block">...</span>
按钮组
示例
按钮
按钮
按钮
按钮
一些其他文字。
代码
<div class="btn-group">
<span class="btn">...</span>
<span class="btn">...</span>
...
</div>
按钮组尺寸
示例
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
按钮
代码
<div class="btn-group btn-group-mi">
<span class="btn">...</span>
...
</div>
<div class="btn-group btn-group-sm">
<span class="btn">...</span>
...
</div>
<div class="btn-group">
<span class="btn">...</span>
...
</div>
<div class="btn-group btn-group-lg">
<span class="btn">...</span>
...
</div>
按钮工具栏中的按钮组
示例
代码
<div class="btn-toolbar">
<div class="btn-group">
<span class="btn">...</span>
...
</div>
<div class="btn-group">
<span class="btn btn-info">...</span>
...
</div>
</div>
垂直按钮组
示例
按钮
按钮
按钮
按钮
代码
<div class="btn-group-vertical">
<span class="btn">按钮</span>
...
</div>
两端对齐的按钮组
示例
按钮
按钮
按钮
按钮
代码
<div class="btn-group btn-group-justify">
<a class="btn" href="#">...</a>
...
</div>
<div class="btn-group btn-group-justify">
<span class="btn btn-info">...</span>
...
</div>