diff options
| author | Mark Otto <[email protected]> | 2014-04-30 19:48:22 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-04-30 19:48:22 -0700 |
| commit | 4c3ef52fc12519b59584a4696e6b3eca70551ce8 (patch) | |
| tree | 0341e4aeea9397b7a243e0424f40ea5655d05dca /docs/_includes/css/forms.html | |
| parent | 17f77a5070fa090f351c882750c5cbb3a9c9e0d2 (diff) | |
| parent | 108b7c390efda6f9d56fb2749374a7999956b1a0 (diff) | |
| download | bootstrap-4c3ef52fc12519b59584a4696e6b3eca70551ce8.tar.xz bootstrap-4c3ef52fc12519b59584a4696e6b3eca70551ce8.zip | |
Merge branch 'pr/13320'
Conflicts:
dist/css/bootstrap-rtl.min.css
dist/css/bootstrap.css.map
dist/css/bootstrap.min.css
docs/dist/css/bootstrap-rtl.min.css
docs/dist/css/bootstrap.css.map
docs/dist/css/bootstrap.min.css
Diffstat (limited to 'docs/_includes/css/forms.html')
| -rw-r--r-- | docs/_includes/css/forms.html | 21 |
1 files changed, 19 insertions, 2 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 5a76ce495..f2e29d6ff 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -511,7 +511,7 @@ <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> <div class="bs-callout bs-callout-warning"> <h4>Icons, labels, and input groups</h4> - <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. For inputs without labels, adjust the <code>top</code>value. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> + <p>Manual positioning of feedback icons is required for inputs without a label and for <a href="../components#input-groups">input groups</a> with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the <code>sr-only</code> class. If you must do without labels, adjust the <code>top</code> value of the feedback icon. For input groups, adjust the <code>right</code> value to an appropriate pixel value depending on the width of your addon.</p> </div> <div class="bs-example"> <form role="form"> @@ -550,7 +550,7 @@ </div> {% endhighlight %} - <p>Optional icons also work on horizontal and inline forms.</p> + <h4>Optional icons in horizontal and inline forms</h4> <div class="bs-example"> <form class="form-horizontal" role="form"> <div class="form-group has-success has-feedback"> @@ -593,6 +593,23 @@ </form> {% endhighlight %} + <h4>Optional icons with hidden <code>.sr-only</code> labels</h4> + <p>For form controls with no visible label, add the <code>.sr-only</code> class on the label. Bootstrap will automatically adjust the position of the icon once it's been added.</p> + <div class="bs-example"> + <div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> + <input type="text" class="form-control" id="inputSuccess5"> + <span class="glyphicon glyphicon-ok form-control-feedback"></span> + </div> + </div> +{% highlight html %} +<div class="form-group has-success has-feedback"> + <label class="control-label sr-only" for="inputSuccess5">Hidden label</label> + <input type="text" class="form-control" id="inputSuccess5"> + <span class="glyphicon glyphicon-ok form-control-feedback"></span> +</div> +{% endhighlight %} + <h2 id="forms-control-sizes">Control sizing</h2> <p>Set heights using classes like <code>.input-lg</code>, and set widths using grid column classes like <code>.col-lg-*</code>.</p> |