diff options
| author | Mark Otto <[email protected]> | 2016-09-15 10:20:57 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-09-15 10:20:57 -0700 |
| commit | 64dcb8b5073293daa911d2b274fd875f31693317 (patch) | |
| tree | 112821f9bdd9b51f8953521cc2f34a537ccf74a2 /docs/components/forms.md | |
| parent | 15f522fd4ae3fe7933d526f045b0b2df22a35291 (diff) | |
| parent | 63129112bbea91f7cd62014f162f857f50084656 (diff) | |
| download | bootstrap-64dcb8b5073293daa911d2b274fd875f31693317.tar.xz bootstrap-64dcb8b5073293daa911d2b274fd875f31693317.zip | |
Merge branch 'v4-dev' into v4-navbars
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 51 |
1 files changed, 25 insertions, 26 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index ba69ce2d8..09d0d4f8f 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -59,28 +59,29 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a ` </div> <fieldset class="form-group"> <legend>Radio buttons</legend> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> + <div class="form-check"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> - <div class="radio"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> + <div class="form-check"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div> - <div class="radio disabled"> - <label> - <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> + <div class="form-check disabled"> + <label class="form-check-label"> + <input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled </label> </div> </fieldset> - <div class="checkbox"> - <label> - <input type="checkbox"> Check me out + <div class="form-check"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input"> + Check me out </label> </div> <button type="submit" class="btn btn-primary">Submit</button> @@ -150,10 +151,8 @@ Below is a complete list of the specific form controls supported by Bootstrap an <tr> <td class="text-nowrap"> {% markdown %} -`.radio`<br> -`.radio-inline`<br> -`.checkbox`<br> -`.checkbox-inline` +`.form-check`<br> +`.form-check-inline` {% endmarkdown %} </td> <td class="text-nowrap"> @@ -724,27 +723,27 @@ Ensure that an alternative indication of state is also provided. For instance, y <div class="form-group has-danger"> <label class="col-form-label" for="inputDanger1">Input with danger</label> <input type="text" class="form-control form-control-danger" id="inputDanger1"> - <div class="form-control-feedback">Shit, that username's taken. Try another?</div> + <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> <small class="form-text text-muted">Example help text that remains unchanged.</small> </div> {% endexample %} {% example html %} -<div class="checkbox has-success"> - <label> - <input type="checkbox" id="checkboxSuccess" value="option1"> +<div class="form-check has-success"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxSuccess" value="option1"> Checkbox with success </label> </div> -<div class="checkbox has-warning"> - <label> - <input type="checkbox" id="checkboxWarning" value="option1"> +<div class="form-check has-warning"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxWarning" value="option1"> Checkbox with warning </label> </div> -<div class="checkbox has-danger"> - <label> - <input type="checkbox" id="checkboxDanger" value="option1"> +<div class="form-check has-danger"> + <label class="form-check-label"> + <input type="checkbox" class="form-check-input" id="checkboxDanger" value="option1"> Checkbox with danger </label> </div> |
