肉渣教程

按钮

上一节 下一节

心中有按钮,处处是按钮

<a><button><input>元素都可以作为按钮来用。

Link
<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">

运行一下

不同的颜色,不同的情景暗示

<!-- 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类,可以将元素变成块级元素(Block),则按钮的宽度会自动占满父元素宽度的100%。

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

运行一下

激活状态

添加.active类即可使按钮元素表现出被点中激活的样式。

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

运行一下

禁用状态

添加.disabled类即可使按钮元素表现出被禁用的样式;或设置disabled属性为disabled也能达到同样效果。

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

运行一下


按钮

上一节 下一节