جلسه ۰۵ : رنگ ها در Bootstrap 4

• جزئیات
• نوع محتواآموزش تصویری

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند. در جلسات قبل ، پس از بررسی مباحث مقدماتی این دوره ، از جمله موضوعات چگونگی تهیه کردن Bootstrap 4 ، بررسی و توضیح سیستم شبکه بندی Bootstrap 4 ، سپس بیشتر وارد کد های مختص سیستم Bootstrap 4 ، شده و به ارائه موضوع متن و تایپوگرافی در Bootstrap 4 ، پرداختیم. در ادامه دوره ، در این بخش ، قصد داریم به مبحث رنگ ها در Bootstrap 4 و چگونگی تغییر رنگ متن در  Bootstrap 4 و رنگ های پس زمینه ی Bootstrap 4 ، بپردازیم.

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

رنگ ها در Bootstrap 4

رنگ ها در Bootstrap 4

در این آموزش بحث رنگ بندی  Bootstrap 4 ، از جمله رنگ متن در Bootstrap 4 و رنگ های پس زمینه ی Bootstrap 4 در عناصر و ویژگی های مختلف آن ها ، نظیر رنگ متن ، رنگ زمینه و … بررسی خواهد شد.

رنگ متن در  Bootstrap 4

سیستم Bootstrap 4  ، خود دارای برخی از کلاس های متنی است که می تواند برای ویژگی “معنی دادن از طریق رنگ” استفاده شود.

کلاس های رنگ متن در Bootstrap 4 :

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

مثال:

کلاس های رنگ متن

کلاسهای لینک

 

شما همچنین می توانید ، با تنظیم کردن ، خصوصیت opacity با مقدار ۵۰% ، برای متن های سیاه و سفید از آن استفاده کنید.

مثال:

پس زمینه مشکی و سفید

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

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

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark و .bg-light.

نکته: توجه داشته باشید که رنگ پس زمینه رنگ متن را تنظیم نمی کند، بنابراین در بعضی موارد که می خواهید، رنگ متن را نیز مشخص کنید. بایدیک کلاس text-class نیز ، استفاده کنید.

مثال:

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

کلام آخر

خب در این بخش از آموزشها، به مبحث کاربردی و مهم رنگ ها در Bootstrap 4 ، پرداختیم. همچنین شما را با رنگ های پس زمینه ی Bootstrap 4 نیز آشنا کردیم. امیدواریم که این مطلب آموزشی نیز ، مورد پسند و استفاده کاربران عزیز ، قرار گرفته باشد.