Colors
Colorize text with color utilities. If you want to colorize links, you can use the .link-* helper classes which have :hover and :focus states.
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50
.text-primary
.text-secondary
.text-success
.text-danger
.text-warning
.text-info
.text-light
.text-dark
.text-body
.text-muted
.text-white
.text-black-50
.text-white-50Conveying meaning to assistive technologies
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself [e.g. the visible text], or is included through alternative means, such as additional text hidden with the
.visually-hidden class.
Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a In addition to the following Sass functionality, consider reading about our included CSS
custom properties [aka CSS variables] for colors and more. Most Grayscale colors are also available, but only a subset are used to generate any utilities. Theme colors are then put into a Sass map so we can loop over them to generate our utilities, component
modifiers, and more. Grayscale colors are also available as a Sass map. This map is not used to generate any utilities. Color utilities are declared in our utilities API in Sass
Variables
color utilities are generated by our theme colors, reassigned from our generic color palette variables.$blue: #0d6efd;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #dc3545;
$orange: #fd7e14;
$yellow: #ffc107;
$green: #198754;
$teal: #20c997;
$cyan: #0dcaf0;
$primary: $blue;
$secondary: $gray-600;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$light: $gray-100;
$dark: $gray-900;
$white: #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black: #000;
Map
$theme-colors: [
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
];
$grays: [
"100": $gray-100,
"200": $gray-200,
"300": $gray-300,
"400": $gray-400,
"500": $gray-500,
"600": $gray-600,
"700": $gray-700,
"800": $gray-800,
"900": $gray-900
];
Utilities API
scss/_utilities.scss. Learn how to use the utilities API. "color": [
property: color,
class: text,
values: map-merge[
$theme-colors,
[
"white": $white,
"body": $body-color,
"muted": $text-muted,
"black-50": rgba[$black, .5],
"white-50": rgba[$white, .5],
"reset": inherit,
]
]
],
Chủ Đề