in English

Balangi

Kopesa ndimbola na nzela colorna mwa ndambo ya bakelasi ya utilité ya langi. Esangisi lisungi mpo na kosala ba liens ya styling na ba états ya hover, mpe.

Na lokasa oyo

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.

.mokanda-ya yambo

.texte-ya mibale

.elonga ya makomi

.makomi-likama

.kokebisa na makomi

.info ya makomi

.pole-pole ya makomi

.makomi-molili

.nzoto-ya-makomi

.ezali na mongongo ya makomi

.makomi-mpembe

.mokanda-moindo-50

.makomi-mpembe-50

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

Deprecation: Na kobakisa ba .text-opacity-*utilitaires mpe ba variables CSS mpo na ba utilitaires ya texte, .text-black-50mpe .text-white-50ezali deprecated lokola ya v5.1.0. Bako longwa na v6.0.0.

Kopesa ndimbola na ba technologies ya kosunga

Kosalela langi mpo na kobakisa ndimbola epesaka kaka elembo ya komona, oyo ekopesama te na basaleli ya mayele ya kosunga – lokola batángi ya écran. Sala ete sango oyo elakisami na langi ezala polele uta na makambo yango moko (ndakisa makomi oyo ezali komonana), to ekotisama na nzela ya mayele mosusu, lokola makomi ya kobakisa oyo ebombami elongo na .visually-hiddenkelasi.

Opacité

Ebakisami na v5.1.0

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.

Oyo ezali texte primaire par défaut

Oyo ezali 50% opacité texte primaire

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

Oyo ezali texte primaire par défaut

Oyo ezali 75% opacité texte primaire

Oyo ezali 50% opacité texte primaire

Oyo ezali 25% opacité texte primaire

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