Source

رنگ ها

با چند کلاس کاربردی رنگ معنا را از طریق رنگ منتقل کنید. شامل پشتیبانی از پیوندهای استایل با حالت شناور نیز می شود.

رنگ

.text-primary

.text-secondary

.text-موفقیت

.متن خطر

متن هشدار

متن-اطلاعات

.text-light

.text-dark

متن قطع شده است

متن-سفید

<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-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</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-*کاربردی استفاده کنید.

.bg-primary

.bg-ثانویه

.bg-موفقیت

.bg- خطر

.bg-warning

.bg-info

.bg-light

.bg-dark

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

گرادیان پس زمینه

وقتی $enable-gradientsروی true تنظیم شود، می‌توانید از .bg-gradient-کلاس‌های کاربردی استفاده کنید. به طور پیش فرض $enable-gradientsغیرفعال است و مثال زیر عمداً خراب شده است. این کار برای سفارشی سازی آسان تر از لحظه ای که شروع به استفاده از بوت استرپ می کنید انجام می شود. درباره گزینه‌های 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

<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

پرداختن به ویژگی

گاهی اوقات به دلیل ویژگی انتخابگر دیگری نمی توان کلاس های متنی را اعمال کرد. در برخی موارد، یک راه حل کافی این است که محتوای عنصر خود را در یک <div>با کلاس قرار دهید.

انتقال معنا به فناوری های کمکی

استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-onlyکلاس، گنجانده شده است.