رنگ ها
با چند کلاس کاربردی رنگ معنا را از طریق رنگ منتقل کنید. شامل پشتیبانی از پیوندهای استایل با حالت شناور نیز می شود.
پرداختن به ویژگی
گاهی اوقات به دلیل ویژگی انتخابگر دیگری نمی توان کلاس های متنی را اعمال کرد. در برخی موارد، یک راه حل کافی این است که محتوای عنصر خود را در یک <div>
با کلاس قرار دهید.
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-only
کلاس، گنجانده شده است.
رنگ
.text-primary
.text-secondary
.text-موفقیت
.متن خطر
متن هشدار
متن-اطلاعات
.text-light
.text-dark
.text-body
متن قطع شده است
متن-سفید
.text-black-50
.text-white-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>
رنگ پس زمینه
مشابه کلاس های رنگ متن متنی، به راحتی پس زمینه یک عنصر را روی هر کلاس متنی تنظیم کنید. اجزای Anchor در حالت شناور مانند کلاسهای متن تیره میشوند. ابزارهای پس زمینه تنظیم نمی شوند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>
<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