in English

Գույներ

Փոխանցեք իմաստը գույնի միջոցով մի քանի գունային օգտակար դասերի միջոցով: Ներառում է նաև հովերի վիճակների հետ ոճավորող հղումների աջակցություն:

Զբաղվել կոնկրետությամբ

Երբեմն համատեքստային դասերը չեն կարող կիրառվել մեկ այլ ընտրիչի առանձնահատկությունների պատճառով: Որոշ դեպքերում, բավարար լուծում է ձեր տարրի բովանդակությունը <div>դասի հետ a-ով փաթաթելը:

Օժանդակ տեխնոլոգիաներին իմաստ հաղորդելը

Իմաստ ավելացնելու համար գույնի օգտագործումը միայն տեսողական ցուցում է տալիս, որը չի փոխանցվի օժանդակ տեխնոլոգիաների օգտագործողներին, ինչպիսիք են էկրանի ընթերցողները: Համոզվեք, որ գույնով նշված տեղեկատվությունը կա՛մ ակնհայտ է հենց բովանդակությունից (օրինակ՝ տեսանելի տեքստից), կա՛մ ներառված է այլընտրանքային միջոցներով, ինչպիսին է .sr-onlyդասի հետ թաքցված լրացուցիչ տեքստը:

Գույն

.տեքստ-առաջնային

.տեքստային-երկրորդական

.տեքստ-հաջողություն

.տեքստ-վտանգ

.տեքստային նախազգուշացում

.text-info

.տեքստ-լույս

.տեքստ-մութ

.տեքստ-մարմին

.text-muted

.տեքստ-սպիտակ

.տեքստ-սև-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-info
.բգ-լույս
.բգ-մութ
.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դրված է true(կանխադրված է false), կարող եք օգտագործել .bg-gradient-օգտակար դասեր: Իմացեք մեր Sass ընտրանքների մասին ՝ այս դասերը և ավելին միացնելու համար:

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