رنگ ها در بوت استرپ ۴

بهاره حسنیبهاره حسنی
273 بازدید

رنگ بندی در بوت استرپ برای رنگ دادن به متن و رنگ دادن به پس زمینه استفاده میشود.

رنگ بندی در بوت استرپ به شیوه خاصی انجام میشود و رنگ ها اختصاصی هستند.

در bootstrap 4 کلاسهای متنی هستند که میتوان از آن ها جهت معنی دادن به رنگ ها استفاده کرد.

با سلام خدمت کاربران عزیز وبسایت پرنیان طرح

در این آموزش قصد دارم نمونه های از کلاس های رنگی بوت استرپ داخلی را برای عناصر مختلف به شما نشان دهم.

بوت استرپ کلاس های خاصی برای رنگ آمیزی متن ، پیوندها ، دکمه ها و غیره دارد.

 

رنگ متن ها :

رنگ بندی سایت یکی از عوامل مهم در زیبایی و جذابیت قالب سایت است که یکی از ویژگی های مهم محسوب میشود.

بوت استرپ ۴ کلاسهای متنی دارد که با استفاده از این کلاسها میتوان به رنگ ها معنی داد.

به طور کلی نام کلاس از متنی استفاده میکند که ممکن است هدف متن یا برخی عنصر دیگر باشد.

چند نمونه از کلاسهایی که مربوط به رنگ متن هستند:

text-muted , text-primary , text-success , text-info , text-warning , text-danger , text-secondary , text-white , text-dark , text-body and text-light.

به مثال زیر توجه کنید:

[php]

<body>
<div class=”container”>
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide “meaning through colors”:</p>
  <p class=”text-muted”>This text is muted.</p>
  <p class=”text-primary”>This text is important.</p>
  <p class=”text-success”>This text indicates success.</p>
  <p class=”text-info”>This text represents some information.</p>
  <p class=”text-warning”>This text represents a warning.</p>
  <p class=”text-danger”>This text represents danger.</p>
  <p class=”text-secondary”>Secondary text.</p>
  <p class=”text-dark”>This text is dark grey.</p>
  <p class=”text-body”>Default body color (often black).</p>
  <p class=”text-light”>This text is light grey (on white background).</p>
  <p class=”text-white”>This text is white (on white background).</p>
</div>
</body>

[/php]

نتیجه مثال بالا را در این لینک مشاهده کنید.

معنی متن کلاس های متنی به شرح زیر است:

_muted : (غیر فعال)

_important : (مهم)

_success : (موفقیت)

_information : (اطلاعات)

_warning : (هشدار)

_danger : (خطر)

به طور مثال برای هشدار دادن به یک بازدید کننده برای اقدامات خاص رنگی که با آن هشدار میدهید ، رنگ نارنجی است.

لینک ها :

کلاس هاس متن متنی همچنین در لینک ها میتوانند استفاده شوند با این تفاوت که وقتی موس روی متن قرار میگیرد رنگ متن تیره تر میشود.

برای نمونه به مثال زیر توجه کنید :

[php]

<body>
<div class=”container”>
  <h2>Contextual Link Colors</h2>
  <p>Hover over the links.</p>
  <a href=”#” class=”text-muted”>Muted link.</a>
  <a href=”#” class=”text-primary”>Primary link.</a>
  <a href=”#” class=”text-success”>Success link.</a>
  <a href=”#” class=”text-info”>Info link.</a>
  <a href=”#” class=”text-warning”>Warning link.</a>
  <a href=”#” class=”text-danger”>Danger link.</a>
  <a href=”#” class=”text-secondary”>Secondary link.</a>
  <a href=”#” class=”text-dark”>Dark grey link.</a>
  <a href=”#” class=”text-body”>Body/black link.</a>
  <a href=”#” class=”text-light”>Light grey link.</a>
</div>
</body>

[/php]

نتیجه را در این لینک ببینید.

درصد شفافیت :

همچنین با کلاس های متن .text-black-50 یا .text-white-50 درصد opacity را برای کلاس متن سیاه و سفید اضافه کنید.

مثال :

[php]

<body>
<div class=”container”>
  <h2>Opacity Text Colors</h2>
  <p>Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:</p>
  <p class=”text-black-50″>Black text with 50% opacity on white background</p>
  <p class=”text-white-50 bg-dark”>White text with 50% opacity on black background</p>
</div>
</body>

[/php]

نتیجه مثال را در این لینک ببینید.

رنگ پس زمینه :

به همین ترتیب ، میتوانید از کلاس های استاندارد رنگ پس زمینه برای تنظیم پس زمینه عناصر مختلف استفاده کنید.

کلاس های رنگ پس زمینه عبارتند از :

bg-primary , bg-success , bg-info , bg-warning , bg-danger , bg-secendary , bg-dark , bg-light

توجه داشته باشید که رنگ های پس زمینه رنگ متن را تعیین نمیکند بنابراین در بعضی موارد میخواهید از آنها در به همراه یک کلاس text استفاده کنید.

مثال :

[php]

<body>
<div class=”container”>
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide “meaning through colors”.</p>
  <p>Note that you can also add a .text-* class if you want a different text color:</p>
  <p class=”bg-primary text-white”>This text is important.</p>
  <p class=”bg-success text-white”>This text indicates success.</p>
  <p class=”bg-info text-white”>This text represents some information.</p>
  <p class=”bg-warning text-white”>This text represents a warning.</p>
  <p class=”bg-danger text-white”>This text represents danger.</p>
  <p class=”bg-secondary text-white”>Secondary background color.</p>
  <p class=”bg-dark text-white”>Dark grey background color.</p>
  <p class=”bg-light text-dark”>Light grey background color.</p>
</div>
</body>

[/php]

نتیجه را در این لینک ببینید.

دکمه ها :

نکته :

دکمه ها را نیز به همان روش میتوان در بوت استرپ رنگی کرد کلاس متنی را در دکمه استفاده کنید تا رنگ مورد نظر برای دکمه اعمال شود.

کلاس های دکمه ی زیر در بوت استرپ نسخه ۴ موجود است.

  • btn-primary
  • btn-secondary
  • btn-success
  • btn-info
  • btn-light
  • btn-dark
  • btn-danger
  • btn-warning

با این کلاس ها میتوانید انواع دکمه های رنگی در بوت استرپ را داشته باشید تنها کافی است کلاس موردنظر را به دکمه خود بیافزایید.

 

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

21+ محصولات
374+ سفارشات تکمیل شده
1860+ کاربران
396+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت