rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases Activity

v5: Add disabled examples for .form-control, .form-select, and .form-range (#31686)

Browse Source 
* Add disabled state example to the .form-control page

* Document disabled attribute on select too

* Add disabled example for file input

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Mark Otto 2020-09-29 11:39:37 -07:00 committed by GitHub
parent cda9278f49
commit 319954d369
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
site/content/docs/5.0/forms/form-control.md
View File

@ -29,6 +29,15 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
{{< /example >}}
## Disabled
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
{{< example >}}
<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" placeholder="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
{{< /example >}}
## Readonly
Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

9
site/content/docs/5.0/forms/range.md
View File

@ -15,6 +15,15 @@ Create custom `<input type="range">` controls with `.form-range`. The track (the
<input type="range" class="form-range" id="customRange1">
{{< /example >}}
## Disabled
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
{{< example >}}
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
{{< /example >}}
## Min and max
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.

13
site/content/docs/5.0/forms/select.md
View File

@ -60,3 +60,16 @@ As is the `size` attribute:
<option value="3">Three</option>
</select>
{{< /example >}}
## Disabled
Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.
{{< example >}}
<select class="form-select" aria-label="Disabled select example" disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
{{< /example >}}