نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه پنجم (color)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه پنجم (color)

آموزش Bootstrap 4 جلسه پنجم (color) از سری آموزش های تک قسمتی است.

 

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

در بوت استرپ ۳ نیز کلاس های رنگی را داشتیم در بوت استرپ ۴ همان کلاس های رنگی موجود هستند و چند کلاس رنگی جدید نیز اضافه شده اند. در اصل این کلاس ها استایل هایی هستند که در css برای راحتی کار ما تعریف شده اند و نیازی نیست که شما از استایل استفاده کنید کافی است این کلاس های رنگی را به نوشته ها و یا باکس های خود بدهید تا رنگ مد نظر را بگیرند. البته اگر نیاز به رنگ های بیشتر دارید حتما باید در css کد نویسی کنید چرا که تعداد رنگ های این کلاس ها محدود میباشد اما در کل نیاز های عمومی را رفع میکنند و تا این لحظه خود ما به رنگ بیشتری نیاز پیدا نکرده ایم.

 

رنگ نوشته ها

در بوت استرپ ۴ تعداد ۹ رنگ مختلف برای نوشته ها تهیه شده است. این کلاس های رنگی با هدف هایی مثل نشان دادن پیغام خطا یا نشان دادن پیغام موفقیت یا توضیحات خاص و موارد این چنینی ساخته شده اند. چرا که در حالت عادی نوشته ها با رنگ مشکی و سفید و یا خاکستری نوشته میشوند و تنها برای موارد خاص نیازمند رنگ های دیگر میشویم ما برای شما کلاس های رنگی را با توضیحاتشان لیست میکنیم:

  • text-muted : معمولا برای حالت های غیر فعال از این رنگ استفاده میشود و طوسی کمرنگ است.
  • text-primary :اگر مطلب مهمی دارید از این کلاس استفاده کنید (رنگ آبی)
  • text-success : موارد موفقیت آموزش مثل دکمه های خرید و پیغام عمل موفق (رنگ سبز)
  • text-info : برای توضیحات و اطلاعات از آن استفاده میشود (آبی تیره)
  • text-warning : برای اخطار ها و موارد امنیتی از آن استفاده میشود (رنگ نارنجی)
  • text-danger :برای پیام های خطر و خطا استفاده میشود رنگ آن قرمز است.
  • text-secondary :درباره متن های ثانویه در جلسه قبل صحبت کردیم (رنگ خاکستری)
  • text-white : اگر پس زمینه تیره ای دارید میتوانید با رنگ سفید روی آن بنویسید.
  • text-dark : رنگ مشکی اما با کمی شفافیت.
  • text-body : برای رنگ کلیت محتوای نوشته استفاده میشود (رنگ مشکی)
  • text-light : این کلاس تقریبا بین آبی کمرنگ و سفید است و روی بکگراند های تیره قابل دیدن است.

نحوه استفاده از رنگ های بالا به این صورت است که تنها کلاس آن را در تگی که میخواهید این رنگ را بگیرد قرار میدهید به عنوان مثال ما از کلاس success با رنگ سبز در کد زیر استفاده کرده ایم:

 

رنگ های لینک ها 

در بوت استرپ ۴ شما میتوانید به لینک ها نیز رنگ های مختلفی بدهید معمولا در حالت پیشفرض رنگ لینک ها آبی و وقتی روی آنها کلیک میشود که اصطلاحا میگوییم active به رنگ بنفش در می آیند که ظاهر زیبایی ندارند و در اکثر موارد طراح ها و مالکان سایت آن را تغییر میدهند برای تغییر رنگ لینک ها کافیست همان کلاس های رنگی متن را به لینک های خود بدهید و رنگ لینک های خود را به یکی از رنگ های بالا تغییر دهید.به عنوان مثال ما در کد زیر از رنگ قرمز و کلاس رنگی text-danger استفاده کرده ایم:

 

رنگ سیاه و سفید شفاف 

این کلاس رنگی به بوت استرپ ۴ اضافه شده است دوستانی که با نرم افزار های طراحی مثل فتوشاپ کار کرده اند حتما با کلمه opacity که معادل فارسی آن میشود شفافیت آشنا هستند در بوت استرپ ۴ تنها  ۲ کلاس برای شفافیت تعریف شده است و تنها مقدار شفافیت ۵۰% را میگیرد ما آنها را برای شما لیست میکنیم و توضیح میدهیم:

  • text-black-50 : این کلاس که از نامش مشخص است رنگ مشکی را با شفافیت ۵۰% نمایش میدهد.
  • text-white-50 :این کلاس رنگ سفید را با شفافیت ۵۰% نمایش میدهد.

 

رنگ پس زمینه (background)

اسم رنگ هایی که برای نوشته با کلاس text تعریف کردیم برای بکگراند هم موجود است اما لازم است به ابتدای آنها جای text مقدار bg را اضافه کنید یعنی به عنوان مثال به جای text-danger باید بنویسید bg-danger  با این کار شما پشت نوشته خود بگکراندی با رنگ قرمز دارید. حال سوال انجاست که آیا این رنگ ها تنها پشت نوشته نمایش داده میشوند و برای موارد دیگر نمیشود از آنها استفاده کرد؟
مهم نیست شما از چه تگی استفاده میکنید تگ p یا div یا حتی span در هر صورت بکگراند آن ،رنگ مد نظر مارا میگیرد پس با این تفسیر میتوان گفت برای رنگ کردن داخل باکسها نیز میتوان از کلاس های رنگ پس زمینه استفاده کرد.

 

برای واضح تر شدن موضوع هر آنچه در این مقاله توضیح دادیم را در کد زیر برای شما قرار داده ایم:

 

 

 

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

آموزش Bootstrap 4 جلسه چهارم (typography)

آموزش Bootstrap 4 جلسه ششم (table)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه پنجم (color): نوع فایل:mp4 حجم فایل:36.51 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

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

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

*

code

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