button.css

按钮类型

使用对应语义的 class 可以快速创建一个按钮，每种类型的按钮具有不同的语义。

button 元素

<button type="button" class="btn">默认</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-error">错误</button>

input 元素和a元素


默认 主要 警告 错误 
<input type="button" class="btn" value="默认">
<input type="button" class="btn btn-primary" value="主要">
<input type="button" class="btn btn-warning" value="警告">
<input type="button" class="btn btn-error" value="错误">
<br>
<a href="javascript:;" class="btn">默认</a>
<a href="javascript:;" class="btn btn-primary">主要</a>
<a href="javascript:;" class="btn btn-warning">警告</a>
<a href="javascript:;" class="btn btn-error">错误</a>

按钮尺寸

使用不同的 class 改变按钮的尺寸。







<button type="button" class="btn btn-xlarge">更大尺寸</button>
<button type="button" class="btn btn-xlarge btn-primary">更大尺寸</button>
<br>
<button type="button" class="btn btn-large">较大尺寸</button>
<button type="button" class="btn btn-large btn-primary">较大尺寸</button>
<br>
<button type="button" class="btn btn-medium">一般尺寸</button>
<button type="button" class="btn btn-medium btn-primary">一般尺寸</button>
<br>
<button type="button" class="btn btn-small">较小尺寸</button>
<button type="button" class="btn btn-small btn-primary ">较小尺寸</button>
<br>
<button type="button" class="btn btn-xsmall">更小尺寸</button>
<button type="button" class="btn btn-xsmall btn-primary ">更小尺寸</button>
<br>
<button type="button" class="btn">默认尺寸</button>
<button type="button" class="btn btn-primary ">默认尺寸</button>
<br>

还可以添加 class.btn-block创建一个 100% 宽度的按钮。

<button type="button" class="btn btn-block btn-large">按钮变为块级元素</button>
<button type="button" class="btn btn-block btn-large btn-primary">按钮变为块级元素</button>

按钮组合

<div class="btn-group">
    <button class="btn btn-medium">Step1</button>
    <button class="btn btn-medium">Step2</button>
    <button class="btn btn-medium">Step3</button>
    <button class="btn btn-medium">Step4</button>
</div>

按钮禁用

<button class="btn btn-disabled">禁用</button>
<button class="btn btn-disabled btn-primary">禁用</button>>