diff options
| -rw-r--r-- | docs/_includes/components/input-groups.html | 47 | ||||
| -rw-r--r-- | docs/_includes/css/forms.html | 52 | ||||
| -rw-r--r-- | docs/_includes/nav/components.html | 1 | ||||
| -rw-r--r-- | docs/_includes/nav/css.html | 2 |
4 files changed, 72 insertions, 30 deletions
diff --git a/docs/_includes/components/input-groups.html b/docs/_includes/components/input-groups.html index 5d9a2f9c0..6453af1c3 100644 --- a/docs/_includes/components/input-groups.html +++ b/docs/_includes/components/input-groups.html @@ -1,7 +1,7 @@ <div class="bs-docs-section"> <h1 id="input-groups" class="page-header">Input groups</h1> - <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> to prepend or append elements to a single <code>.form-control</code>.</p> + <p class="lead">Extend form controls by adding text or buttons before, after, or on both sides of any text-based <code><input></code>. Use <code>.input-group</code> with an <code>.input-group-addon</code> or <code>.input-group-btn</code> to prepend or append elements to a single <code>.form-control</code>.</p> <div class="bs-callout bs-callout-danger" id="callout-inputgroup-text-input-only"> <h4>Textual <code><input></code>s only</h4> @@ -24,7 +24,7 @@ <h2 id="input-groups-basic">Basic example</h2> <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p> - <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p> + <p><strong class="text-danger">We do not support multiple add-ons (<code>.input-group-addon</code> or <code>.input-group-btn</code>) on a single side.</strong></p> <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p> <form class="bs-example bs-example-form" data-example-id="simple-input-groups"> <div class="input-group"> @@ -108,7 +108,6 @@ </div> {% endhighlight %} - <h2 id="input-groups-checkboxes-radios">Checkboxes and radio addons</h2> <p>Place any checkbox or radio option within an input group's addon instead of text.</p> <form class="bs-example bs-example-form" data-example-id="input-group-with-checkbox-radio"> @@ -152,7 +151,6 @@ </div><!-- /.row --> {% endhighlight %} - <h2 id="input-groups-buttons">Button addons</h2> <p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p> <form class="bs-example bs-example-form" data-example-id="input-group-with-button"> @@ -197,7 +195,6 @@ {% endhighlight %} <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2> - <p></p> <form class="bs-example bs-example-form" data-example-id="input-group-dropdowns"> <div class="row"> <div class="col-lg-6"> @@ -325,4 +322,44 @@ </div> </div> {% endhighlight %} + + <h2 id="input-groups-buttons-multiple">Multiple buttons</h2> + <p>While you can only have one add-on per side, you can have multiple buttons inside a single <code>.input-group-btn</code>.</p> + <form class="bs-example bs-example-form" data-example-id="input-group-multiple-buttons"> + <div class="row"> + <div class="col-lg-6"> + <div class="input-group"> + <div class="input-group-btn"> + <button type="button" class="btn btn-default" aria-label="Bold"><span class="glyphicon glyphicon-bold"></span></button> + <button type="button" class="btn btn-default" aria-label="Italic"><span class="glyphicon glyphicon-italic"></span></button> + </div> + <input type="text" class="form-control" aria-label="Text input with multiple buttons"> + </div><!-- /.input-group --> + </div><!-- /.col-lg-6 --> + <div class="col-lg-6"> + <div class="input-group"> + <input type="text" class="form-control" aria-label="Text input with multiple buttons"> + <div class="input-group-btn"> + <button type="button" class="btn btn-default" aria-label="Help"><span class="glyphicon glyphicon-question-sign"></span></button> + <button type="button" class="btn btn-default">Action</button> + </div> + </div><!-- /.input-group --> + </div><!-- /.col-lg-6 --> + </div><!-- /.row --> + </form> +{% highlight html %} +<div class="input-group"> + <div class="input-group-btn"> + <!-- Buttons --> + </div> + <input type="text" class="form-control" aria-label="..."> +</div> + +<div class="input-group"> + <input type="text" class="form-control" aria-label="..."> + <div class="input-group-btn"> + <!-- Buttons --> + </div> +</div> +{% endhighlight %} </div> diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index f0d59018b..fab5ea102 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -609,6 +609,30 @@ {% endhighlight %} + <h2 id="forms-help-text">Help text</h2> + <p>Block level help text for form controls.</p> + <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility"> + <h4>Associating help text with form controls</h4> + <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p> + </div> + <div class="bs-example" data-example-id="simple-help-text"> + <form> + <div class="form-group"> + <label for="inputHelpBlock">Input with help text</label> + <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> + </div> + <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> + </form> + </div><!-- /.bs-example --> +{% highlight html %} +<label class="sr-only" for="inputHelpBlock">Input with help text</label> +<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> +... +<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> +{% endhighlight %} +</div> + + <h2 id="forms-control-validation">Validation states</h2> <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p> @@ -622,7 +646,8 @@ <form> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> - <input type="text" class="form-control" id="inputSuccess1"> + <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> + <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> @@ -661,7 +686,8 @@ {% highlight html %} <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">Input with success</label> - <input type="text" class="form-control" id="inputSuccess1"> + <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"> + <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> @@ -1001,25 +1027,3 @@ </div> {% endhighlight %} - <h2 id="forms-help-text">Help text</h2> - <p>Block level help text for form controls.</p> - <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility"> - <h4>Associating help text with form controls</h4> - <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p> - </div> - <div class="bs-example" data-example-id="simple-help-text"> - <form> - <div class="form-group"> - <label for="inputHelpBlock">Input with help text</label> - <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> - </div> - <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> - </form> - </div><!-- /.bs-example --> -{% highlight html %} -<label class="sr-only" for="inputHelpBlock">Input with help text</label> -<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> -... -<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> -{% endhighlight %} -</div> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 1ec91b563..66b9ac0a0 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -45,6 +45,7 @@ <li><a href="#input-groups-buttons">Button addons</a></li> <li><a href="#input-groups-buttons-dropdowns">Buttons with dropdowns</a></li> <li><a href="#input-groups-buttons-segmented">Segmented buttons</a></li> + <li><a href="#input-groups-buttons-multiple">Multiple buttons</a></li> </ul> </li> <li> diff --git a/docs/_includes/nav/css.html b/docs/_includes/nav/css.html index 02becfe68..59134bdfc 100644 --- a/docs/_includes/nav/css.html +++ b/docs/_includes/nav/css.html @@ -73,9 +73,9 @@ <li><a href="#forms-control-focus">Focus state</a></li> <li><a href="#forms-control-disabled">Disabled state</a></li> <li><a href="#forms-control-readonly">Readonly state</a></li> + <li><a href="#forms-help-text">Help text</a></li> <li><a href="#forms-control-validation">Validation states</a></li> <li><a href="#forms-control-sizes">Control sizing</a></li> - <li><a href="#forms-help-text">Help text</a></li> </ul> </li> <li> |