Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

Awọn awọ

Ṣe afihan itumọ nipasẹ colorpẹlu iwonba ti awọn kilasi IwUlO awọ. Pẹlu atilẹyin fun awọn ọna asopọ iselona pẹlu awọn ipinlẹ rababa, paapaa.

Lori iwe yi

Awọn awọ

Ṣe awọ ọrọ pẹlu awọn ohun elo awọ. Ti o ba fẹ ṣe awọ awọn ọna asopọ, o le lo awọn .link-*kilasi oluranlọwọ eyiti o ni :hoverati :focusawọn ipinlẹ.

.ọrọ-akọkọ

.ọrọ-secondary

.ọrọ-aseyori

.ọrọ-ewu

.kilọ-ọrọ

.ọrọ-alaye

.ọrọ-imọlẹ

.ọrọ-ṣokunkun

.ọrọ-ara

.ọrọ-dakẹjẹẹ

.ọrọ-funfun

.ọrọ-dudu-50

.ọrọ-funfun-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>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .visually-hiddenkilasi naa.

Ni pato

Nigba miiran awọn kilasi ọrọ-ọrọ ko le ṣe lo nitori iyasọtọ ti yiyan miiran. Ni awọn igba miiran, iṣẹ-ṣiṣe ti o to ni lati fi ipari si akoonu eroja rẹ ni ipin kan <div>tabi diẹ sii itumọ pẹlu kilasi ti o fẹ.

Sass

Ni afikun si iṣẹ ṣiṣe Sass atẹle, ronu kika nipa awọn ohun-ini aṣa CSS ti o wa pẹlu wa (awọn oniyipada CSS) fun awọn awọ ati diẹ sii.

Awọn oniyipada

Pupọ colorawọn ohun elo jẹ ipilẹṣẹ nipasẹ awọn awọ akori wa, ti a tun sọtọ lati awọn oniyipada paleti awọ jeneriki wa.

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

Awọn awọ grayscale tun wa, ṣugbọn ipin kan nikan ni a lo lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.

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

Maapu

Lẹhinna a fi awọn awọ akori sinu maapu Sass kan ki a le lu wọn lati ṣe agbekalẹ awọn ohun elo wa, awọn iyipada paati, ati diẹ sii.

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

Awọn awọ greyscale tun wa bi maapu Sass kan. Maapu yii kii ṣe lati ṣe ipilẹṣẹ eyikeyi awọn ohun elo.

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

API Awọn ohun elo

Awọn ohun elo awọ jẹ ikede ni awọn ohun elo API ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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