مکيه مواد ڏانهن وڃو Docs نيويگيشن ڏانھن وڃو
in English

رنگ

معنى کي هٿي وٺرائڻ colorسان گڏ رنگين يوٽيلٽي ڪلاس جي ذريعي. هور رياستن سان اسٽائلنگ لنڪس لاءِ سپورٽ پڻ شامل آهي.

رنگ

رنگن جي استعمال سان متن کي رنگ ڏيو. جيڪڏهن توهان لنڪس کي رنگ ڏيڻ چاهيو ٿا، توهان .link-*مددگار طبقن کي استعمال ڪري سگهو ٿا جيڪي آهن :hover۽ :focusرياستون.

متن- پرائمري

متن-ثانوي

.text-ڪاميابي

.text-خطرو

متن جي خبرداري

متن جي ڄاڻ

.text-light

متن- اونداهو

.text-body

متن-خاموش

متن-اڇو

متن-ڪارو-50

متن-اڇو-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>
Deprecation: ٽيڪسٽ يوٽيلٽيز.text-opacity-* لاءِ يوٽيلٽيز ۽ CSS متغيرن جي اضافي سان ، .text-black-50۽ .text-white-505.1.0 جي طور تي ختم ٿيل آھن. اهي v6.0.0 ۾ ختم ڪيا ويندا.
مددگار ٽيڪنالاجي جي معني کي پهچائڻ

معنيٰ شامل ڪرڻ لاءِ رنگ استعمال ڪرڻ صرف هڪ بصري اشارو مهيا ڪري ٿو، جيڪو مددگار ٽيڪنالاجي جي استعمال ڪندڙن تائين نه پهچايو ويندو - جهڙوڪ اسڪرين ريڊر. پڪ ڪريو ته رنگ مان ظاهر ڪيل معلومات يا ته مواد مان ئي پڌري آهي (مثال طور ڏيکاريل متن)، يا متبادل طريقن سان شامل ڪيو ويو آهي، جهڙوڪ اضافي متن .visually-hiddenڪلاس سان لڪايو ويو آهي.

اوپيسيٽي

v5.1.0 ۾ شامل ڪيو ويو

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ڪسٽم اسلوب يا ان لائن اسلوب ذريعي اوور رائڊ ڪريو.

هي ڊفالٽ پرائمري متن آهي
هي 50% اوپيسيٽي پرائمري ٽيڪسٽ آهي
<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:

هي ڊفالٽ پرائمري متن آهي
هي 75% اوپيسيٽي پرائمري ٽيڪسٽ آهي
هي 50% اوپيسيٽي پرائمري ٽيڪسٽ آهي
هي 25% اوپيسيٽي پرائمري ٽيڪسٽ آهي
<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
      )
    ),