mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-23 15:52:21 +01:00
More 404 link fixes. (#29435)
This commit is contained in:
XhmikosR
GitHub
parent
f3913064f6
commit
74b8fe7bf0
@ -582,7 +582,7 @@ To edit settings, press <span class=nt><kbd><kbd></span>ctrl<span cl
|
||||
Checkbox with error
|
||||
<span class=nt></label></span>
|
||||
<span class=nt></div></span>
|
||||
<span class=nt></div></span></code></pre></figure> <h3>With optional icons</h3> <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> <p><strong class=text-danger>Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p> <div class="bs-callout bs-callout-warning" id=callout-has-feedback-icon-positioning> <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. 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-callout bs-callout-warning" id=callout-has-feedback-icon-accessibility> <h4>Conveying the icon's meaning to assistive technologies</h4> <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code><label></code> associated with the form control.</p> <p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p> </div> <div class=bs-example data-example-id=form-validation-states-with-icons> <form> <div class="form-group has-success has-feedback"> <label class=control-label for=inputSuccess2>Input with success</label> <input class=form-control id=inputSuccess2 aria-describedby=inputSuccess2Status> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputSuccess2Status>(success)</span> </div> <div class="form-group has-warning has-feedback"> <label class=control-label for=inputWarning2>Input with warning</label> <input class=form-control id=inputWarning2 aria-describedby=inputWarning2Status> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputWarning2Status>(warning)</span> </div> <div class="form-group has-error has-feedback"> <label class=control-label for=inputError2>Input with error</label> <input class=form-control id=inputError2 aria-describedby=inputError2Status> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputError2Status>(error)</span> </div> <div class="form-group has-success has-feedback"> <label class=control-label for=inputGroupSuccess1>Input group with success</label> <div class=input-group> <span class=input-group-addon>@</span> <input class=form-control id=inputGroupSuccess1 aria-describedby=inputGroupSuccess1Status> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputGroupSuccess1Status>(success)</span> </div> </form> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"form-group has-success has-feedback"</span><span class=nt>></span>
|
||||
<span class=nt></div></span></code></pre></figure> <h3>With optional icons</h3> <p>You can also add optional feedback icons with the addition of <code>.has-feedback</code> and the right icon.</p> <p><strong class=text-danger>Feedback icons only work with textual <code><input class="form-control"></code> elements.</strong></p> <div class="bs-callout bs-callout-warning" id=callout-has-feedback-icon-positioning> <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. 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-callout bs-callout-warning" id=callout-has-feedback-icon-accessibility> <h4>Conveying the icon's meaning to assistive technologies</h4> <p>To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the <code>.sr-only</code> class and explicitly associated with the form control it relates to using <code>aria-describedby</code>. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <code><label></code> associated with the form control.</p> <p>Although the following examples already mention the validation state of their respective form controls in the <code><label></code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p> </div> <div class=bs-example data-example-id=form-validation-states-with-icons> <form> <div class="form-group has-success has-feedback"> <label class=control-label for=inputSuccess2>Input with success</label> <input class=form-control id=inputSuccess2 aria-describedby=inputSuccess2Status> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputSuccess2Status>(success)</span> </div> <div class="form-group has-warning has-feedback"> <label class=control-label for=inputWarning2>Input with warning</label> <input class=form-control id=inputWarning2 aria-describedby=inputWarning2Status> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputWarning2Status>(warning)</span> </div> <div class="form-group has-error has-feedback"> <label class=control-label for=inputError2>Input with error</label> <input class=form-control id=inputError2 aria-describedby=inputError2Status> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputError2Status>(error)</span> </div> <div class="form-group has-success has-feedback"> <label class=control-label for=inputGroupSuccess1>Input group with success</label> <div class=input-group> <span class=input-group-addon>@</span> <input class=form-control id=inputGroupSuccess1 aria-describedby=inputGroupSuccess1Status> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden=true></span> <span class=sr-only id=inputGroupSuccess1Status>(success)</span> </div> </form> </div> <figure class=highlight><pre><code class=language-html data-lang=html><span class=nt><div</span> <span class=na>class=</span><span class=s>"form-group has-success has-feedback"</span><span class=nt>></span>
|
||||
<span class=nt><label</span> <span class=na>class=</span><span class=s>"control-label"</span> <span class=na>for=</span><span class=s>"inputSuccess2"</span><span class=nt>></span>Input with success<span class=nt></label></span>
|
||||
<span class=nt><input</span> <span class=na>type=</span><span class=s>"text"</span> <span class=na>class=</span><span class=s>"form-control"</span> <span class=na>id=</span><span class=s>"inputSuccess2"</span> <span class=na>aria-describedby=</span><span class=s>"inputSuccess2Status"</span><span class=nt>></span>
|
||||
<span class=nt><span</span> <span class=na>class=</span><span class=s>"glyphicon glyphicon-ok form-control-feedback"</span> <span class=na>aria-hidden=</span><span class=s>"true"</span><span class=nt>></span></span>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -9,7 +9,7 @@
|
||||
|
||||
<title>Buttons · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/components/button/">
|
||||
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/components/buttons/">
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user