From 7b23005f58d3128ce08d5327f4e5c19e678d86bb Mon Sep 17 00:00:00 2001 From: Supergibbs Date: Fri, 29 May 2015 11:29:56 -0700 Subject: [PATCH 1/3] Clarified documentation about input groups and added an example of multiple buttons --- docs/_includes/components/input-groups.html | 44 ++++++++++++++++++++- docs/_includes/nav/components.html | 1 + 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 665c5b7cc9..7ea56c1c94 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -1,7 +1,7 @@

Input groups

-

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

+

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon or .input-group-btn to prepend or append elements to a single .form-control.

Textual <input>s only

@@ -24,7 +24,7 @@

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input.

-

We do not support multiple add-ons on a single side.

+

We do not support multiple add-ons (.input-group-addon or .input-group-btn) on a single side.

We do not support multiple form-controls in a single input group.

@@ -312,5 +312,45 @@
+{% endhighlight %} + +

Multiple buttons

+

While you can only have one add-on per side, you can have multiple buttons inside a single .input-group-btn.

+ +
+
+
+
+ + +
+ +
+
+
+
+ +
+ + +
+
+
+
+ +{% highlight html %} +
+
+ +
+ +
+ +
+ +
+ +
+
{% endhighlight %}
diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 1ec91b5631..66b9ac0a01 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -45,6 +45,7 @@
  • Button addons
  • Buttons with dropdowns
  • Segmented buttons
    • +
  • Multiple buttons
  • From 24918b3bd854049fa1f3cecad81677576f2e1a29 Mon Sep 17 00:00:00 2001 From: Supergibbs Date: Fri, 29 May 2015 11:32:25 -0700 Subject: [PATCH 2/3] A little cleanup --- docs/_includes/components/input-groups.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 7ea56c1c94..7f5d2fe73e 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -96,7 +96,6 @@ {% endhighlight %} -

    Checkboxes and radio addons

    Place any checkbox or radio option within an input group's addon instead of text.

    @@ -140,7 +139,6 @@ {% endhighlight %} -

    Button addons

    Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you'll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.

    @@ -185,7 +183,6 @@ {% endhighlight %}

    Buttons with dropdowns

    -

    From 185dd0d8246e0250885aa9983d8a02ca8c79a329 Mon Sep 17 00:00:00 2001 From: Zac Echola Date: Mon, 13 Jul 2015 13:17:02 -0500 Subject: [PATCH 3/3] Move help block docs up page, add `.help-block` to validation example --- docs/_includes/css/forms.html | 52 +++++++++++++++++++---------------- docs/_includes/nav/css.html | 2 +- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index f0d59018bf..fab5ea1029 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -609,6 +609,30 @@ {% endhighlight %} +

    Help text

    +

    Block level help text for form controls.

    +
    +

    Associating help text with form controls

    +

    Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

    +
    +
    + +
    + + +
    + A block of help text that breaks onto a new line and may extend beyond one line. + +
    +{% highlight html %} + + +... +A block of help text that breaks onto a new line and may extend beyond one line. +{% endhighlight %} +
    + +

    Validation states

    Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

    @@ -622,7 +646,8 @@
    - + + A block of help text that breaks onto a new line and may extend beyond one line.
    @@ -661,7 +686,8 @@ {% highlight html %}
    - + + A block of help text that breaks onto a new line and may extend beyond one line.
    @@ -1001,25 +1027,3 @@
    {% endhighlight %} -

    Help text

    -

    Block level help text for form controls.

    -
    -

    Associating help text with form controls

    -

    Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

    -
    -
    - -
    - - -
    - A block of help text that breaks onto a new line and may extend beyond one line. - -
    -{% highlight html %} - - -... -A block of help text that breaks onto a new line and may extend beyond one line. -{% endhighlight %} -
    diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index 02becfe680..59134bdfcf 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -73,9 +73,9 @@
  • Focus state
  • Disabled state
  • Readonly state
    • +
  • Help text
  • Validation states
  • Control sizing
    • -
  • Help text