Awọn awọ

Ṣe afihan itumọ nipasẹ awọ pẹlu iwonba ti awọn kilasi IwUlO awọ. Pẹlu atilẹyin fun awọn ọna asopọ iselona pẹlu awọn ipinlẹ rababa, paapaa.

Awọn olugbagbọ pẹlu ni pato

Nigba miiran awọn kilasi ọrọ-ọrọ ko le ṣe lo nitori iyasọtọ ti yiyan miiran. Ni awọn igba miiran, iṣẹ-ṣiṣe ti o to ni lati fi ipari si akoonu eroja rẹ ni a <div>pẹlu kilasi naa.

Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ

Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-onlykilasi naa.

Àwọ̀

.ọrọ-akọkọ

.ọrọ-secondary

.ọrọ-aseyori

.ọrọ-ewu

.kilọ-ọrọ

.ọrọ-alaye

.ọrọ-imọlẹ

.ọrọ-ṣokunkun

.ọrọ-ara

.ọrọ-dakẹjẹẹ

.ọrọ-funfun

.ọrọ-dudu-50

.ọrọ-funfun-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>

Awọn kilasi ọrọ asọye tun ṣiṣẹ daradara lori awọn ìdákọró pẹlu fifin ti a pese ati awọn ipinlẹ idojukọ. Ṣe akiyesi pe .text-whiteati .text-mutedkilasi ko ni iselona ọna asopọ afikun ti o kọja abẹlẹ.

<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>

Awọ abẹlẹ

Iru si awọn kilasi awọ ọrọ ọrọ-ọrọ, ni irọrun ṣeto abẹlẹ ti ohun kan si eyikeyi kilasi asọye. Awọn paati oran yoo ṣokunkun lori rababa, gẹgẹ bi awọn kilasi ọrọ. Awọn ohun elo abẹlẹ ko ṣetocolor , nitorina ni awọn igba miiran iwọ yoo fẹ lati lo .text-*awọn ohun elo.

.bg-akọkọ

.bg-keji

.bg-aseyori

.bg-ewu

.bg-ìkìlọ

.bg-alaye

.bg-imọlẹ

.bg-dudu

.bg-funfun

.bg-sihin

<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>

Isalẹ abẹlẹ

Nigbati $enable-gradientso ba ṣeto si true(aiyipada jẹ false), o le lo .bg-gradient-awọn kilasi iwUlO. Kọ ẹkọ nipa awọn aṣayan Sass wa lati mu ki awọn kilasi wọnyi ṣiṣẹ ati diẹ sii.

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