rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Rename .form-control-static to .form-control-readonly-plain

Browse Source
This commit is contained in:
Patrick H. Lauke 2017-04-28 00:35:55 +01:00 committed by Mark Otto
parent 22bd955434
commit ff5c75510d
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/4.0/components/forms.md
View File

@ -115,16 +115,16 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
{% endexample %}
### Static
### Readonly plain text
If you want to have read-only fields in your form styled as plain text, use the `.form-control-static` class to remove the default form field styling and preserve the correct margin and padding.
If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
{% example html %}
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-static" id="staticEmail" value="email@example.com">
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
</div>
</div>
<div class="form-group row">
@ -140,7 +140,7 @@ If you want to have read-only fields in your form styled as plain text, use the
<form class="form-inline">
<div class="form-group">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-static" id="staticEmail2" value="email@example.com">
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="email@example.com">
</div>
<div class="form-group mx-sm-3">
<label for="inputPassword2" class="sr-only">Password</label>

8
scss/_forms.scss
View File

@ -122,12 +122,12 @@ select.form-control {
}
// Static form control text
// Readonly controls as plain text
//
// Apply class to an element to make any string of text align with labels in a
// horizontal form layout.
// Apply class to a readonly input to make it appear like regular plain
// text (without any border, background color, focus indicator)
.form-control-static {
.form-control-plaintext {
padding-top: $input-btn-padding-y;
padding-bottom: $input-btn-padding-y;
margin-bottom: 0; // match inputs if this class comes on inputs with default margins