رنگ های پس زمینه (Background Colors)
اینجا با «رنگ های پس زمینه بوت استرپ» آشنا می شوی. «کلاس (Class)» یعنی برچسبی آماده برای استایل. با چند کلاس ساده، پس زمینه باکس ها را سریع رنگ می زنیم.
پس زمینه ها با .bg-*
برای رنگ دادن به باکس ها از کلاس های .bg-* استفاده کن؛ مثل primary، success و غیره.
<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-light روی پس زمینه تیره.
متن و پس زمینه آماده با .text-bg-*
کلاس های .text-bg-* متن مناسب را خودکار ست می کنند. دیگر نگران کنتراست نباش.
<p class="text-bg-primary">Primary</p>
<p class="text-bg-success">Success</p>
<p class="text-bg-info">Info</p>
<p class="text-bg-warning">Warning</p>
<p class="text-bg-danger">Danger</p>
<p class="text-bg-secondary">Secondary</p>
<p class="text-bg-dark">Dark</p>
<p class="text-bg-light">Light</p>
گام های عملی
- یک کارت با
.bg-primaryبساز. - اگر تاریک است،
.text-lightاضافه کن. - برای سریع تر شدن، از
.text-bg-primaryاستفاده کن.
نکته: برای تیتر و متن، صفحه تایپوگرافی را ببین. همچنین مروری بر رنگ ها مفید است.
جمع بندی سریع
.bg-*فقط پس زمینه را رنگ می کند..text-*رنگ متن را تنظیم می کند..text-bg-*هر دو را باهم تنظیم می کند.- همیشه حواست به کنتراست باشد.