قسمت چهارم bootstrap :چگونه از انواع رنگ در بوت استرپ استفاده کنیم؟

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

شما میتوانید با مراجعه به دوره ی جامع بوت استرپ از سایر قسمت های اموزش استفاده کنید.

برای سهولت استفاده میتوانید بر روی لینک های زیر کلیک کنید تا به تیترمورد نظر در مقاله هدایت شوید:

• رنگهای متن
• رنگهای پس زمینه
• ویدیوی قسمت چهارم

رنگهای متن

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

رنگهای بوت استرپ به صورت ربرو تعریف میشوند : .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(رنگ پیش فرض بدنه به رنگ سیاه) و .text-light

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

  
رنگ های متنی
  
متن سایلنت شده.
  
متن های مهم.
  
متن های موفق.
  
متن های گزارش اطلاعات.
  
متن های گزارش دهنده هشدار.
  
متن های خطا.
  
رنگ ثانویه.
  
متن خاکستری تیره.
  
رنگ پیش فرض اغلب با زمینه مشکی.
  
متن خاکستری روشن (در پس زمینه سفید).
  
متن رنگ سفید (در پس زمینه سفید).

کلاس های متن همچنین میتوانند برای لینک ها استفاده شوند ، به این شرح که هنگام اشاره شدن با موس یا اصطلاحا هاور شدن به رنگ تیره تر نمایش داده میشوند ، برای درک این موضوع به مثال زیر توجه کنید:

  
رنگ لینک
  لینک سایلنت.
  لینک اولیه.
  لینک موفق.
  لینک اطلاعات.
  لینک هشدار.
  لینک خطر.
  لینک ثانویه.
  رنگ خاکستری تیره.
  لینک مشکی .
  خاکستری روشن.

شما همچنین این قابلیت را خواهید داشت تا شفافیت 50 درصد به رنگهای سیاه یا سفید را با کلاس های .text-black-50 یا .text-white-50 اضافه کنید. برای درک این موضوع به مثال زیر توجه کنید :

  
رنگ های شفاف
  
رنگ سیاه با 50 درصد شفافیف برای پس زمینه
  
رنگ سفید با 50 درصد شفافیت برای پس زمینه با پس زمینه مشکی

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

کلاس هایی که برای شناسایی رنگ پس زمینه استفاده میشوند بصورت ربرو هستند : .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

این نکته را به یاد داشته باشید که کلاس های رنگهای پس زمینه فقط برای پس زمینه خواهند بود و برای استفاده کردن کلاس های متنی حتما باید از کلاس .text-* استفاده کنید.

  
رنگ های پس زمینه
  
پس زمینه مهم.
  
پس زمینه موفق.
  
Tپس زمینه ی اطلاعات.
  
پس زمینه هشدار.
  
پس زمینه خطر.
  
پس زمینه ثانویه.
  
پس زمینه خاکستری تیره.
  
پس زمینه خاکستری روشن.

ویدیوی قسمت چهارم

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

همانطور که میدانید برای مطالعه بیشتر موارد میتوانید به سایت getbootstrap مراجعه کنید.

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

موفق و پیروز باشید.