loko

loko

Lokoo ny lahatsoratra miaraka amin'ny fitaovana miloko. Raha te hanisy loko rohy ianao dia azonao ampiasaina ny .link-*kilasy mpanampy izay manana :hoversy :focusmilaza.

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

hatevin'ny

Amin'ny v5.1.0, ny fitaovana miloko lahatsoratra dia noforonina miaraka amin'ny Sass amin'ny fampiasana ny fari-piadidiana CSS. Izany dia ahafahana manova loko amin'ny fotoana tena izy tsy misy fanangonana sy fanovana mangarahara alpha mavitrika.

Ahoana ny fiasan'izany

Eritrereto ny .text-primaryfitaovana ampiasainay.

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

Mampiasa dikan-teny RGB amin'ny anay izahay --bs-primary(miaraka amin'ny sandan'ny 13, 110, 253) fari-piadidiana CSS ary ampifandraisina ny fari-piadidiana CSS faharoa, --bs-text-opacity, ho an'ny mangarahara alpha (miaraka amin'ny sanda mahazatra 1noho ny fari-piadidiana CSS eo an-toerana). Midika izany fa amin'ny fotoana rehetra ampiasainao .text-primaryizao, ny colorsanda kajy dia rgba(13, 110, 253, 1). Ny fari-piadidiana CSS eo an-toerana ao anatin'ny .text-*kilasy tsirairay dia misoroka ny olan'ny lova ka tsy manana mangarahara alfa novaina ho azy ireo tranganà fampiasa amin'ny fitaovana.

OHATRA

Mba hanovana an'io opacity io dia aforeto --bs-text-opacityamin'ny alàlan'ny fomba mahazatra na fomba 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>

Na, misafidiana amin'ny iray amin'ireo .text-opacityfitaovana:

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

manokana

Indraindray ny kilasy contextual dia tsy azo ampiharina noho ny fahasamihafan'ny mpifidy hafa. Amin'ny toe-javatra sasany, ny vahaolana ampy dia ny fametahana ny votoatin'ny <div>singanao amin'ny singa semantika iray na maromaro miaraka amin'ny kilasy tiana.

Sass

Ho fanampin'ity fampiasa Sass manaraka ity, diniho ny famakiana momba ny fanananay manokana CSS nampidirina (aka CSS variables) ho an'ny loko sy ny maro hafa.

hiovaova

Ny ankamaroan'ny colorfitaovana ampiasaina dia novokarin'ny loko loha-hevitray, naverina avy amin'ny fari-piainan'ny palette miloko.

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

Misy ihany koa ny loko grayscale, saingy ampahany kely ihany no ampiasaina hamokarana fitaovana rehetra.

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

Sarintany

Apetraka ao amin'ny sarintany Sass avy eo ny lokon'ny lohahevitra mba ahafahantsika mihodinkodina eo amboniny mba hamoronana ny kojakojantsika, ny mpanova singa, sy ny maro hafa.

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

Ny loko grayscale dia azo alaina amin'ny sarintany Sass. Ity sari-tany ity dia tsy ampiasaina hamoronana fitaovana.

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

Ny loko RGB dia novokarina avy amin'ny sarintany Sass misaraka:

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

Ary ny tsy fahampian'ny loko dia miorina amin'ny sarintany manokana izay lanin'ny API fitaovana:

$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

Ny fitaovana miloko dia nambara ao amin'ny API fampiasanay ao amin'ny scss/_utilities.scss. Ianaro ny fomba fampiasana ny utility 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
      )
    ),