رنگ

رنگ

رنگن جي استعمال سان متن کي رنگ ڏيو. جيڪڏهن توهان لنڪس کي رنگ ڏيڻ چاهيو ٿا، توهان .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 سان ٺاهيا ويا آهن. هي اجازت ڏئي ٿو حقيقي وقت رنگ تبديلين جي بغير تاليف ۽ متحرڪ الفا شفافيت تبديلين جي.

اهو ڪيئن ڪم ڪري ٿو

اسان جي ڊفالٽ .text-primaryافاديت تي غور ڪريو.

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

اسان استعمال ڪريون ٿا RGB ورجن جو اسان جي --bs-primary(جي قيمت سان 13, 110, 253) CSS متغير ۽ جڙيل هڪ ٻيو CSS متغير، --bs-text-opacity, الفا شفافيت لاءِ (هڪ ڊفالٽ قدر 1سان مقامي CSS متغير جي مهرباني). ان جو مطلب اهو آهي ته جڏهن به توهان .text-primaryهاڻي استعمال ڪريو ٿا، توهان جي حساب ڪيل colorقيمت آهي rgba(13, 110, 253, 1). مقامي CSS متغير هر .text-*طبقي جي اندر وراثت جي مسئلن کان بچي ٿو، تنهنڪري يوٽيلٽيز جي nested مثالن ۾ خودڪار طريقي سان تبديل ٿيل الفا شفافيت نه هوندي آهي.

مثال

ان اوپيسيٽي کي تبديل ڪرڻ لاءِ، --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;

نقشو

موضوع جا رنگ پوءِ ساس نقشي ۾ رکيا ويندا آھن تنھنڪري اسان انھن تي لوپ ڪري سگھون ٿا پنھنجيون يوٽيلٽيز، جزن جي تبديلين ۽ وڌيڪ پيدا ڪرڻ لاءِ.

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

گريس اسڪيل رنگ پڻ موجود آهن ساس نقشي جي طور تي. هي نقشو ڪنهن به افاديت پيدا ڪرڻ لاءِ استعمال نه ڪيو ويو آهي.

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

آر بي بي رنگ هڪ الڳ ساس نقشي مان ٺاهيا ويا آهن:

$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

رنگ افاديت اسان جي يوٽيلٽيز 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
      )
    ),