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

Add important to utilities, mention it's usage and global variable

Browse Source
This commit is contained in:
Mark Otto 2021-06-14 14:53:24 -07:00 committed by Mark Otto
parent f30066cb8a
commit 5be3550d49
1 changed files with 49 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
site/content/docs/5.0/utilities/api.md
View File

@ -109,11 +109,11 @@ $utilities: (
Output: Output:
```css ```css
.opacity-0-hover:hover { opacity: 0; } .opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25; } .opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5; } .opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75; } .opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1; } .opacity-100-hover:hover { opacity: 1 !important; }
``` ```
### Responsive utilities ### Responsive utilities
@ -139,50 +139,50 @@ $utilities: (
Output: Output:
```css ```css
.opacity-0 { opacity: 0; } .opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25; } .opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5; } .opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75; } .opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1; } .opacity-100 { opacity: 1 !important; }
@media (min-width: 576px) { @media (min-width: 576px) {
.opacity-sm-0 { opacity: 0; } .opacity-sm-0 { opacity: 0 !important; }
.opacity-sm-25 { opacity: .25; } .opacity-sm-25 { opacity: .25 !important; }
.opacity-sm-50 { opacity: .5; } .opacity-sm-50 { opacity: .5 !important; }
.opacity-sm-75 { opacity: .75; } .opacity-sm-75 { opacity: .75 !important; }
.opacity-sm-100 { opacity: 1; } .opacity-sm-100 { opacity: 1 !important; }
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.opacity-md-0 { opacity: 0; } .opacity-md-0 { opacity: 0 !important; }
.opacity-md-25 { opacity: .25; } .opacity-md-25 { opacity: .25 !important; }
.opacity-md-50 { opacity: .5; } .opacity-md-50 { opacity: .5 !important; }
.opacity-md-75 { opacity: .75; } .opacity-md-75 { opacity: .75 !important; }
.opacity-md-100 { opacity: 1; } .opacity-md-100 { opacity: 1 !important; }
} }
@media (min-width: 992px) { @media (min-width: 992px) {
.opacity-lg-0 { opacity: 0; } .opacity-lg-0 { opacity: 0 !important; }
.opacity-lg-25 { opacity: .25; } .opacity-lg-25 { opacity: .25 !important; }
.opacity-lg-50 { opacity: .5; } .opacity-lg-50 { opacity: .5 !important; }
.opacity-lg-75 { opacity: .75; } .opacity-lg-75 { opacity: .75 !important; }
.opacity-lg-100 { opacity: 1; } .opacity-lg-100 { opacity: 1 !important; }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.opacity-xl-0 { opacity: 0; } .opacity-xl-0 { opacity: 0 !important; }
.opacity-xl-25 { opacity: .25; } .opacity-xl-25 { opacity: .25 !important; }
.opacity-xl-50 { opacity: .5; } .opacity-xl-50 { opacity: .5 !important; }
.opacity-xl-75 { opacity: .75; } .opacity-xl-75 { opacity: .75 !important; }
.opacity-xl-100 { opacity: 1; } .opacity-xl-100 { opacity: 1 !important; }
} }
@media (min-width: 1400px) { @media (min-width: 1400px) {
.opacity-xxl-0 { opacity: 0; } .opacity-xxl-0 { opacity: 0 !important; }
.opacity-xxl-25 { opacity: .25; } .opacity-xxl-25 { opacity: .25 !important; }
.opacity-xxl-50 { opacity: .5; } .opacity-xxl-50 { opacity: .5 !important; }
.opacity-xxl-75 { opacity: .75; } .opacity-xxl-75 { opacity: .75 !important; }
.opacity-xxl-100 { opacity: 1; } .opacity-xxl-100 { opacity: 1 !important; }
} }
``` ```
@ -223,21 +223,25 @@ $utilities: (
Output: Output:
```css ```css
.opacity-0 { opacity: 0; } .opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25; } .opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5; } .opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75; } .opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1; } .opacity-100 { opacity: 1 !important; }
@media print { @media print {
.opacity-print-0 { opacity: 0; } .opacity-print-0 { opacity: 0 !important; }
.opacity-print-25 { opacity: .25; } .opacity-print-25 { opacity: .25 !important; }
.opacity-print-50 { opacity: .5; } .opacity-print-50 { opacity: .5 !important; }
.opacity-print-75 { opacity: .75; } .opacity-print-75 { opacity: .75 !important; }
.opacity-print-100 { opacity: 1; } .opacity-print-100 { opacity: 1 !important; }
} }
``` ```
## Importance
All utilities generated by the API include `!important` to ensure they override components and modifier classes as intended. You can toggle this setting globally with the `$enable-important-utilities` variable (defaults to `true`).
## Using the API ## Using the API
Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities. Now that you're familiar with how the utilities API works, learn how to add your own custom classes and modify our default utilities.