in English

Midabka

Bootstrap waxaa taageera nidaam midab leh oo ballaaran kaas oo mawduuca ka dhigaya qaababkayada iyo qaybahayada. Tani waxay awood u siinaysaa habaynta iyo fidinta mashruuc kasta.

Boggan

Midabada mawduuca

Waxaan isticmaalnaa qayb ka mid ah dhammaan midabada si aan u abuurno palette midab yar si loo soo saaro nidaamyada midabka, sidoo kale loo heli karo doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scssfaylka Bootstrap.

Asal ahaan

Sare

Guul

Khatarta

Digniin

Xog

Iftiin

Madow

Dhammaan midabadani waxay diyaar u yihiin sida khariidadda Sass, $theme-colors.

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

Fiiri khariidadahayada Sass iyo dokumentiyada loops -yada sida loo beddelo midabadaas.

Dhammaan midabada

Dhammaan midabada Bootstrap waxay diyaar u yihiin doorsoomayaasha Sass iyo khariidadda Sass ee scss/_variables.scssfaylka. Si looga fogaado kordhinta cabbirrada faylalka, uma samaynayno qoraal ama fasalo midab gadaasha mid kasta oo ka mid ah doorsoomayaashan. Taa baddalkeeda, waxaan dooranaa qayb-hoosaadyadan midabada ah ee palette mawduuca .

U hubso inaad la socoto saamiga isbarbardhiga marka aad habaynayso midabada. Sida hoos ku cad, waxaanu ku darnay saddex is barbar dhig mid kasta oo ka mid ah midabada ugu muhiimsan - mid loogu talagalay midabada swatch ee hadda, mid ka soo horjeeda caddaan, iyo mid ka soo horjeeda madow.

$ buluug#0d6efd

$ buluug-100

$ buluug-200

$ buluug-300

$ buluug-400

$ buluug-500

$ buluug-600

$ buluug-700

$ buluug-800

$ buluug-900

$indigo#6610f2

$ indigo-100

$ indigo-200

$ indigo-300

$ indigo-400

$ indigo-500

$ indigo-600

$ indigo-700

$ indigo-800

$ indigo-900

$ guduud#6f42c1

$ guduud-100

$ guduud-200

$ guduud-300

$ guduud-400

$ guduud-500

$ guduud-600

$ guduud-700

$ guduud-800

$ guduud-900

$ pink#d63384

$ pink-100

$ pink-200

$ pink-300

$ pink-400

$ pink-500

$ pink-600

$ pink-700

$ pink-800

$ pink-900

$cas#dc3545

$ guduud-100

$ guduud-200

$ guduud-300

$ guduud-400

$ guduud-500

$ guduud-600

$ guduud-700

$ guduud-800

$ guduud-900

$ Orange#fd7e14

$ orange-100

$ orange-200

$ orange-300

$ orange-400

$ orange-500

$ orange-600

$ orange-700

$ orange-800

$ orange-900

$ jaalle#ffc107

$ jaalle-100

$ jaalle-200

$ jaalle-300

$ jaalle-400

$ jaalle-500

$ jaalle-600

$ jaalle-700

$ jaalle-800

$ jaalle-900

$ cagaar#198754

$ cagaar-100

$ cagaar-200

$ cagaaran-300

$ cagaaran-400

$ cagaaran-500

$ cagaaran-600

$ cagaar-700

$ cagaaran-800

$ cagaaran-900

$ teel#20c997

$ teel-100

$ teel-200

$ teel-300

$ teel-400

$ teel-500

$ 600

$ 700

$ teel-800

$ teel-900

$ cyan# 0dcaf0

$ cyan-100

$ cyan-200

$ cyan-300

$ cyan-400

$ cyan-500

$ cyan-600

$ cyan-700

$ cyan-800

$ cyan-900

$ cawl-500#adb5bd

$ cawl-100

$ cawl-200

$ cawl-300

$ cawl-400

$ cawl-500

$ cawl-600

$ cawl-700

$ cawl-800

$ cawl-900

