رنگ ها (Colors)

در بوت استرپ 5، «رنگ های بوت استرپ 5» به متن و پس زمینه معنا می دهند. «کلاس (Class)» یعنی برچسبی برای استایل آماده. با چند کلاس ساده، متن ها و باکس ها را مثل نقاشی رنگ می زنیم.

رنگ متن (Text Colors)

برای رنگ دادن به متن از کلاس های متنی استفاده کن؛ مثل اصلی، موفقیت، هشدار و غیره.

<p class="text-muted">Muted text</p>
<p class="text-primary">Important text</p>
<p class="text-success">Success text</p>
<p class="text-info">Info text</p>
<p class="text-warning">Warning text</p>
<p class="text-danger">Danger text</p>
<p class="text-secondary">Secondary text</p>
<p class="text-dark">Dark text</p>
<p class="text-body">Body text</p>
<p class="text-light">Light text</p>

مشاهده در ادیتور

شفافیت 50٪ برای سیاه و سفید

برای متن سیاه یا سفید نیمه شفاف از .text-black-50 و .text-white-50 کمک بگیر.

<p class="text-black-50">Black with 50% opacity</p>
<p class="text-white-50 bg-dark">White with 50% opacity</p>

مشاهده در ادیتور

رنگ پس زمینه (Background Colors)

پس زمینه ها با .bg-* تنظیم می شوند. یادت باشد متن مناسب هم انتخاب کنی.

<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>

مشاهده در ادیتور

ترکیب آماده: text-bg-*

با .text-bg-* خود بوت استرپ رنگ متنِ مناسب را خودش ست می کند.

<p class="text-bg-primary">Primary badge</p>
<p class="text-bg-success">Success badge</p>
<p class="text-bg-warning">Warning badge</p>
<p class="text-bg-danger">Danger badge</p>
<p class="text-bg-secondary">Secondary badge</p>
<p class="text-bg-dark">Dark badge</p>
<p class="text-bg-light">Light badge</p>

مشاهده در ادیتور

نکته: برای متن خوانا روی پس زمینه تیره، از .text-light استفاده کن. روی روشن هم .text-dark بهتر است.

گام های عملی

1. یک باکس با .bg-primary بساز.
2. داخلش متن با .text-light قرار بده.
3. برای تگ ها از .text-bg-* استفاده کن.

جمع بندی سریع

• کلاس های متن با .text-* شروع می شوند.
• پس زمینه ها با .bg-* تعریف می شوند.
• .text-bg-* متن مناسب را خودکار می گذارد.
• کنتراست خوب یعنی خوانایی بهتر.

نکته: برای تیترهای تمیز به تایپوگرافی سر بزن. ادامه رنگ ها را هم ببین. اگر خواستی، همین صفحه رنگ های بوت استرپ 5 را نشانه گذاری کن.