Рангҳо

Рангҳо

Матнро бо утилитҳои рангӣ ранг кунед. Агар шумо хоҳед, ки пайвандҳоро ранг кунед, шумо метавонед .link-*синфҳои ёрирасонро истифода баред, ки дорои :hoverва :focusдавлатҳо мебошанд.

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

Шаффофият

Аз v5.1.0, утилитаҳои ранги матн бо Sass бо истифода аз тағирёбандаҳои CSS тавлид мешаванд. Ин имкон медиҳад, ки дар вақти воқеӣ тағир додани ранг бидуни таҳия ва тағирёбии шаффофияти динамикии алфа.

Он чӣ гуна кор мекунад

Утилити пешфарзи моро баррасӣ кунед .text-primary.

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

Мо версияи RGB-и тағирёбандаи CSS-и --bs-primaryхудро (бо арзиши ) истифода мебарем ва барои шаффофияти алфа 13, 110, 253як тағирёбандаи дуюми CSS -ро замима мекунем (бо арзиши пешфарз ба шарофати тағирёбандаи маҳаллии CSS). Ин маънои онро дорад, ки ҳар вақте, ки шумо ҳоло истифода мекунед , арзиши ҳисобшудаи шумо . Тағйирёбандаи локалии CSS дар дохили ҳар як синф аз мушкилоти меросӣ канорагирӣ мекунад, аз ин рӯ намунаҳои лонашудаи утилитаҳо ба таври худкор шаффофияти тағирёфтаи алфа надоранд.--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).text-*

Мисол

Барои тағир додани он шаффофият, --bs-text-opacityтавассути сабкҳои фармоишӣ ё сабкҳои дохилиро аз байн баред.

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

Ё, аз яке аз барномаҳои .text-opacityкоммуналӣ интихоб кунед:

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

Хусусият

Баъзан синфҳои контекстӣ аз сабаби хусусияти интихобкунандаи дигар истифода намешаванд. Дар баъзе мавридҳо, ҳалли кофӣ ин аст, ки мундариҷаи унсури худро дар як <div>унсури семантикӣ бо синфи дилхоҳ печонед.

Сасс

Илова ба функсияҳои зерини Sass, дар бораи хосиятҳои фармоишии CSS (тағйирёбандаҳои CSS) барои рангҳо ва ғайра хонед.

Тағйирёбандаҳо

Аксари colorутилитҳо бо рангҳои мавзӯии мо тавлид мешаванд, ки аз тағирёбандаҳои палитраи рангҳои умумии мо дубора таъин шудаанд.

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

Рангҳои хокистарранг низ дастрасанд, аммо барои тавлиди ҳама гуна утилитаҳо танҳо зермаҷмӯа истифода мешаванд.

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

Харита

Пас аз он рангҳои мавзӯъ ба харитаи Sass ҷойгир карда мешаванд, то мо метавонем онҳоро аз болои онҳо гардиш карда, утилитаҳои худ, тағирдиҳандаҳои ҷузъҳо ва ғайраро тавлид кунем.

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

Рангҳои хокистарранг инчунин ҳамчун харитаи Sass дастрасанд. Ин харита барои тавлиди ягон утилитаҳо истифода намешавад.

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

Рангҳои RGB аз харитаи алоҳидаи Sass тавлид мешаванд:

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

Ва ношаффофияти рангҳо дар асоси он бо харитаи худ, ки аз ҷониби 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");

API Utilities

Утилитаҳои рангӣ дар API утилитаҳои мо дар scss/_utilities.scss. Омӯзед, ки чӣ тавр истифода бурдани 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
      )
    ),