Midabada
U gudbi macnaha midab leh sacab muggiis oo ah fasallada tamarta midabka. Waxa ku jira taageerada qaabaynta isku xidhka dawladaha duleelka leh, sidoo kale.
.Qoraalka-primary
.qoraalka-sare
.qoraal-guul
.Qoraalka-khatarta
.digniin qoraal ah
.macluumaadka qoraalka
.qoraalka-iftiin
.qoraal-madow
.Qoraalka aamusan
.qoraal-cad
<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">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
Fasallada qoraalka macnuhu waxa kale oo ay si fiican ugu shaqeeyaan barroosinnada leh duleelka iyo xaaladaha diiradda la saaray. Ogsoonow in fasalka .text-white
iyo .text-muted
fasalka aysan lahayn habayn xiriiriye.
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
Si la mid ah fasallada midabka qoraalka ee macnaha guud, si fudud u deji asalka curiyaha fasalka kasta. Qaybaha barroosinku waxay ku madoobayaan duleelka, sida fasallada qoraalka. Utility -ga asalka ahi ma dejiyocolor
, markaa xaaladaha qaarkood waxaad u baahan doontaa inaad isticmaasho .text-*
yutiilitida.
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
Marka $enable-gradients
loo dhigo run, waxaad awoodi doontaa inaad isticmaasho .bg-gradient-
fasalada utility. Sida caadiga ah, $enable-gradients
waa naafo oo tusaalaha hoose si ula kac ah ayaa loo jabiyay. Tan waxa loo sameeyaa habayn sahlan laga bilaabo marka aad bilowdo isticmaalka Bootstrap. Wax ka baro ikhtiyaarkayaga Sass si aad awood ugu siiso fasaladan iyo wax ka badan.
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>
Wax ka qabashada gaar ahaaneed
Mararka qaarkood xiisadaha macnaha guud lama dabaqi karo sababtoo ah gaar ahaanshaha xulashada kale. Xaaladaha qaarkood, ka-hortag ku filan ayaa ah in lagu duubo nuxurka maaddooyinkaaga <div>
fasalka.
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 .sr-only
fasalka dhexdiisa ku qarsoon.