Colorum

Colorum

Colo colui cultum textus cum utilitate colorat. Si nexus colorare vis, .link-*adiutoriis generibus uti potes, quae habent :hoverac :focuscivitates.

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Opacitas

Ut de v5.1.0, textus colorum utilitates generantur cum Sass variabilibus CSS utentibus. Hoc permittit ut color verus-tempus sine compilatione mutat et diaphaneitatis dynamicae mutationes.

Quomodo facitur

Vide defectus nostri .text-primaryutilitatem.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Utimur RGB versionis nostrae --bs-primary(valore 13, 110, 253) CSS variabilis et altera CSS variabilis apposita, --bs-text-opacity, pro alpha diaphanum (cum valore defalta 1ob loci CSS variabilis). Hoc modo aliquando uteris , valorem .text-primarycomputatum tuum est . Loci CSS variabiles intra unumquemque genus quaestiones hereditatis vitant, instantiae utilitatis ita nestatae non automatice alpha pellucentia modificatum habent.colorrgba(13, 110, 253, 1).text-*

Exemplum

Opacitatem illam mutare, per stylos --bs-text-opacityconsuetos vel inlineos stylos vincere.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Vel ex aliquam .text-opacitycommodo;

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Specification

Interdum classes contextuales applicari non possunt propter speciem alterius selectoris. In quibusdam casibus satis laboratum est involvere contentus elemento <div>vel semantico cum classe desiderato.

Sass

Praeter sequentes functiones Sass, considera lectionem nostram inclusam proprietates CSS consuetudinis (aka CSS variabiles) pro coloribus et magis.

Variabilium

Plurimae colorutilitates ex nostro argumento colore generantur, repositum ex variabilium genere colorum palette.

$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;

Colores cineraceorum etiam in promptu sunt, sed tantum subset usus ad quaslibet utilitates generandas.

$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

Colores thema deinde in mappam Sass ponuntur, ut eos fascias ad utilitates nostras, componentes adiectiores, generare possimus, et plus.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Colores cineraceorum etiam in promptu sunt ut tabula Sass. Haec tabula ad nullas utilitates generandas adhibetur.

$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
);

RGB colores generantur ex tabula separata Sass;

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Et color opacitates struunt in illo cum tabula sua ut ' api utilitatibus consumuntur;

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Utilitas API

Color utilitas declaratur in nostris utilitatibus API in scss/_utilities.scss. Utilitatibus uti disce API.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),