Ngjyrat

Ngjyrat

Ngjyrosni tekstin me ndihmën e ngjyrave. Nëse dëshironi të ngjyrosni lidhjet, mund të përdorni .link-*klasat ndihmëse që kanë :hoverdhe :focusgjendjet.

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

Opaciteti

Që nga v5.1.0, shërbimet e ngjyrave të tekstit krijohen me Sass duke përdorur variablat CSS. Kjo lejon ndryshime të ngjyrave në kohë reale pa kompilim dhe ndryshime dinamike të transparencës alfa.

Si punon

Merrni parasysh programin tonë të paracaktuar .text-primary.

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

Ne përdorim një version RGB të ndryshores sonë --bs-primary(me vlerën e 13, 110, 253) CSS dhe bashkangjitëm një ndryshore të dytë CSS, --bs-text-opacity, për transparencën alfa (me një vlerë të paracaktuar 1falë një ndryshoreje lokale CSS). Kjo do të thotë në çdo kohë që përdorni .text-primarytani, colorvlera juaj e llogaritur është rgba(13, 110, 253, 1). Variabla lokale CSS brenda çdo .text-*klase shmang çështjet e trashëgimisë, kështu që instancat e ndërlidhura të shërbimeve nuk kanë automatikisht një transparencë alfa të modifikuar.

Shembull

Për të ndryshuar atë paqartësi, anashkaloni --bs-text-opacitynëpërmjet stileve të personalizuara ose stileve 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>

Ose, zgjidhni nga ndonjë prej .text-opacityshërbimeve:

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

Specifikimi

Ndonjëherë klasat kontekstuale nuk mund të aplikohen për shkak të specifikës së një përzgjedhësi tjetër. Në disa raste, një zgjidhje e mjaftueshme është të mbështillni përmbajtjen e elementit tuaj në një <div>ose më shumë element semantik me klasën e dëshiruar.

Sass

Përveç funksionalitetit të mëposhtëm Sass, merrni parasysh të lexoni për veçoritë tona të personalizuara të CSS (të njohura si variablat CSS) për ngjyrat dhe më shumë.

Variablat

Shumica e colorshërbimeve gjenerohen nga ngjyrat e temës sonë, të ricaktuara nga variablat tona të përgjithshme të paletës së ngjyrave.

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

Ngjyrat në shkallë gri janë gjithashtu të disponueshme, por vetëm një nëngrup përdoret për të gjeneruar ndonjë shërbim.

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

Harta

Ngjyrat e temave vendosen më pas në një hartë Sass, në mënyrë që ne të mund t'i kalojmë ato për të gjeneruar shërbimet tona, modifikuesit e komponentëve dhe më shumë.

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

Ngjyrat në shkallë gri janë gjithashtu të disponueshme si një hartë Sass. Kjo hartë nuk përdoret për të krijuar ndonjë shërbim.

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

Ngjyrat RGB krijohen nga një hartë e veçantë Sass:

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

Dhe paqartësitë e ngjyrave ndërtohen mbi atë me hartën e tyre që konsumohet nga API-ja e shërbimeve:

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

Utilities API

Shërbimet e ngjyrave janë deklaruar në API të shërbimeve tona në scss/_utilities.scss. Mësoni se si të përdorni API të shërbimeve.

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