Midabada

Midabada

Ku midabeey qoraalka isticmaalka midabka Haddii aad rabto in aad midabayso isku xidhka, waxaad isticmaali kartaa .link-*fasalada caawiyaha kuwaas oo leh :hoveroo :focussheegaya.

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

Daahfurnaanta

Sida v5.1.0, yutiilitida midabka qoraalka waxaa lagu soo saaray Sass iyadoo la adeegsanayo doorsoomayaasha CSS. Tani waxay u oggolaaneysaa isbeddelka midabka waqtiga-dhabta ah iyada oo aan la isku dubaridin iyo isbeddellada daahfurnaanta alfa ee firfircoon.

Sida ay u shaqeyso

.text-primaryTixgeli utility our default .

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

Waxaan isticmaalnaa nooca RGB ee our --bs-primary(oo leh qiimaha 13, 110, 253) doorsoome CSS waxaana ku lifaaqnaa doorsoomaha labaad ee CSS, --bs-text-opacity, daah-furnaanta alfa (oo leh qiime caadi ah 1iyadoo ay ugu wacan tahay doorsoomaha CSS ee maxalliga ah). Taas macnaheedu waa wakhti kasta oo aad isticmaasho hadda, qiimahaaga .text-primaryla xisaabiyay waa . Doorsoomiyaha CSS ee gudaha fasal kasta waxa uu ka fogaadaa arrimaha dhaxalka si markaa tusaale ahaan tas-hiilaadka tas-hiilaadka aanay si toos ah u yeelan hufnaanta alfa oo la beddelay.colorrgba(13, 110, 253, 1).text-*

Tusaale

Si aad u bedesho mugdigaas, ku dhaaf --bs-text-opacityqaababka gaarka ah ama qaababka khadka

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

Ama, ka dooro mid ka mid ah .text-opacityadeegyada:

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

Gaar ahaan

Mararka qaarkood xiisadaha macnaha guud lama dabaqi karo sababtoo ah gaar ahaanshaha xulashada kale. Xaaladaha qaarkood, ka-hortag ku filan ayaa ah inaad ku duubto nuxurkaaga qayb <div>ama wax ka badan oo semantic ah oo leh fasalka la rabo.

Sass

Marka lagu daro shaqada Sass ee soo socota, tixgeli inaad akhrido wax ku saabsan guryahayada CSS ee ku jira (loo yaqaan doorsoomayaasha CSS) ee midabada iyo wax ka badan.

Kala duwanaansho

Inta badan colortas-hiilaadka waxa soo saara midabada mawduuceena, oo dib loogu qoondeeyay doorsoomayaasha palette midabada guud.

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

Midabada cawl sidoo kale waa la heli karaa, laakiin qayb-hoosaad kaliya ayaa loo isticmaalaa in lagu soo saaro agab kasta.

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

Maab

Midabada mawduuca ayaa markaa la geliyaa khariidadda Sass si aan u soo saarno iyaga si aan u soo saarno utility our, wax ka beddelayaasha qaybaha, iyo in ka badan.

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

Midabada Cawlan ayaa sidoo kale loo heli karaa khariidadda Sass ahaan. Khariidaddan looma isticmaalo in lagu dhaliyo wax adeeg ah.

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

Midabada RGB waxaa laga soo saaray khariidad Sass gooni ah:

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

Maqribnimada midabku waxay ku dhistaa khariidadooda taas oo ay isticmaasho API-ga:

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

Utilities API

Utilities midabka waxaa lagu caddeeyey utilities API gudaha scss/_utilities.scss. Baro sida loo isticmaalo API utilities.

    "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
      )
    ),