Source

Өнгө

Цөөн тооны өнгөний хэрэглээний ангиудын тусламжтайгаар өнгөөр дамжуулан утгыг дамжуулаарай. Хүрэх төлөвтэй холбоосыг загварчлах дэмжлэгийг мөн багтаасан болно.

Өнгө

.текст-анхдагч

.текст-хоёрдогч

.текст-амжилт

.текст-аюул

.текст анхааруулга

.текст-мэдээлэл

.текст гэрэл

.текст-харанхуй

.текст-бие

.текстийг хаасан

.текст-цагаан

.текст-хар-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-*хэрэгслүүдийг ашиглахыг хүсэх болно.

.bg-анхдагч

.bg-хоёрдогч

.bg-амжилт

.bg-аюул

.bg-ануулга

.bg-info

.bg-гэрэл

.bg-харанхуй

.bg-цагаан

.bg-тунгалаг

<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гэж тохируулсан үед та хэрэглээний ангиудыг ашиглаж болно. Эдгээр ангиудыг идэвхжүүлэхийн тулд манай Sass сонголтуудын талаар мэдэж аваарай .truefalse.bg-gradient-

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

Онцлогтой харьцах

Заримдаа өөр сонгогчийн онцлогоос шалтгаалан контекст ангиудыг ашиглах боломжгүй байдаг. Зарим тохиолдолд, өөрийн элементийн агуулгыг <div>ангид оруулах нь хангалттай тойрон гарах арга юм.

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .sr-onlyангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.