Amabara

Amabara

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

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

Amahirwe

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.

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

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