Mitundu

Mitundu

Sinthanitsani mitundu ndi zida zamitundu. Ngati mukufuna kusintha maulalo, mutha kugwiritsa ntchito .link-*makalasi othandizira omwe ali :hoverndi :focusmayiko.

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

Opacity

Pofika pa v5.1.0, zida zamitundu yamalemba zimapangidwa ndi Sass pogwiritsa ntchito zosintha za CSS. Izi zimalola kusintha kwamtundu wanthawi yeniyeni popanda kuphatikizira komanso kusintha kowoneka bwino kwa alpha.

Momwe zimagwirira ntchito

Ganizirani .text-primaryzofunikira zathu zokhazikika.

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

Timagwiritsa ntchito mtundu wa RGB wathu --bs-primary(ndi mtengo wa 13, 110, 253) CSS yosinthika ndikumangirira kusinthika kwachiwiri kwa CSS, --bs-text-opacity, kwa mawonekedwe a alpha (ndi mtengo wokhazikika 1chifukwa cha kusintha kwa CSS komweko). Izi zikutanthauza kuti nthawi iliyonse yomwe mumagwiritsa ntchito .text-primarypano, mtengo wanu wowerengera colorndi rgba(13, 110, 253, 1). Kusintha kwa CSS komweko mkati mwa .text-*kalasi iliyonse kumapewa zovuta za cholowa kotero kuti zida zomwe zasungidwa sizikhala ndi mawonekedwe osinthidwa a alpha.

Chitsanzo

Kuti musinthe mawonekedwewo, sankhani --bs-text-opacitymasitayelo anu kapena masitayelo amizere.

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

Kapena, sankhani kuchokera kuzinthu zilizonse .text-opacity:

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

Mwatsatanetsatane

Nthawi zina makalasi apakatikati sangathe kugwiritsidwa ntchito chifukwa cha kusankhidwa kwamtundu wina. Nthawi zina, njira yokwanira yogwirira ntchito ndikukulunga zomwe zili muzinthu zanu muzinthu za <div>semantic ndi gulu lomwe mukufuna.

Sass

Kuphatikiza pa magwiridwe antchito a Sass otsatirawa, lingalirani zowerengera zamitundu yathu ya CSS yophatikizidwa (zosintha za CSS) zamitundu ndi zina zambiri.

Zosintha

Zothandizira zambiri colorzimapangidwa ndi mitundu yathu yamutu, yoperekedwanso kuchokera kumitundu yathu yapaleti.

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

Mitundu ya Grayscale imapezekanso, koma kagawo kakang'ono kokha kamene kamagwiritsidwa ntchito kupanga zofunikira zilizonse.

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

Mapu

Mitundu yamutu imayikidwa pamapu a Sass kuti tithe kuwazungulira kuti tipange zida zathu, zosinthira zigawo, ndi zina zambiri.

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

Mitundu ya Grayscale imapezekanso ngati mapu a Sass. Mapuwa sagwiritsidwa ntchito kupanga zofunikira zilizonse.

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

Mitundu ya RGB imapangidwa kuchokera pamapu osiyana a Sass:

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

Ndipo mawonekedwe owoneka bwino amamanga pamenepo ndi mapu awo omwe amadyedwa ndi zida za 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");

Utilities API

Zida zamitundu zimalengezedwa muzothandizira zathu API mu scss/_utilities.scss. Phunzirani momwe mungagwiritsire ntchito 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
      )
    ),