diff --git a/docs/base-css.html b/docs/base-css.html index 979a873853..618dee29a4 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1202,6 +1202,9 @@ For example, <code>section</code> should be wrapped as inline. + +

Default buttons

+

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements for the best rendering.

@@ -1249,13 +1252,14 @@ For example, <code>section</code> should be wrapped as inline.
-

Buttons for actions

-

As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.

-

Button styles can be applied to anything with the .btn class applied. However, typically you'll want to apply these to only <a> and <button> elements.

-

Cross browser compatibility

+

Cross browser compatibility

IE9 doesn't crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled button elements, rendering text gray with a nasty text-shadow that we cannot fix.

-

Multiple sizes

+ +
+ + +

Button sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

@@ -1269,29 +1273,51 @@ For example, <code>section</code> should be wrapped as inline.

-
-

Disabled state

-

For disabled buttons, add the .disabled class to links and the disabled attribute for <button> elements.

-

+ + +


+ + +

Disabled state

+

Make buttons look unclickable by fading them back 50%.

+ +

Anchor element

+

Add the .disabled class to <a> buttons.

+

Primary link Link

-

- - -

+
+<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>
+<a href="#" class="btn btn-large disabled">Link</a>
+

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

-

One class, multiple tags

+

Button element

+

Add the disabled attribute to <button> buttons.

+

+ + +

+
+<button class="btn btn-large btn-primary disabled" disabled="disabled">Primary button</button>
+<button class="btn btn-large" disabled>Button</button>
+
+ + +
+ + +

One class, multiple tags

Use the .btn class on an <a>, <button>, or <input> element.

-
-Link - - - + + Link + + +
 <a class="btn" href="">Link</a>
@@ -1346,6 +1372,10 @@ For example, <code>section</code> should be wrapped as inline.
         
  • icon-download
  • icon-upload
  • icon-inbox
  • + + +
    + -
    -
    - +
    +
    + -
    -
    - +
    +
    + -
    -
    - +
    +
    + +
    +
    + -
    -
    - +
    +
    + -
    -
    - +
    +
    + -
    -
    - +
    +
    +