باز بدە بۆ ناوەڕۆکی سەرەکی باز بدە بۆ گەشتکردن بە دۆکیومێنتەکان
in English

ڕەنگەکان

colorبە مشتێک پۆلی سوودمەندی ڕەنگ لە ڕێگەیەوە مانا بگەیەنە . پشتگیری بۆ ستایلکردنی بەستەرەکان لەگەڵ دۆخی هۆڤەر لەخۆدەگرێت، هەروەها.

ڕەنگەکان

ڕەنگکردنی دەق بە سوودمەندییەکانی ڕەنگکردن. ئەگەر بتەوێت بەستەرەکان ڕەنگ بکەیت، دەتوانیت .link-*پۆلەکانی یارمەتیدەر بەکاربهێنیت کە have :hoverand :focusstates.

.دەق-سەرەکی

.دەق-لاوەکی

.دەق-سەرکەوتن

.دەق-مەترسی

.ئاگادارکردنەوەی دەق

.زانیاری دەق

.دەق-ڕووناکی

.دەق-تاریک

.دەق-جەستە

.دەق-بێدەنگ کراوەتەوە

.دەق-سپی

.دەق-ڕەش-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>
بەکارنەهێنان: لەگەڵ ��یادکردنی .text-opacity-*سوودمەندیەکان و گۆڕاوەکانی CSS بۆ سوودمەندییەکانی دەق، .text-black-50و .text-white-50لە v5.1.0ەوە بەکارنەهێنراون. لە v6.0.0 لا دەبرێن.
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .visually-hiddenپۆلەکەدا شاراوەتەوە.

ناڕوونی

لە v5.1.0 زیاد کراوە

لە 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مان هاوپێچ دەکەین، --bs-text-opacity, بۆ شەفافیەتی ئەلفا (بە بەهای پێشوەختە 1بەهۆی گۆڕاوێکی CSSی ناوخۆیی). واتە هەر کاتێک ئێستا بەکاری بهێنیت ، بەهای .text-primaryحیسابکراوەکەت بریتییە لە . گۆڕاوەی CSSی ناوخۆیی لە ناو هەر پۆلێکدا خۆی لە کێشەکانی میرات دەپارێزێت بۆیە نموونە هێلانەییەکانی سوودمەندەکان بە شێوەیەکی ئۆتۆماتیکی شەفافیەتی ئەلفا دەستکاریکراویان نییە.colorrgba(13, 110, 253, 1).text-*

نموونە

بۆ گۆڕینی ئەو ناڕوونییە، --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
);

ڕەنگەکانی 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 ی سوودمەندیەکان

سوودمەندییەکانی ڕەنگ لە 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
      )
    ),