rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

rearrange docs components

Browse source
This commit is contained in:
Mark Otto 2014-07-11 22:34:47 -07:00
parent 60cf7d45db
commit d9bb7ddac5
16 changed files with 1015 additions and 1548 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/components/buttons.md
View file

@ -1,6 +1,7 @@
<a id="buttons"></a>
# Buttons
---
layout: page
title: Buttons
---
Use any of the available button classes to quickly create a styled button.
@ -24,10 +25,6 @@ Use any of the available button classes to quickly create a styled button.
<button type="button" class="btn btn-link">Link</button>
{% endexample %}
<a id="buttons-sizes"></a>
## Sizes
Fancy larger or smaller buttons? Add `.btn-lg`, `.btn-sm`, or `.btn-xs` for additional sizes.
@ -54,10 +51,6 @@ Create block level buttons—those that span the full width of a parent—by add
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
{% endexample %}
<a id="buttons-active"></a>
## Active state
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. **There's no need to add a class to `<button>`s as they use a pseudo-class**. However, you can still force the same active appearance with `.active` should you need to replicate the state programmatically.
@ -67,10 +60,6 @@ Buttons will appear pressed (with a darker background, darker border, and inset
<a href="#" class="btn btn-secondary btn-lg active" role="button">Link</a>
{% endexample %}
<a id="buttons-disabled"></a>
## Disabled state
Make buttons look unclickable by adding the `disabled` boolean attribute to any `<button>` element.
@ -102,10 +91,6 @@ As `<a>` elements don't support the `disabled` attribute, you must add the `.dis
<p>While button classes can be used on <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements, only <code>&lt;button&gt;</code> elements are supported within our nav and navbar components.</p>
</div>
<a id="buttons-tags"></a>
## Button tags
Use the button classes on an `<a>`, `<button>`, or `<input>` element.
@ -117,7 +102,6 @@ Use the button classes on an `<a>`, `<button>`, or `<input>` element.
<input class="btn btn-secondary" type="submit" value="Submit">
{% endexample %}
<div class="bs-callout bs-callout-warning">
<h4>Cross-browser rendering</h4>
<p>As a best practice, <strong>we highly recommend using the <code>&lt;button&gt;</code> element whenever possible</strong> to ensure matching cross-browser rendering.</p>