Өнгө
Цөөн тооны өнгөний хэрэглээний ангиудын тусламжтайгаар өнгөөр дамжуулан утгыг дамжуулаарай. Хүрэх төлөвтэй холбоосыг загварчлах дэмжлэгийг мөн багтаасан болно.
.текст-анхдагч
.текст-хоёрдогч
.текст-амжилт
.текст-аюул
.текст анхааруулга
.текст-мэдээлэл
.текст гэрэл
.текст-харанхуй
.текстийг хаасан
.текст-цагаан
<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>Контекст текстийн ангиуд нь өгөгдсөн хулганыг чиглүүлэх болон фокусын төлөвтэй зангуу дээр сайн ажилладаг. болон ангид холбоосын загвар байхгүй гэдгийг анхаарна уу ..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>Үнэн гэж тохируулсан үед $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ангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.