Source

Reňkler

Bir topar reňk peýdaly sapaklary bilen reňk arkaly many beriň. Hover ştatlary bilen baglanyşyklary düzmek üçin goldawy hem öz içine alýar.

Reňk

.text-başlangyç

.text-ikinji

.text-üstünlik

.text-howp

.text-duýduryş

.text-info

ýagtylyk

.text-dark

.text

.text-ak

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

Kontekstdäki tekst sapaklary, berlen aýlaw we fokus ýagdaýlary bolan labyrlarda-da gowy işleýär. Synpda we synpda baglanyşyk stiliniň ýokdugyna üns beriň ..text-white.text-muted

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

Arka reňki

Kontekstdäki tekst reňk synplaryna meňzeş bir elementiň fonuny islendik kontekst synpyna aňsatlyk bilen düzüň. Gämi bölekleri, edil tekst sapaklary ýaly, garaňkyda garalar. Fon hyzmatlary gurulmaýar ,color şonuň üçin käbir ýagdaýlarda kommunal hyzmatlary ulanjak bolarsyňyz .text-*.

.bg-başlangyç
.bg-ikinji
.bg-üstünlik
.bg-howp
.bg-duýduryş
.bg-maglumat
ýagtylyk
.bg-garaňky
.bg-ak
<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>

Fon gradienti

Haçan $enable-gradientshakykata gabat gelseňiz, .bg-gradient-peýdaly sapaklary ulanyp bilersiňiz. Düzgüne görä $enable-gradients, ýapylýar we aşakdaky mysal bilgeşleýin bozulýar. Bu, “Bootstrap” ulanyp başlanyňyzdan has aňsatlaşdyrmak üçin edilýär. Bu sapaklary we başgalary işjeňleşdirmek üçin Sass opsiýalarymyzy öwreniň .

.bg-gradient-başlangyç
.bg-gradient-ikinji
.bg-gradient-üstünlik
.bg-gradient-howp
.bg-gradient-duýduryş
.bg-gradient-maglumat
.bg-gradient-ýagtylyk
.bg-gradient-garaňky
<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>

Aýratynlyk bilen iş salyşmak

Käwagt başga bir saýlaýjynyň aýratynlygy sebäpli kontekst sapaklary ulanylyp bilinmez. Käbir ýagdaýlarda, elementiň mazmunyny <div>synp bilen jemlemek üçin ýeterlik iş.

Kömekçi tehnologiýalara many bermek

Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-onlysynp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.