Imibala

Ukugqithisa intsingiselo colorngeqela leeklasi eziluncedo zemibala. Ibandakanya inkxaso yonxibelelwano lwesitayile kunye neendawo ezijikelezayo, nazo.

Kweli phepha

Imibala

Faka umbala kwisicatshulwa ngezinto eziluncedo zombala. Ukuba ufuna ukufaka imibala kumakhonkco, ungasebenzisa .link-*iiklasi zabancedisi abanazo :hoverkunye :focusnezichazayo.

.isicatshulwa-esisisiseko

.okubhaliweyo-kwesibini

.impumelelo yokubhaliweyo

.ingozi yokubhaliweyo

.isicatshulwa-isilumkiso

.ulwazi olubhaliweyo

.ukukhanya okubhaliweyo

.umbhalo-mnyama

.text-body

.umbhalo-uthulisiwe

.umbhalo-mhlophe

.umbhalo-omnyama-50

.umbhalo-mhlophe-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>

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umzekelo, umbhalo obonakalayo), okanye luqukwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .visually-hiddeneklasini.

Ukuchaza ngokuthe ngqo

Ngamanye amaxesha iiklasi zomxholo azinakusetyenziswa ngenxa yento ethile yomnye umkhethi. Kwezinye iimeko, i-workaround eyaneleyo kukusonga umxholo wento yakho <div>okanye ngaphezulu kwesemantic kunye neklasi oyifunayo.

Sass

Ukongeza koku kulandelayo ukusebenza kweSass, cinga ngokufunda malunga neempawu zethu zesiko le-CSS ezibandakanyiweyo (eziguquguqukayo ze-CSS) ngemibala kunye nokunye.

Izinto eziguquguqukayo

Uninzi lwezinto coloreziluncedo ziveliswa nemibala yethu yomxholo, yabelwa ngokutsha ukusuka kwiphalethi yethu yemibala eyahlukeneyo.

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

Imibala engwevu nayo iyafumaneka, kodwa iseti encinci kuphela esetyenziswayo ukwenza naziphi na izinto eziluncedo.

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

Imephu

Imibala yomxholo ithi emva koko ifakwe kwimephu ye-Sass ukuze sikwazi ukujikeleza phezu kwayo ukuze sivelise izixhobo zethu eziluncedo, izilungisi zecandelo, kunye nokunye.

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

Imibala engwevu nayo iyafumaneka njengemephu ye-Sass. Le mephu ayisetyenziswa ukwenza naziphi na izinto eziluncedo.

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

Utilities API

Izinto eziluncedo zombala zibhengezwe kwizinto zethu ze-API kwi scss/_utilities.scss. Funda indlela yokusebenzisa izinto eziluncedo API.

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),