Amabara

Tanga ibisobanuro unyuze colorhamwe nintoki zamabara yingirakamaro. Harimo inkunga ya styling ihuza hamwe na leta ya hover, nayo.

Kuriyi page

Amabara

Hindura amabara hamwe nibikorwa byamabara. Niba ushaka gusiga amabara, urashobora gukoresha .link-*ibyiciro byabafasha bifite :hoverna :focusleta.

.text-primaire

.text-yisumbuye

.text-intsinzi

.text-akaga

.text-imburira

.text-amakuru

.umucyo

.text-umwijima

.text-umubiri

.text

.text-yera

.text-umukara-50

.text-yera-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>

Gutesha agaciro: Hiyongereyeho .text-opacity-*ibikorwa byingirakamaro hamwe na CSS ihinduka kubikorwa byingirakamaro, .text-black-50kandi .text-white-50birateshwa agaciro kuva v5.1.0. Bazakurwaho muri v6.0.0.

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .visually-hiddenn'ishuri.

Amahirwe

Wongeyeho muri v5.1.0

Kuva kuri v5.1.0, inyandiko yamabara yingirakamaro ikorwa hamwe na Sass ukoresheje CSS ihinduka. Ibi bituma habaho igihe-nyacyo cyamabara adafite icyegeranyo hamwe na alfa ya dinamike ihinduka.

Uburyo ikora

Reba akamaro kacu .text-primarygasanzwe.

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

Dukoresha verisiyo ya RGB yacu --bs-primary(hamwe nagaciro kayo 13, 110, 253) CSS ihindagurika kandi twomekaho CSS ya kabiri ihindagurika --bs-text-opacity,, kubwa alfa ya transparency (hamwe nagaciro gasanzwe 1dukesha CSS ihinduka). Ibyo bivuze igihe icyo ari cyo cyose ukoresha .text-primaryubungubu, coloragaciro kawe ni rgba(13, 110, 253, 1). Impinduka za CSS zaho muri buri .text-*cyiciro zirinda ibibazo byumurage kuburyo ingero zifatika zingirakamaro zidahita zigira alfa yahinduwe.

Urugero

Guhindura ubwo busobanuro, kurenga --bs-text-opacityukoresheje uburyo bwihariye cyangwa inline.

Nibisanzwe inyandiko yibanze

Ubu ni 50% inyandiko yibanze

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

Cyangwa, hitamo muri kimwe mubikorwa .text-opacitybyingenzi:

Nibisanzwe inyandiko yibanze

Ubu ni 75% inyandiko yibanze

Ubu ni 50% inyandiko yibanze

Ubu ni 25% inyandiko yibanze

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

Umwihariko

Rimwe na rimwe, ibyiciro byihariye ntibishobora gukoreshwa kubera umwihariko wundi watoranije. Rimwe na rimwe, akazi gahagije ni ugupfunyika ibintu byawe mubintu <div>cyangwa byinshi bisobanura hamwe nicyiciro wifuza.

Sass

Usibye imikorere ya Sass ikurikira, tekereza gusoma kubyerekeye imitungo yihariye ya CSS (bita CSS variable) kumabara nibindi.

Ibihinduka

Byinshi colormubikorwa byakozwe namabara yinsanganyamatsiko, yoherejwe kuva muri rusange ibara ryibara rya 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;

Ibara rya graycale naryo riraboneka, ariko subet yonyine ikoreshwa mugutanga ibikorwa byose.

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

Ikarita

Amabara yinsanganyamatsiko noneho ashyirwa mukarita ya Sass kugirango dushobore kuzenguruka hejuru kugirango tubyare ibikorwa byacu, abahindura ibice, nibindi byinshi.

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

Ibara rya graycale naryo riraboneka nkikarita ya Sass. Ikarita ntabwo ikoreshwa mugukora ibikorwa byose.

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

Amabara ya RGB akomoka ku ikarita ya Sass itandukanye:

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

Kandi amabara meza yubaka kuriyo hamwe nikarita yabo ikoreshwa na utilities API:

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

Ibikorwa API

Ibikoresho by'amabara byatangajwe mubikorwa byacu API muri scss/_utilities.scss. Wige gukoresha ibikoresho 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
      )
    ),