Midabada

U gudbi macnaha iyada coloroo la adeegsanayo sacab muggiis oo ah fasallada utility midabka. Waxa ku jira taageerada qaabaynta isku xidhka dawladaha duleelka leh, sidoo kale.

Boggaan

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.

.Qoraalka-primary

.qoraalka-sare

.qoraal-guul

.Qoraalka-khatarta

.digniin qoraal ah

.macluumaadka qoraalka

.qoraalka-iftiin

.qoraal-madow

.qoraalka-jirka

.Qoraalka aamusan

.qoraal-cad

.qoraal-madow-50

.qoraal-cad-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>

U gudbinta macnaha tignoolajiyada caawinta

Isticmaalka midabka si loogu daro macnaha kaliya waxay bixisaa tilmaam muuqaal ah, taas oo aan loo gudbin doonin isticmaalayaasha tignoolajiyada caawinta - sida akhristayaasha shaashadda. Hubi in macluumaadka lagu tilmaamay midabku ay ka cad yihiin waxa ku jira laftiisa (tusaale qoraalka muuqda), ama lagu soo daro habab kale, sida qoraal dheeraad ah oo .visually-hiddenfasalka dhexdiisa ku qarsoon.

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

Utilities API

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

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),