in English

Mebala

Fetiša moelelo ka colorka seatla se se tletšego sa diklase tša mohola wa mmala. E akaretša thekgo ya dikgokagano tša setaele le dilete tša go hover, le tšona.

Letlakaleng le

Mebala

Mebala ya sengwalwa ka didirišwa tša mebala. Ge o nyaka go mebala dikgokagano, o ka šomiša .link-*diklase tša mothuši tšeo di nago :hoverle le :focusdipolelo.

.sengwalwa-ya mathomo

.sengwalwa-sekondari

.katlego ya sengwalwa

.sengwalwa-kotsi

.temošo ya sengwalwa

.tshedimošo ya sengwalwa

.seetša-sengwalwa

.sengwalwa-lefsifsi

.mmele-sengwalwa

.sengwalwa se se kgaotšwego

.sengwalwa-se sešweu

.sengwalwa-se se ntsho-50

.sengwalwa-se sešweu-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>

Deprecation: Ka tlaleletšo ya .text-opacity-*didirišwa le diphetogo tša CSS bakeng sa didirišwa tša sengwalwa, .text-black-50gomme .text-white-50di tlogetšwe go tloga go v5.1.0. Di tla tlošwa ka v6.0.0.

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Go se bonagale gabotse

E okeditšwe ka go v5.1.0

Go tloga go v5.1.0, didirišwa tša mmala wa sengwalwa di tšweletšwa ka Sass ka go šomiša diphetogo tša CSS. Se se dumelela diphetogo tša mmala tša nako ya nnete ntle le go kgoboketša le diphetogo tša go ba pepeneneng tša alpha tše di fetogago.

Kamoo e šomago ka gona

.text-primaryEla hloko utility ya rena ya default .

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

Re diriša phetolelo ya RGB ya rena --bs-primary(ka boleng bja 13, 110, 253) phetogo ya CSS gomme ra kgomaretša phetogo ya bobedi ya CSS, --bs-text-opacity, bakeng sa go ba pepeneneng ga alpha (ka boleng bja go se fetoge 1ka lebaka la phetogo ya CSS ya lefelong leo). Seo se ra gore nako efe goba efe yeo o e šomišago .text-primarybjale, boleng bja gago colorbjo bo khomphutha ke rgba(13, 110, 253, 1). Phapano ya CSS ya selegae ka gare ga .text-*sehlopha se sengwe le se sengwe e efoga ditaba tša bohwa ka fao ditiragalo tše di tsentšwego ka gare ga didirišwa ga di be le go ba pepeneneng ga alpha mo go fetotšwego ka go iketla.

Mohlala

Go fetoa go se bonagale moo, tloša --bs-text-opacityka ditaele tša tlwaelo goba ditaele tša ka gare ga mothaladi.

Ye ke sengwalwa sa mathomo sa go se fetoge

Ye ke sengwalwa sa mathomo sa opacity sa 50%

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

Goba, kgetha go tšwa go efe goba efe ya .text-opacitydidirišwa:

Ye ke sengwalwa sa mathomo sa go se fetoge

Ye ke sengwalwa sa mathomo sa opacity sa 75%

Ye ke sengwalwa sa mathomo sa opacity sa 50%

Ye ke sengwalwa sa mathomo sa opacity sa 25%

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

Go lebanya

Ka nako ye nngwe diklase tša diteng di ka se dirišwe ka lebaka la go kgethegile ga mokgethi yo mongwe. Maemong a mangwe, tharollo ye e lekanego ke go phuthela diteng tša elemente ya gago ka elemente ya <div>semantiki goba go feta ka sehlopha seo o se nyakago.

Sass

Go tlaleletša go mošomo wo o latelago wa Sass, nagana ka go bala ka ga dithoto tša rena tša tlwaelo tša CSS tšeo di akareditšwego (aka diphetogo tša CSS) bakeng sa mebala le tše dingwe.

Diphetogo

Bontši bja colordidirišwa di tšweletšwa ke mebala ya rena ya sehlogo, yeo e abetšwego gape go tšwa go diphetogo tša rena tša phalete ya mebala ya kakaretšo.

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

Mebala ya sekala sa bohlokwa le yona e a hwetšagala, eupša go šomišwa fela sehlopha se senyenyane go tšweletša didirišwa dife goba dife.

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

Mmapa

Mebala ya sehlogo e gona e bewa ka gare ga mmapa wa Sass gore re kgone go loop godimo ga yona go tšweletša didirišwa tša rena, diphetoši tša dikarolo, le tše dingwe.

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

Mebala ya greyscale le yona e hwetšagala bjalo ka mmapa wa Sass. Mmapa wo ga o šomišwe go tšweletša didirišwa le ge e le dife.

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

Mebala ya RGB e tšweletšwa go tšwa go mmapa wa Sass wo o arogilego:

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

Gomme di-opacities tša mmala di aga godimo ga seo ka mmapa wa bona wo o jewago ke API ya didirišwa:

$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 ya Didirišwa

Didirišwa tša mebala di tsebagaditšwe ka go API ya rena ya didirišwa ka scss/_utilities.scss. Ithute kamoo o ka dirišago API ya didirišwa.

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