in English

Langi za langi

Tuusa amakulu okuyita colormu n'engalo entono eza langi utility classes. Mulimu obuwagizi bw'okukola sitayiro enkolagana n'embeera za hover, era.

Ku muko guno

Langi za langi

Langi y’ebiwandiiko n’ebikozesebwa mu langi. Bwoba oyagala okukuba langi ku links, osobola okukozesa .link-*helper classes ezirina :hoverne :focusstates.

.ekiwandiiko-ekisookerwako

.ekiwandiiko-ekyokubiri

.ekiwandiiko-obuwanguzi

.ekiwandiiko-akabi

.ekiwandiiko-okulabula

.ekiwandiiko-amawulire

.ekiwandiiko-ekitangaala

.ekiwandiiko-ekizikiza

.ekiwandiiko-omubiri

.ekiwandiiko-ekisirise

.ekiwandiiko-enjeru

.ekiwandiiko-ekiddugavu-50

.ekiwandiiko-enjeru-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>

Okuggyawo: Nga kwogasse .text-opacity-*ebikozesebwa n'enkyukakyuka za CSS ez'ebikozesebwa mu biwandiiko, .text-black-50era .text-white-50ziggyibwawo okuva ku v5.1.0. Zijja kuggyibwawo mu v6.0.0.

Okutuusa amakulu mu tekinologiya ayamba

Okukozesa langi okwongera amakulu kiwa ekiraga ekirabika kyokka, ekitajja kutuusibwa eri abakozesa tekinologiya ayamba – gamba ng’ebisoma ku ssirini. Kakasa nti amawulire agalagirwa langi oba geeyoleka okuva mu birimu byennyini (okugeza ekiwandiiko ekirabika), oba gateekebwamu okuyita mu ngeri endala, gamba ng’ebiwandiiko ebirala ebikwekebwa ne .visually-hiddenkiraasi.

Obutategeera bulungi

Yayongerwako mu v5.1.0

Okuva ku v5.1.0, ebikozesebwa mu langi y’ebiwandiiko bikolebwa ne Sass nga tukozesa enkyukakyuka za CSS. Kino kisobozesa enkyukakyuka za langi mu kiseera ekituufu awatali kukuŋŋaanya n’enkyukakyuka za alpha transparency ezikyukakyuka.

Engeri gye kikola

Lowooza ku .text-primaryutility yaffe eya default.

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

Tukozesa enkyusa ya RGB eyaffe --bs-primary(n’omuwendo gwa 13, 110, 253) enkyukakyuka ya CSS era ne tugattako enkyukakyuka ya CSS eyokubiri, --bs-text-opacity, olw’obwerufu bwa alpha (n’omuwendo ogusookerwako 1olw’enkyukakyuka ya CSS ey’omu kitundu). Ekyo kitegeeza nti essaawa yonna gy’okozesa .text-primarykati, omuwendo gwo ogubaliriddwa colorguba rgba(13, 110, 253, 1). Enkyukakyuka ya CSS ey’ekitundu munda mu buli .text-*kiraasi yeewala ensonga z’obusika kale ebikozesebwa ebiteekeddwa mu kisenge eby’ebikozesebwa tebiba na bwerufu bwa alpha obukyusiddwa mu ngeri ey’otoma.

Eky'okulabirako

Okukyusa opacity eyo, override --bs-text-opacitynga oyita mu custom styles oba inline styles.

Kino kye kiwandiiko ekisookerwako ekisookerwako

Kino kye kiwandiiko ekisookerwako ekya 50% opacity

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

Oba, londa okuva mu kimu ku .text-opacitybikozesebwa:

Kino kye kiwandiiko ekisookerwako ekisookerwako

Kino kye kiwandiiko ekisookerwako ekya opacity ekya 75%

Kino kye kiwandiiko ekisookerwako ekya 50% opacity

Kino kye kiwandiiko ekisookerwako eky’obutafaanagana 25%

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

Okwetongola

Oluusi ebika by’embeera (contextual classes) tebisobola kukozesebwa olw’obutonde obw’enjawulo obw’omusunsuzi omulala. Mu mbeera ezimu, eky’okugonjoola ekimala kwe kuzinga ebirimu eby’ekintu kyo mu kintu <div>eky’amakulu oba okusingawo n’ekibiina ky’oyagala.

Sass nga bwe kiri

Ng’oggyeeko enkola ya Sass eno wammanga, lowooza ku kusoma ku bintu byaffe eby’ennono ebya CSS ebiteekeddwamu (aka CSS variables) ku langi n’ebirala.

Enkyukakyuka ezikyukakyuka

Ebisinga obungi colorebikozesebwa bikolebwa langi zaffe ez’omulamwa, eziddamu okuweebwa okuva mu nkyukakyuka zaffe eza langi ez’enjawulo.

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

Langi za enzirugavu nazo ziriwo, naye ekitundu ekitono kyokka kye kikozesebwa okukola ebikozesebwa byonna.

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

Maapu

Langi z’omulamwa olwo ziteekebwa mu maapu ya Sass tusobole okuzikolako okukola ebikozesebwa byaffe, ebikyusa ebitundu, n’ebirala.

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

Langi za Grayscale nazo zisangibwa nga maapu ya Sass. Maapu eno tekozesebwa kukola bikozesebwa byonna.

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

Langi za RGB zikolebwa okuva ku maapu ya Sass ey’enjawulo:

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

Era langi opacities zizimba ku ekyo ne maapu yaabwe ekozesebwa API y'ebikozesebwa:

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

Ebikozesebwa API

Ebikozesebwa ebya langi birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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