Reňkler

Reňkler

Teksti reňk enjamlary bilen reňkläň. Salgylary reňklemek isleseňiz, bar bolan we ýagdaýy bolan .link-*kömekçi synplaryny ulanyp bilersiňiz .:hover:focus

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

Açlyk

V5.1.0-a görä, CSS üýtgeýjilerini ulanyp, Sass bilen tekst reňk enjamlary döredilýär. Bu, düzülmezden we dinamiki alfa aýdyňlygy üýtgemezden hakyky reňk üýtgemegine mümkinçilik berýär.

Bu nähili işleýär

Adaty .text-primarypeýdalylygymyza serediň.

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

CSS üýtgeýjimiziň RGB wersiýasyny ulanýarys we alfa aç-açanlygy üçin ( ýerli CSS üýtgeýjiniň kömegi bilen başlangyç bahasy --bs-primarybilen 13, 110, 253) ikinji CSS üýtgeýjisini dakýarys. Diýmek , indi ulananyňyzda hasaplanan bahaňyz . Her synpyň içindäki ýerli CSS üýtgeýjisi miras meselesinden gaça durýar, şonuň üçin kommunal hyzmatlaryň içerki üýtgedilen alfa aç-açanlygy ýok.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

Mysal

Şol düşnüksizligi üýtgetmek üçin, --bs-text-opacityadaty stilleriň ýa-da içerki stilleriň üstünden ýazyň.

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

Ora-da haýsydyr bir .text-opacitykömekçi enjamdan birini saýlaň:

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

Aýratynlygy

Käwagt başga bir saýlaýjynyň aýratynlygy sebäpli kontekst sapaklary ulanylyp bilinmez. Käbir ýagdaýlarda, elementiň mazmunyny <div>islenýän synp bilen has semantik elemente örtmek üçin ýeterlik iş bar.

Sass

Aşakdaky Sass funksiýasyna goşmaça, reňkler we ş.m. üçin goşulan CSS aýratyn häsiýetlerimiz (aka CSS üýtgeýjileri) hakda okamagy göz öňünde tutuň.

Üýtgeýjiler

Kärhanalaryň köpüsi color, umumy reňk palitrasy üýtgeýjilerimizden düzülen mowzuk reňklerimiz bilen döredilýär.

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

Çal reňkli reňkler hem bar, ýöne islendik kömekçi enjamlary öndürmek üçin diňe bir bölek ulanylýar.

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

Karta

Soňra mowzuk reňkleri Sass kartasyna goýulýar, şonuň üçin hyzmatlarymyzy, komponent üýtgedijilerimizi we başgalary döretmek üçin olaryň üstünden aýlanyp bileris.

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

Çal reňkli reňkler Sass kartasy hökmünde hem elýeterlidir. Bu karta haýsydyr bir kömekçi enjam döretmek üçin ulanylmaýar.

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

RGB reňkleri aýratyn Sass kartasyndan emele gelýär:

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

Reňk aç-açanlygy, kommunal hyzmatlar API tarapyndan sarp edilýän öz kartasy bilen gurulýar:

$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

Reňk hyzmatlary biziň peýdaly API-de yglan edilýär scss/_utilities.scss. Utilities API-ni nähili ulanmalydygyny öwreniň.

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