按钮

轻松创建拥有不同样式的漂亮按钮。

用法

要应用这个组件，在一个 <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>