Өнгө
Цөөн тооны өнгөний хэрэглээний ангиудын тусламжтайгаар өнгөөр дамжуулан утгыг дамжуулаарай. Хүрэх төлөвтэй холбоосыг загварчлах дэмжлэгийг мөн багтаасан болно.
.текст-анхдагч
.текст-хоёрдогч
.текст-амжилт
.текст-аюул
.текст анхааруулга
.текст-мэдээлэл
.текст гэрэл
.текст-харанхуй
.текст-бие
.текстийг хаасан
.текст-цагаан
.текст-хар-50
.текст-цагаан-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>Контекст текстийн ангиуд нь өгөгдсөн хулгана болон фокусын төлөвтэй зангуу дээр сайн ажилладаг. болон ангид доогуур зурааснаас өөр холбоосын загвар байхгүй гэдгийг анхаарна уу ..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>Контекст текстийн өнгөний ангиудтай адил элементийн дэвсгэрийг дурын контекст ангид хялбархан тохируулж болно. Зангууны бүрэлдэхүүн хэсгүүд нь текстийн ангиудтай адил хулганаар бараан болно. Арын хэрэгслүүдийг тохируулаагүйcolor тул зарим тохиолдолд та .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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Үнэн гэж тохируулсан үед $enable-gradientsта .bg-gradient-хэрэглээний ангиудыг ашиглах боломжтой болно. Анхдагч байдлаар, $enable-gradientsидэвхгүй болсон бөгөөд доорх жишээг санаатайгаар эвдсэн байна. Энэ нь таныг Bootstrap-г ашиглаж эхлэхээс эхлээд хялбархан тохируулах зорилгоор хийгддэг. Эдгээр ангиудыг идэвхжүүлэхийн тулд манай Sass сонголтуудын талаар мэдэж аваарай .
<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>Онцлогтой харьцах
Заримдаа өөр сонгогчийн онцлогоос шалтгаалан контекст ангиудыг ашиглах боломжгүй байдаг. Зарим тохиолдолд, өөрийн элементийн агуулгыг <div>ангид оруулах нь хангалттай тойрон гарах арга юм.
Туслах технологид утгыг дамжуулах
Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.