رنگ های بوتسترپ در پس زمینه و متن ها MDB Colors

24 فروردین 1400 برچسب‌ها:,

رنگ های بوتسترپ (MDB Colors) کمک میکنند تا رنگ بندی در تمام المان ها همخوان با هم بنظر برسد و علاوه بر زیبایی به رساندن پیام مشترک رنگ ها کمک میکند. در حقیقت یک palette از پیش تعریف شده است.

در مقالات قبلی از کروسل و تغییر سرعت کروسل خواندیم. در این مقاله هم از نسخه رایگان متریال دیزاین بوتسترپ استفاده میکنیم. برای رنگبندی متن ها و پس زمینه و دکمه ها میتوان از کلاس های primary و secondary و … استفاده کرد.

رنگ بندی در نسخه free متریال دیزاین بوتسترپ

رنگ های بوتسترپ: Buttons

هروقت میخواستید یک دکمه ایجاد کنید، بدون توجه به اینکه تگ a باشد یا تگ button میتوانید از کلاس btn استفاده کنید. انگاه استایل دهی مربوط دکمه اعمال میشود و شبیه به دکمه ظاهر میشود. به سپس برای تغییر رنگ زمینه ان از کلاس دیگری به نام btn-primary استفاده میکنیم. بدیهی است بجای primary میتوان از مقادیر دیگر هم استفاده کرد. (مطابق ویدیو بالا)

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link" data-mdb-ripple-color="dark">Link</button>

رنگ های بوتسترپ: Text و پس زمینه bg

همانطور که میدانید پس زمینه background که مخفف ان bg میشود و برای تعیین رنگ هم از یکی از موارد primary secondary success warning dark light white استفاده میشود. به کد های زیر که از سایت رسمی متریال دیزاین بوتسترپ آوردیم توجه کنید!

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

برای تغییر رنگ متن هم از این کلاس ها استفاده میشود. همانطور که میدانید میتوان از کلاس های بالا هم در کنار کلاس متن استفاده کرد. مثلا به المان های زیر علاوه بر text-primary کلاس bg-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 bg-dark">.text-warning</p>
<p class="text-info bg-dark">.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>

گام بعدی: رنگ بندی حرفه ای

اینجا به رنگ بندی پیشرفته نرسیدیم اما در مقاله بعدی با نسخه PRO متریال دیزاین بوتسترپ برمیگردیم و رنگ بندی حرفه ای را میگوییم. مثلا اینکه چطور با کلاس lighten-4 به مقدار 4 درجه رنگ را روشن تر بکنیم.