$ madow#000

$ cad#ff

Qoraalada Sass

Sass barnaamij ahaan ma dhalin karo doorsoomayaasha, sidaa awgeed waxaanu gacanteena ku abuurnay doorsoomayaasha midab kasta oo nafaheena hadh. Waxaan qeexnaa qiimaha bartanka dhexe (tusaale, $blue-500) waxaana isticmaalnaa shaqooyinka midabka caadiga ah si aan u midabeeyo (loo iftiimiyo) ama u hadhno (madoobaado) midabadayada iyada oo loo marayo mix()shaqada midabka Sass.

Isticmaalka mix()la mid ma aha lighten()iyo darken()— kii hore waxa uu isku daraa midabka la cayimay oo leh caddaan ama madow, halka kan dambe uu kaliya hagaajiyo qiimaha iftiinka midab kasta. Natiijadu waa midabyo aad u dhammaystiran, sida ku cad CodePen demo .

Shaqadeena tint-color()iyo shade-color()hawlaheenna waxay mix()la adeegsadaan $theme-color-intervaldoorsoomayaashayada, kaas oo qeexaya qiimaha boqolleyda la talaabsaday ee midab kasta oo isku dhafan oo aan soo saarno. Fiiri faylasha scss/_functions.scssiyo scss/_variables.scsskoodka isha oo dhan.

Maabka Sass Midabka

Bootstrap's isha Faylasha Sass waxaa ka mid ah saddex khariidado si ay kaaga caawiyaan si dhakhso leh oo fudud u dulmar liiska midabada iyo qiyamkooda hex.

$colorswuxuu taxayaa dhammaan 500midabada salka diyaarka ah
$theme-colorstaxayaa dhammaan midabada mawduucyada si macne ahaan loo magacaabay (hoos lagu muujiyey)
$grayswuxuu taxayaa dhammaan midabada iyo hadhka cawliga

Gudaha scss/_variables.scss, waxaad ka heli doontaa doorsoomayaasha midabka Bootstrap iyo khariidadda Sass. Waa kuwan tusaale $colorskhariidadda Sass:

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

Ku dar, ka saar, ama wax ka beddel qiyamka khariidada dhexdeeda si aad u cusboonaysiiso sida loogu isticmaalo qaybo kale oo badan. Nasiib darro wakhtigan, ma aha qayb kasta oo ka faa'iidaysata khariidadan Sass. Cusboonaysiinta mustaqbalka waxay ku dadaali doontaa inay horumariso tan. Ilaa markaas, qorshee isticmaalka ${color}doorsoomayaasha iyo khariidadan Sass.

Tusaale

Waa kuwan sida aad kuwan ugu isticmaali karto Sass-kaaga:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

Midabka iyo fasallada utility asalka ayaa sidoo kale diyaar u ah dejinta coloriyo background-coloristicmaalka 500qiimaha midabka.

Soo saarista tamarta

Lagu daray v5.1.0

Bootstrap kuma jiraan coloriyo background-colorutility doorsoome kasta oo midab leh, laakiin adiga qudhaadu kuwan ayaad ku abuuri kartaa API utility our iyo khariidadaha Sass ee fidsan ee lagu daray v5.1.0.

Si aad u bilawdo, hubi inaad soo dejisay hawlaheenna, doorsoomayaasha, isku-darka, iyo adeegyadayada.
Isticmaal shaqadayada map-merge-multiple()si aad si dhakhso leh ugu milmaan khariidado badan oo Sass ah khariidad cusub.
Ku dar khariidaddan cusub ee la isku daray si loo kordhiyo adeeg kasta oo leh {color}-{level}magac fasalka.

Waa kuwan tusaale soo saara agabka midabka qoraalka (tusaale, .text-purple-500) adoo isticmaalaya tillaabooyinka kore.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Tani waxay dhalin doontaa .text-{color}-{level}utility cusub midab kasta iyo heer kasta. Waxaad sidaas oo kale u samayn kartaa tas-hiilaadka kale iyo hantida sidoo kale.