Balangi

Balangi

Colorer texte na ba utilitaires ya couleur. Soki olingi ko coloriser ba liens, okoki kosalela ba .link-*classes ya mosungi oyo eza na :hoverpe :focusba états.

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

Opacité

Kobanda na v5.1.0, ba utilitaires ya couleur ya texte esalemi na Sass na kosalelaka ba variables ya CSS. Yango epesaka nzela na mbongwana ya langi na ntango ya solosolo kozanga ete bábongola compilation mpe bábongola transparence alpha dynamique.

Ndenge oyo esalaka

.text-primaryTala utilitaire na biso ya défaut .

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

Tosalelaka version RGB ya variable na biso --bs-primary(na valeur ya 13, 110, 253) CSS mpe tokangisi variable CSS ya mibale, --bs-text-opacity, mpo na transparence alpha (na valeur par défaut 1grâce na variable CSS locale). Yango elingi koloba ntango nyonso oyo osaleli .text-primarysikoyo, colormotuya na yo oyo otángi ezali rgba(13, 110, 253, 1). Variable CSS locale na kati ya .text-*classe moko na moko e éviter ba problèmes ya héritage donc ba instances nestées ya ba utilitaires ezala automatiquement te na transparence alpha modifiée.

Ndakisa

Mpo na kobongola opacité wana, bolongola --bs-text-opacityna nzela ya ba styles personnalisés to ba styles ya kati.

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

To, pona kati na moko ya ba .text-opacityutilités:

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

Boyebisi ya sikisiki

Tango mosusu ba classes contextuelles ekoki kosalelama te mpo na spécificité ya sélecteur mosusu. Na ba cas misusu, solution suffisante ezali ya ko envelopper contenus ya élément na yo na élément <div>sémantique to koleka na classe oyo olingi.

Sass oyo azali

En plus ya fonctionnalité ya Sass oyo elandi, kanisá kotanga na ntina ya ba propriétés personnalisées na biso ya CSS oyo ekotisami (aka variables CSS) mpo na ba couleurs mpe mingi mosusu.

Ba variables oyo ezali

Ba colorutilitaires mingi esalemaka na ba couleurs na biso ya thème, ezongisami na ba variables na biso ya palette ya couleur générique.

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

Ba couleurs ya gris ezali pe, kasi kaka sous-ensemble nde esalelamaka pona kobimisa ba utilitaires nionso.

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

Karte

Na nsima, batyaka balangi ya motó ya likambo na kati ya karte ya Sass mpo tokoka kosala boucle likoló na yango mpo na kobimisa ba utilitaires na biso, ba modificateurs ya ba composants, mpe makambo mosusu.

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

Ba couleurs ya gris ezali pe lokola carte ya Sass. Carte oyo esalelamaka te mpo na kobimisa ba utilités moko te.

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

Ba couleurs ya RGB esalemi na carte ya Sass ekeseni:

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

Mpe ba opacité ya couleur etongami likolo na yango na carte na bango moko oyo e consommé na API ya ba utilitaires:

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

API ya ba utilitaires

Ba utilitaires ya couleur esakolami na API ya ba utilitaires na biso na scss/_utilities.scss. Yekola ndenge ya kosalela API ya ba utilitaires.

    "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
      )
    ),