آموزش Bootstrap قسمت سوم: رنگها
آنچه در این مقاله میخوانید
Toggleسلام به کاربران وبسایت تاتوره. با سومین قسمت از آموزش Bootstrap در خدمت شما هستیم.
در این قسمت و چند قسمت آینده قراره باهم در مورد کلاسهای پایه و ساده تر بوت استرپ صحبت کنیم.
اما در این قسمت خاص قراره در مورد رنگها در Bootstrap صحبت کنیم. در پایان این قسمت شما قادر خواهید بود به المنتهای (Elements) خود رنگی که میخواین رو بدین.
قبل از هر چیزی
در این آموزش قراره خیلی با وبسایت رسمی بوت استرپ کار کنیم. چون در آینده قراره تغییراتی در بوت استرپ ایجاد بشه. بنابراین از همین حالا تمرین کنید با خوندن داکیومنتها همه چی رو به طور کامل یاد بگیرید و لازم نباشه دوره جدایی برای ویژگیهای جدید ببیند. هرچند با اضافه شدن یا تغییر ویژگیهای بوت استرپ شما قادر خواهید بود در سایت تاتوره قسمت آموزش Bootstrap این تغییرات رو مشاهده کنید.
بیاید شروع کنیم
ابتدا
وارد وبسایت بوت استرپ میشیم. در هدر روی Documentation کلیک کنید. در این صفحه، در سایدبار سمت چپ Utilities رو انتخاب کنید. وارد صفحه دیگری میشید که یکی از ویژگیها خواهد بود. حالا در سایدبار سمت چپ منوی ویژگیها (Utilities) باز شده و شما میتونید تمام ویژگیهایی که بوت استرپ به المنت های شما میده رو مشاهده کنید. روی Colors (رنگها) کلیک کنید تا وارد صفحه مربوطه بشید. چیزی شبیه به تصویر زیر. اگر نتونستید روی دکمه زیر کلیک کنید تا وارد این صفحه بشید.
ورود به صفحه Colors در وب سایت Bootstrap
اگر دقت کنید
کلاسهایی رو در همون ابتدا میبینید. این کلاسها برای رنگ دادن به متن استفاده میشن. (من نقطه اولشون رو پاک کردم چون اگر بخواید در اچ تی ام ال این کلاس ها رو بنویسید نباید نقطه ای در اسم کلاس وجود داشته باشه و فقط وقتی که در سی اس اس داریم کلاسی رو تعریف میکنیم در ابتدای نام کلاس نقطهای میذاریم تا به مرورگر بفهمونیم این یک کلاسه و المنت نیست – اینم کمی اطلاعات راجب سی س اس اس)
- text-primary
- text-secondary
- text-success
- text-danger
- text-warning
- text-info
- text-light
- text-dark
- text-body
- text-muted
- text-white
در موارد بالا رنگ ها رو دقیقا طبق بوت استرپ تنظیم کردم. برای مواردی که رنگ متن سفید بود پس زمینه رو به مشکی تغییر دادم
کمی بهتر
مشاهده میکنید که این کلاسها تمامی با text شروع میشن. همانطور که میشه حدس زد همشون برای رنگ دادن به متن درون المنت بکار میرن. بنابراین قسمت ابتدایی این کلاس یعنی text به معنای اینه که قراره برای متن های ما یه اتفاقی بیفته. قسمت دوم که بعد از خط تیره اومدهتغییر رنگ رو انجام میده.
برای رنگ ها
- primary برای رنگ آبی پررنگ
- seconday برای خااکستری
- Success برای سبز
- Danger برای قرمز
- Warning برای نارنجی
- Info برای آبی کم رنگ
- Light و White برای سفید
- Dark و body برای مشکی
حتما حتما
موارد بالا رو به خاطر بسپارید چون این موارد فقط برای text نیستن و هر کلاس دیگه ای که به رنگ مربوط میشه این قسمت ها رو درون خودشون دارن.
دقت کردین؟
که هیچ کدوم از این کلاسهایی که نام بردم اسم رنگ رو ندارن! (البته به جز white) خب این کار هم دلیل داره. دلیلش هم اینه که شما وقتی یک پروژه بزرگ مثل طراحی سایت تاتوره رو انجام میدید قرار نیست از این رنگها برای همه چی استفاده کنید. این رنگ ها فقط قراره نشون دهنده اخطار یا انجام کاری به درستی باشن.
برای مثال
فرض کنید آموزشی رو به سبد خریدتون اضافه کردید. حالا پشیمون شدید و میخواید از سبد خریدتون حذفش کنید. وقتی دکمه حذف رو میزنید سیستم به شما اخطار میده که “آیا واقعا میخواید این مورد رو حذف کنید” در اینجا متن ما کلاس باید text-danger رو بگیره که نشون دهنده اخطار سیستم به کاربر هست یا همون danger یا وقتی محصولی رو خریداری کرید یا اصلا وارد سایتی شدید، سیستم به شما پیغام میده که شما با موفقیت محصول رو خریداری کردید یا با موفقیت وارد سایت شدید. در این موارد شما میتونید از کلاس text-success استفاده کنید.
بنابراین
شما نباید تمام رنگ هایی رو که نیاز دارید از بوت استرپ بگیرید. بلکه باید در کنارش کلاس های خاص خودتون رو بنویسید اما در مواردی مثل موارد بالا این کلاسها خیلی کمک میکنه.
بیاید
با هم این کلاسها رو امتحان کنیم.
اول از همه از شما میخوام که یک فایل جدید بسازید و اون رو colors.html بنامید. در این فایل ابتدا کد starter که در قسمت قبل قرار دادم رو پیست کنید. تگ h1 موجود در body رو حذف کنید و بعد از اون یه تگ h1 دیگه بنویسید! که متن داخلش “سلام” باشه. شما میتونید این متن رو به صورت انگلیسی هم بنویسید تا متوجه تغییر فونت در این فایل بشید ولی برای نوشتههای فارسی قرار نیست تغییری مشاهده کنید.
حالا به تگ h1 کلاس text-primary رو اضافه کنید و فایل اچ تی ام ال رو در مرورگر باز کنید.
میتونید کد زیر رو کپی و سپس در فایلتون قرار بدید.
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>colors</title> </head> <body> <h1 class="text-primary" >سلام!</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
وقتی فایل رو در مرورگر باز میکنید باید چیزی مثل تصویر زیر حاصل شده باشه.
بعد از این ازتون میخوام که تگ h1 رو کپی کنید و چندبار در زیر همون تگ پیست کنید. بعد از اول کلاس های دیگه رو بهش بدید. مثل کد زیر. برای کوتاه شدن این مطلب فقط کد های درون body رو قرار دادم.
<h1 class="text-primary" >سلام!</h1> <h1 class="text-secondary" >سلام!</h1> <h1 class="text-success" >سلام!</h1> <h1 class="text-warning" >سلام!</h1> <h1 class="text-info" >سلام!</h1> <h1 class="text-danger" >سلام!</h1>
بعد از سیو کردن فایل رو در مرورگر باز کنید یا اگر از قبل فایل رو بازکردید، مرورگر رو ریفرش کنید.
نتیجه باید به صورت شکل زیر شده باشه.
مشاهده میکنید که خیلی راحت و بدون کوچکترین css نویسی تمام متنهای ما رنگی رو که میخواستیم گرفتن. اینکار رو برای لینک، div، یا هر المنت دیگهای که متنی درونش داره میشه استفاده کرد. فقط برای اینکه به شما نشون بدم یه لینک رو در زیر آوردم.
<a href="" class="text-danger">من یک لینک هستم</a>
نتیجه:
البته در این تصویر من با اشارهگر روی لینک رفتم تا خط زیر اون نمایان بشه. (به این کار hover کردن میگن)
مورد بعدی
اگر در همون صفحه بوت استرپ کمی پایین تر بیاید با Background color مواجه میشید. کلاسها به این صورته:
- bg-primary
- bg-secondary
- bg-success
- bg-danger
- bg-warning
- bg-info
- bg-light
- bg-dark
- bg-white
- bg-transparent
مشاهده میکنید که قسمت دوم همون رنگ هایی هستن که پیش تر گفتم. حالا فقط قسمت اول کلاس تغییر پیدا کرده
در اینجا قسمت اول bg مخفف background هست که یعنی این کلاسها رنگ پسزمینه رو تغییر میدن.
کلاس دیگهای میبینید که transparent در آخرش نوشته شده. این کلاس پس زمینه المنت ما رو بدون رنگ میکنه. یعنی هرچی در زیر المنت باشه نشون داده میشه. در اینجا هم چون پس زمینه سایت تاتوره سفید بود، ما هم سفید مشاهده میکنیم.
من میخوام دقیقا همون تگ های h1 رو کپی کنم و زیر لینک پیست کنم. حالا به هرکدومشون یکی از این کلاسها رو میدم. دقت کنید که رنگ پس زمینه رو با رنگ متن یکی یا مشابه نگیرید. چطوره همونطور که من نوشتم بنویسید؟
<h1 class="text-primary bg-warning" >سلام!</h1> <h1 class="text-secondary bg-danger" >سلام!</h1> <h1 class="text-success bg-info" >سلام!</h1> <h1 class="text-warning bg-primary" >سلام!</h1> <h1 class="text-info bg-dark" >سلام!</h1> <h1 class="text-danger bg-white" >سلام!</h1>
اگر کد بالا رو به کد قبلی اضافه کنید نتیجه چیزی مثل شکل زیر خواهد بود.
میبینید که آخرین مورد تغییری نکرد با اینکه کلاس بک گراند بهش اضافه کردیم.
باید دقت کنید
کلاسی که بهش اضافه کردیم bg-white بوده. یعنی گفتیم پسزمینه رو سفید کن. خب اینکارو انجام داد! از اول پس زمینه سفید بود حالا هم سفید شد! پس این موارد رو هم دقت کنید. هرچند ساده.
اینهمه گفتیم ولی هنور به خوبی کاربردش رو ندیدیم. اگر در سایدبار سایت بوت استرپ ابتدا components و سپس درون اون alerts رو انتخاب کنید میتونید چند مثال خیلی خوب ببینید. اگر این قسمت وجود نداشت میتونید از سرچ استفاده کنید چون بوت استرپ هنوز با خودش درگیره که خیلی چیزا component اند یا utilitie !! البته به غیر از همه اینا میتونید از لینک زیر هم استفاده کنید که البته بعد از ورود نسخه مورد نظرتون رو در هدر تغییر بدین.
ورورد به صفحه Alerts در وبسایت Bootstrap
خب این رنگها بودن. یکم کوتاه تر:
رنگ هر المنت یا متن یا پس زمینه با کلاس دهی به اون به صورت {something-{color تغییر پیده میکنه. شما باید جای something به بوت استرپ بگید که من با فلان ویژگی المنت خودم کار دارم. مثل text برای متن یا bg برای پسزمینه. و جای {color} هم باید یکی از موارد زیر رو قرار بدید:
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Muted
- White
اینها تمامی مورادی هستند که شما میتونید جای {color} بذارید و یادتون باشه قرار نیست اسم رنگ رو بنویسید و قراره نسبت به ویژگی هر المنت یکی از این اسم ها رو بذارید. مثلا اخطار سایت تاتوره مبنی بر اشتباه بودن رمز عبور.
برای این قسمت کافیه فکر میکنم دیگه همه چی رو راجب رنگ ها متوجه شدید. شما میتونید از لینک زیر فایل نهایی این قسمت رو دریافت کنید. (بازهم دکمه با بوت استرپ ساخته شده)
دانلود فایلهای مربوط به این قسمت
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.