Launuka

Launuka

Sanya launin rubutu tare da kayan aikin launi. Idan kuna son canza hanyoyin haɗin yanar gizo, zaku iya amfani da .link-*azuzuwan taimako waɗanda suke :hoverda kuma :focusjihohi.

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

Bahaushe

Tun daga v5.1.0, ana samar da kayan aikin launi na rubutu tare da Sass ta amfani da masu canjin CSS. Wannan yana ba da damar sauye-sauyen launi na ainihi ba tare da haɗawa da canje-canje masu fa'ida ba.

Yadda yake aiki

Yi la'akari da tsohuwar .text-primaryamfanin mu.

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

Muna amfani da nau'in RGB na mu --bs-primary(tare da ƙimar 13, 110, 253) CSS m kuma a haɗe madaidaicin CSS na biyu, --bs-text-opacity, don ma'anar alpha (tare da ƙimar tsohuwa 1godiya ga canjin CSS na gida). Wannan yana nufin duk lokacin da kuka yi amfani da shi .text-primaryyanzu, ƙimar ku ta lissafta colorita ce rgba(13, 110, 253, 1). Maɓallin CSS na gida a cikin kowane .text-*aji yana guje wa al'amuran gado don haka wuraren da aka kafa na kayan aikin ba sa samun ingantaccen bayanin alpha ta atomatik.

Misali

Don canza wannan gaɓoɓin, soke --bs-text-opacityta hanyar salo na al'ada ko salon layi.

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

Ko, zaɓi daga kowane ɗayan .text-opacityabubuwan amfani:

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

Musamman

Wasu lokuta ba za a iya amfani da azuzuwan mahallin ba saboda keɓancewar wani zaɓi. A wasu lokuta, isasshiyar mafita ita ce kunsa abun cikin ku a cikin wani <div>ko fiye na ma'ana tare da ajin da ake so.

Sass

Baya ga ayyukan Sass masu zuwa, yi la'akari da karantawa game da kaddarorin al'ada na CSS (aka CSS masu canji) don launuka da ƙari.

Masu canji

Yawancin colorabubuwan amfani ana samar da su ta launukan jigon mu, waɗanda aka sake keɓance su daga masu canjin palette ɗin mu na yau da kullun.

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

Hakanan ana samun launuka masu launin toka, amma juzu'i ne kawai ake amfani da su don samar da kowane kayan aiki.

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

Taswira

Ana sanya launukan jigo a cikin taswirar Sass don mu iya yin madauki a kansu don samar da kayan aikin mu, masu gyara kayan aiki, da ƙari.

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

Hakanan ana samun launuka masu launin toka azaman taswirar Sass. Ba a amfani da wannan taswirar don samar da kowane kayan aiki.

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

Ana samar da launukan RGB daga taswirar Sass daban:

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

Kuma ɓangarorin launi suna ginawa akan wannan tare da taswirar nasu wanda API ɗin abubuwan amfani ke cinyewa:

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

API ɗin Utilities

Ana bayyana abubuwan amfani masu launi a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

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