in English

Mitundu

Fotokozerani tanthauzo colorndi magulu angapo amitundu. Ikuphatikizanso chithandizo cha masitayelo maulalo okhala ndi ma hover states, nawonso.

Patsamba ili

Mitundu

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

.zolemba-zoyambirira

.text-sekondale

.malemba-kupambana

.malemba-ngozi

.chenjezo lalemba

.zolemba-zolemba

.mawu-kuwala

.zolemba-zakuda

.malemba-thupi

.zolemba-zotsekedwa

.zolemba-zoyera

.malemba-wakuda-50

.zolemba-zoyera-50

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

Kutsika: Ndi kuwonjezera kwa .text-opacity-*zofunikira ndi zosintha za CSS zamalemba, .text-black-50ndipo .text-white-50zimachotsedwa ngati v5.1.0. Adzachotsedwa mu v6.0.0.

Kupereka tanthauzo ku matekinoloje othandizira

Kugwiritsa ntchito utoto kuti muwonjezere tanthauzo kumangopereka chithunzithunzi, chomwe sichidzaperekedwa kwa ogwiritsa ntchito matekinoloje othandizira - monga owerenga pazenera. Onetsetsani kuti zomwe zatchulidwa ndi mtunduwo zikuwonekera kuchokera pazomwe zili (monga zolemba zowonekera), kapena zikuphatikizidwa ndi njira zina, monga zolemba zina zobisika ndi .visually-hiddenkalasi.

Opacity

Yowonjezedwa mu v5.1.0

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.

Ili ndilolemba lokhazikika

Awa ndi 50% mawu opacity primary

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

Ili ndilolemba lokhazikika

Ichi ndi 75% mawu opacity primary

Awa ndi 50% mawu opacity primary

Awa ndi 25% mawu opacity primary

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