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

.kebisi ya 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>

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.

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

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