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.
.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>
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-*
.
<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>
Haçan $enable-gradients
hakykata 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ň .
<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-only
synp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.