Awọn awọ

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

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

Òótọ́

Bi ti v5.1.0, awọn ohun elo awọ ọrọ jẹ ipilẹṣẹ pẹlu Sass nipa lilo awọn oniyipada CSS. Eyi ngbanilaaye fun awọn ayipada awọ ni akoko gidi laisi akopọ ati awọn iyipada akoyawo alpha ti o ni agbara.

Bawo ni o ṣe n ṣiṣẹ

Ro wa aiyipada .text-primaryIwUlO.

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

A lo ẹya RGB ti wa --bs-primary(pẹlu iye ti 13, 110, 253) oniyipada CSS ati so oniyipada CSS keji, --bs-text-opacity, fun akoyawo alpha (pẹlu iye aiyipada kan 1ọpẹ si oniyipada CSS agbegbe). Iyẹn tumọ si nigbakugba ti o ba lo .text-primaryni bayi, coloriye iṣiro rẹ jẹ rgba(13, 110, 253, 1). Oniyipada CSS agbegbe inu .text-*kilasi kọọkan yago fun awọn ọran ogún nitoribẹẹ awọn iṣẹlẹ itẹle ti awọn ohun elo ko ni ni akoyawo alpha ti a yipada laifọwọyi.

Apeere

Lati yi opaity yẹn pada, danu --bs-text-opacitynipasẹ awọn aṣa aṣa tabi awọn aza inline.

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

Tabi, yan lati eyikeyi ninu awọn .text-opacityohun elo:

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

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

Awọn awọ RGB jẹ ipilẹṣẹ lati maapu Sass lọtọ:

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

Ati pe awọn aye awọ kọ lori iyẹn pẹlu maapu tiwọn ti o jẹ nipasẹ API awọn ohun elo:

$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 Awọn ohun elo

Awọn ohun elo awọ jẹ ikede ninu 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,
      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
      )
    ),