Amabara

Tanga ibisobanuro ukoresheje ibara hamwe nintoki zamabara yingirakamaro. Harimo inkunga yo gutunganya amahuza hamwe na reta ya reta, nayo.

Gukemura ibibazo byihariye

Rimwe na rimwe, amasomo ajyanye nayo ntashobora gukoreshwa kubera umwihariko wundi watoranije. Rimwe na rimwe, akazi gahagije ni ugupfunyika ibintu byawe muri <div>hamwe nishuri.

Gutanga ibisobanuro kubuhanga bufasha

Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-onlyn'ishuri.

Ibara

.text-primaire

.text-yisumbuye

.text-intsinzi

.text-akaga

.text-imburira

.text-amakuru

.umucyo

.text-umwijima

.text-umubiri

.text

.text-yera

.text-umukara-50

.text-yera-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">.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-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>

Amasomo yanditswemo nayo akora neza kumurongo hamwe na hover yatanzwe hamwe na leta yibanze. Menya ko icyiciro .text-whitehamwe .text-mutednicyiciro ntaho byongeye guhuza birenze umurongo.

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

Ibara ry'inyuma

Bisa nibisobanuro byanditseho ibara ryamasomo, byoroshye gushiraho inyuma yibintu kurwego urwo arirwo rwose. Ibice bya Anchor bizijimye kuri hover, kimwe namasomo yinyandiko. Ibikorwa byinyuma ntibishirahocolor , mubihe bimwe rero uzakenera gukoresha .text-*ibikorwa byingirakamaro.

.bg-ibanze

.bg-kabiri

.bg-intsinzi

.bg-akaga

.bg-kuburira

.bg-amakuru

.bg-urumuri

.bg-umwijima

.bg-cyera

.bg-mucyo

<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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Icyiciro cya mbere

Iyo $enable-gradientsyashizwe kuri true(isanzwe ni false), urashobora gukoresha .bg-gradient-amasomo yingirakamaro. Wige kubyerekeye amahitamo ya Sass kugirango ushoboze aya masomo nibindi byinshi.

.bg-gradient-primary
.bg-gradient-secondary
.bg-gradient-success
.bg-gradient-danger
.bg-gradient-warning
.bg-gradient-info
.bg-gradient-light
.bg-gradient-dark