From d7f84d1220719cdf2272c9aa3c6731a932394c58 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 7 May 2013 18:07:06 -0700 Subject: Require .btn-default for regular buttons * Instead of , use for standard, gray button * Improves ability to customize buttons by encouraging folks to not override .btn and thus overriding all button modifier classes * Updates docs to reflect the change * Reorganize buttons CSS --- docs/docs.html | 187 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 93 insertions(+), 94 deletions(-) (limited to 'docs/docs.html') diff --git a/docs/docs.html b/docs/docs.html index 88ab16d7c..5b502cf89 100644 --- a/docs/docs.html +++ b/docs/docs.html @@ -2047,7 +2047,7 @@ For example, <section> should be wrapped as inline.

Button options

-

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.

+

Use any of the available button classes to quickly create a styled button.

@@ -2080,56 +2080,55 @@ For example, <section> should be wrapped as inline. {% endhighlight %} -

Button sizes

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

- - + +

- +

- - + +

- - + +

{% highlight html %}

- - + +

- +

- - + +

- - + +

{% endhighlight %}

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

- - + +
{% highlight html %} - - + + {% endhighlight %} @@ -2139,12 +2138,12 @@ For example, <section> should be wrapped as inline.

Button element

Add the disabled attribute to <button> buttons.

- - + +

{% highlight html %} - + {% endhighlight %}
@@ -2155,12 +2154,12 @@ For example, <section> should be wrapped as inline.

Anchor element

Add the .disabled class to <a> buttons.

- Primary link - Link + Primary link + Link

{% highlight html %} -Primary link -Link +Primary link +Link {% endhighlight %}

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. @@ -2171,19 +2170,19 @@ For example, <section> should be wrapped as inline.

-

One class, multiple tags

-

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

+

Using multiple tags

+

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

- Link - - - + Link + + +
{% highlight html %} -Link - - - +Link + + + {% endhighlight %}
@@ -2599,20 +2598,20 @@ For example, <section> should be wrapped as inline.
- - - - + + + +
{% highlight html %}
- - - - + + + +
{% endhighlight %} @@ -2638,8 +2637,8 @@ For example, <section> should be wrapped as inline.
{% highlight html %}
- User - + User +
  • Edit
  • Delete
    • @@ -2652,18 +2651,18 @@ For example, <section> should be wrapped as inline.
    Large button
    - Star + Star
    {% highlight html %} - Star + Star {% endhighlight %}
    Small button
    - +
    {% highlight html %} - + {% endhighlight %} @@ -2878,16 +2877,16 @@ For example, <section> should be wrapped as inline.

    Wrap a series of buttons with .btn in .btn-group.

    - - - + + +
    {% highlight html %}
    - - - + + +
    {% endhighlight %} @@ -2896,18 +2895,18 @@ For example, <section> should be wrapped as inline.
    - - - - + + + +
    - - - + + +
    - +
    @@ -2923,12 +2922,12 @@ For example, <section> should be wrapped as inline.

    Place buttons groups within button groups when you want dropdown menus mixed with a series of buttons.

    - - - + + +
    - @@ -2945,10 +2944,10 @@ For example, <section> should be wrapped as inline.

    Make a set of buttons appear vertically stacked rather than horizontally.

    - - - - + + + +
    {% highlight html %} @@ -2961,9 +2960,9 @@ For example, <section> should be wrapped as inline.

    Make a group of buttons stretch at the same size to span the entire width of its parent. This only works with <a> elements as the <button> doesn't pick up these styles.

    - Left - Right - Middle + Left + Right + Middle
    {% highlight html %} @@ -2994,7 +2993,7 @@ For example, <section> should be wrapped as inline.
    - +
    • Action
    • Another action
      • @@ -3048,7 +3047,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}
      -
        @@ -3066,8 +3065,8 @@ For example, <section> should be wrapped as inline.
        - - + +
        • Action
        • Another action
          • @@ -3125,8 +3124,8 @@ For example, <section> should be wrapped as inline. {% highlight html %}
          - - +
            @@ -3144,7 +3143,7 @@ For example, <section> should be wrapped as inline.
            -
              @@ -3156,7 +3155,7 @@ For example, <section> should be wrapped as inline.
            -
              @@ -3168,7 +3167,7 @@ For example, <section> should be wrapped as inline.
            -
              @@ -3184,7 +3183,7 @@ For example, <section> should be wrapped as inline. {% highlight html %}
              -
                @@ -3194,7 +3193,7 @@ For example, <section> should be wrapped as inline.
                -
                  @@ -3204,7 +3203,7 @@ For example, <section> should be wrapped as inline.
                  -
                    @@ -3218,8 +3217,8 @@ For example, <section> should be wrapped as inline.
                    - - + +
                    - - + +
                    {% highlight html %}
                    - - +
                      -- cgit v1.2.3