From: Mark Otto Date: Wed, 15 Jan 2014 21:08:35 +0000 (-0800) Subject: Merge branch 'master' into docs_derp X-Git-Tag: v3.1.0~103 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a633fc042d4060499964fca7333edc5ac55cde4b;p=thirdparty%2Fbootstrap.git Merge branch 'master' into docs_derp Conflicts: docs/components.html docs/css.html --- a633fc042d4060499964fca7333edc5ac55cde4b diff --cc docs/components.html index 0c6fe0c2b9,ec15779b13..f33c0304b5 --- a/docs/components.html +++ b/docs/components.html @@@ -6,31 -6,33 +6,31 @@@ lead: "Over a dozen reusable component --- - -
-
-

Glyphicons

-
- -

Available glyphs

-

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask you include a link back to Glyphicons whenever possible.

-
-
    - {% for iconClassName in site.data.glyphicons %} -
  • - - glyphicon {{ iconClassName }} -
    • - {% endfor %} -
-
+ +
+

Glyphicons

+ +

Available glyphs

+

Includes 200 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.

+
+
    + {% for iconClassName in site.data.glyphicons %} +
  • + + glyphicon {{ iconClassName }} +
    • + {% endfor %} +
+
-

How to use

-

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

-
-

Don't mix with other components

-

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

-
+

How to use

+

For performance reasons, all icons require a base class and individual icon class. To use, place the following code just about anywhere. Be sure to leave a space between the icon and text for proper padding.

+
+

Don't mix with other components

-

Icon classes cannot be combined with other elements. They are designed to be standalone elements.

++

Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.

+
{% highlight html %} {% endhighlight %} @@@ -174,27 -177,28 +174,27 @@@ - -
-
-

Button groups

-
-

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

+ +
+

Button groups

-
-

Tooltips & popovers in button groups require special setting

-

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

-
+

Group a series of buttons together on a single line with the button group. Add on optional JavaScript radio and checkbox style behavior with our buttons plugin.

-
-

Basic example

-

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

-
-
- - - -
++
+

Tooltips & popovers in button groups require special setting

+

When using tooltips or popovers on elements within a .btn-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

+
+ +

Basic example

+

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

+
+
+ + +
+
{% highlight html %}
@@@ -795,25 -804,25 +795,33 @@@
{% endhighlight %} ++
++

Tooltips & popovers in input groups require special setting

++

When using tooltips or popovers on elements within an .input-group, you'll have to specify the option container: 'body' to avoid unwanted side effects (such as the element growing wider and/or losing its rounded corners when the tooltip or popover is triggered).

++
++
++

Don't mix with other components

++

Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.

++
-

Sizing

-

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

-
-
- @ - -
-
-
- @ - -
-
-
- @ - -
-
+

Sizing

+

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

+
+
+ @ + +
+
+
+ @ + +
+
+
+ @ + +
+
{% highlight html %}
@ @@@ -1412,37 -1427,37 +1420,37 @@@ {% endhighlight %} -
-

Mobile device caveats

-

There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

-
+
+

Mobile device caveats

+

There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details.

+
-
-
-

Always add labels

-

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the .sr-only class.

-
++
+

Always add labels

+

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline navbar forms, you can hide the labels using the .sr-only class.

+
- -

Add the .navbar-btn class to <button> elements not residing in a <form> to vertically center them in the navbar.

-
- +
{% highlight html %} {% endhighlight %} diff --cc docs/css.html index 22439aa77b,81b9e53c1f..09d7df3111 --- a/docs/css.html +++ b/docs/css.html @@@ -1568,36 -1580,40 +1568,40 @@@ For example, <section>Submit {% endhighlight %} +
+

Don't mix form groups with input groups

+

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

+
-

Inline form

-

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

-
-

Requires custom widths

-

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

-
-
-

Always add labels

-

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

-
-
-
-
- - -
-
- - -
-
- -
- -
-
+

Inline form

+

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

+
+

Requires custom widths

+

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

+
-
++
+

Always add labels

+

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

+
+
+
+
+ + +
+
+ + +
+
+ +
+ +
+
{% highlight html %}
@@@ -2349,29 -2373,31 +2353,29 @@@ ... {% endhighlight %} -
-
-

Responsive images

-

Looking for how to make images more responsive? Check out the responsive images section up top.

-
- ++
+

Responsive images

+

Looking for how to make images more responsive? Check out the responsive images section up top.

+
- -
-
-

Helper classes

-
-

Contextual colors

-

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

-
-

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

-

Nullam id dolor id nibh ultricies vehicula ut id elit.

-

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

-

Maecenas sed diam eget risus varius blandit sit amet non magna.

-

Etiam porta sem malesuada magna mollis euismod.

-

Donec ullamcorper nulla non metus auctor fringilla.

-
+ +
+

Helper classes

+ +

Contextual colors

+

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

+
+

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

+

Nullam id dolor id nibh ultricies vehicula ut id elit.

+

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

+

Maecenas sed diam eget risus varius blandit sit amet non magna.

+

Etiam porta sem malesuada magna mollis euismod.

+

Donec ullamcorper nulla non metus auctor fringilla.

+
{% highlight html %}

...

...