در خدمت شما هستیم با آموزش 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 با رنگ سبز در کد زیر استفاده کرده ایم:
<p class="text-success">This text indicates success.</p>
رنگ های لینک ها
در بوت استرپ ۴ شما میتوانید به لینک ها نیز رنگ های مختلفی بدهید معمولا در حالت پیشفرض رنگ لینک ها آبی و وقتی روی آنها کلیک میشود که اصطلاحا میگوییم active به رنگ بنفش در می آیند که ظاهر زیبایی ندارند و در اکثر موارد طراح ها و مالکان سایت آن را تغییر میدهند برای تغییر رنگ لینک ها کافیست همان کلاس های رنگی متن را به لینک های خود بدهید و رنگ لینک های خود را به یکی از رنگ های بالا تغییر دهید.به عنوان مثال ما در کد زیر از رنگ قرمز و کلاس رنگی text-danger استفاده کرده ایم:
<a href="#" class="text-danger">Danger link.</a>
رنگ سیاه و سفید شفاف
این کلاس رنگی به بوت استرپ ۴ اضافه شده است دوستانی که با نرم افزار های طراحی مثل فتوشاپ کار کرده اند حتما با کلمه opacity که معادل فارسی آن میشود شفافیت آشنا هستند در بوت استرپ ۴ تنها ۲ کلاس برای شفافیت تعریف شده است و تنها مقدار شفافیت ۵۰% را میگیرد ما آنها را برای شما لیست میکنیم و توضیح میدهیم:
- text-black-50 : این کلاس که از نامش مشخص است رنگ مشکی را با شفافیت ۵۰% نمایش میدهد.
- text-white-50 :این کلاس رنگ سفید را با شفافیت ۵۰% نمایش میدهد.
رنگ پس زمینه (background)
اسم رنگ هایی که برای نوشته با کلاس text تعریف کردیم برای بکگراند هم موجود است اما لازم است به ابتدای آنها جای text مقدار bg را اضافه کنید یعنی به عنوان مثال به جای text-danger باید بنویسید bg-danger با این کار شما پشت نوشته خود بگکراندی با رنگ قرمز دارید. حال سوال انجاست که آیا این رنگ ها تنها پشت نوشته نمایش داده میشوند و برای موارد دیگر نمیشود از آنها استفاده کرد؟
مهم نیست شما از چه تگی استفاده میکنید تگ p یا div یا حتی span در هر صورت بکگراند آن ،رنگ مد نظر مارا میگیرد پس با این تفسیر میتوان گفت برای رنگ کردن داخل باکسها نیز میتوان از کلاس های رنگ پس زمینه استفاده کرد.
برای واضح تر شدن موضوع هر آنچه در این مقاله توضیح دادیم را در کد زیر برای شما قرار داده ایم:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <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> ------------------------------------------------------------------------------ <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> ------------------------------------------------------------------------------ <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> ------------------------------------------------------------------------------ <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> </html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه چهارم (typography)
آموزش Bootstrap 4 جلسه ششم (table)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:
همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)
آموزش Bootstrap 4 جلسه اول (معرفی)