in English

Өнгө

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

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

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

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

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

Өнгө

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

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

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

.текст-аюул

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

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

.текст гэрэл

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

.текст-бие

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

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

.текст-хар-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