سلام به همه!
توی این ویدیو قراره دقیقاً از جایی که دفعهی قبل متوقف شدیم ادامه بدیم.
صفحهای که داریم با هم روش کار میکنیم الان این شکلیه.
حالا بیایید دکمههایی رو اضافه کنیم که پایین صفحه قابل کلیک باشن.
اگه به نسخهی نهایی نگاه کنیم، باید یه دکمهی آبی توی ستون اصلی باشه و یه دکمهی سبز با ظاهر توخالی توی ستون کناری.
پس بیایید اینها رو به صفحهای که داریم میسازیم اضافه کنیم.
برگردیم به VS Code، دنبال اون row هستیم که دو تا ستون داره.
توی ستون اول، درست قبل از بسته شدن تگ div، یه عنصر a میسازیم.
برای href فعلاً یه مقدار موقتی مثل # میذاریم.
بعد از کوتیشنها، ولی هنوز داخل تگ باز، یه کلاس btn میدیم که مخفف دکمهست.
بعد یه کلاس دیگه برای رنگش اضافه میکنیم.
اگه بخوایم آبی باشه، میگیم btn-primary.
بین تگهای باز و بسته، متن دکمه رو مینویسیم: «Learn More».
ذخیره کن، برگرد به مرورگر، رفرش کن.
عالیه!
اگه از خودت میپرسی از کجا میدونستم باید از کلاس btn-primary استفاده کنم،
توی وبسایت بوتاسترپ، توی بخش Documentation، زیر قسمت Components، میتونی روی “Buttons” کلیک کنی.
اون صفحه همهی رنگهای مختلف دکمهها رو نشون میده.
اما اگه دقت کنی، توی نسخهی نهایی، دکمهی آبی یه مقدار بزرگتره.
برای تنظیم این، یه کلاس دیگه اضافه میکنیم: btn-lg که یعنی دکمهی بزرگ.
ذخیره کن، رفرش کن.
عالیه! حالا دکمه یه مقدار بزرگتر شده.
قبل از اینکه کاری کنیم دکمهها واقعاً کاری که ما میخواییم انجام بدن،
بیایید اول دکمهی سبز رو توی ستون کناری اضافه کنیم.
توی انتهای ستون دوم، این بار به جای عنصر a، یه عنصر button میسازیم.
تایپ کن button و tab بزن.
کلاس btn رو میدیم، و بعد یه کلاس دیگه: btn-outline-success.
کلمهی success رنگ سبز رو مشخص میکنه.
توی بوتاسترپ، primary یعنی آبی، danger یعنی قرمز، success یعنی سبز.
و outline باعث میشه دکمه پسزمینهی رنگی نداشته باشه و فقط یه حاشیه رنگی داشته باشه.
بین تگهای باز و بسته، متن دکمه رو مینویسیم: «Contact Us».
ذخیره کن، تست کن.
عالیه!
مرحلهی بعد، قبل از اینکه دکمهها واقعاً کاری انجام بدن،
بیایید یه بخش فوتر به صفحه اضافه کنیم.
اگه به نسخهی نهایی نگاه کنیم، یه متن پایین صفحه هست و یه خط باریک هم دیده میشه.
پس بیایید این فوتر رو بسازیم.
در پایینترین بخش HTML، درست قبل از بسته شدن تگ body،
یه عنصر footer میسازیم.
به تگ باز کلاس border-top میدیم.
داخل footer یه پاراگراف میسازیم با نماد کپیرایت و متن «2026 Our Site».
به این پاراگراف کلاسهای small و text-muted میدیم تا متنش خیلی برجسته نباشه و یه رنگ خاکستری ملایم داشته باشه.
ذخیره کن، رفرش کن.
نیاز به چند تا تنظیم داریم:
بیایید متن رو وسطچین کنیم، یه مقدار margin بالا به فوتر بدیم تا دکمهها خیلی بهش نچسبن،
و یه مقدار padding هم بدیم تا متن فوتر خیلی به خط بالا نچسبه.
پس علاوه بر border-top، کلاسهای my-5 (margin بالا و پایین) و py-4 (padding بالا و پایین) رو اضافه میکنیم.
و برای وسطچین کردن متن، به پاراگراف کلاس text-center میدیم.
ذخیره کن، تست کن.
عالیه! خیلی بهتر شد.
حالا بیایید برگردیم سراغ دکمهها و کاری کنیم که واقعاً عملی بشن.
برای این کار، باید از JavaScript بوتاسترپ استفاده کنیم.
یادت باشه، توی فایل HTML فقط CSS بوتاسترپ رو بارگذاری کردیم،
ولی هنوز JavaScript بوتاسترپ رو اضافه نکردیم.
پس بیایید همین الان اضافهاش کنیم.
برو به صفحهی اصلی وبسایت بوتاسترپ.
getbootstrap.com
اسکرول کن پایین، مثل دفعهی قبل که دنبال بخش CDN برای CSS گشتیم،
این بار بخش JavaScript رو پیدا کن.
روی دکمهی Copy کلیک کن تا کدش توی کلیپبوردت کپی بشه.
برگرد به VS Code،
در پایینترین بخش HTML، درست قبل از بسته شدن تگ body،
اون کد رو paste کن.
اگه یه کامنت همراهش هست، میتونی حذفش کنی.
ذخیره کن.
الان هنوز چیزی روی صفحه تغییر نکرده،
ولی حالا میتونیم از قابلیتهای JavaScript بوتاسترپ استفاده کنیم.
برای مثال، فرض کن یه مقدار محتوای اضافی داریم که اول مخفی باشه،
و فقط وقتی روی دکمهی آبی کلیک میکنی، ظاهر بشه.
بیایید اون محتوای اضافی رو اضافه کنیم.
توی ستون اول، درست زیر دکمهی Learn More، یه div بسازیم.
داخلش یه h3 بنویسیم: «Hidden Content».
و بعدش دو تا پاراگراف با متن تستی.
تایپ کن p و بعد lorem و tab بزن.
ذخیره کن.
الان محتوا اضافه شده، ولی ما میخوایم پیشفرض مخفی باشه.
پس به div کلاس collapse میدیم.
حالا محتوا مخفی شده.
برای اینکه دکمه بتونه این محتوا رو نمایش بده،
به div یه id میدیم، مثلاً bonus-content.
حالا روی دکمهی آبی، یه ویژگی data-toggle=”collapse” اضافه میکنیم،
و مقدار href رو برابر #bonus-content میذاریم.
یادت باشه # باید باشه تا به id اشاره کنه.
ذخیره کن، تست کن.
رفرش کن، روی Learn More کلیک کن.
عالیه!
فقط یه نکتهی ظاهری:
بین دکمه و محتوای مخفی یه مقدار فاصلهی عمودی بد نیست.
پس به div مخفی، علاوه بر collapse، کلاس mt-3 میدیم.
ذخیره کن، تست کن.
خیلی بهتر شد!
حالا بریم سراغ دکمهی Contact Us.
اگه به نسخهی نهایی نگاه کنیم، وقتی روی این دکمه کلیک میکنی، یه مودال یا لایتباکس ظاهر میشه.
برگردیم به نسخهی خودمون و ببینیم چطور این کار رو انجام بدیم.
این یه تمرین عالیه چون خود من هم HTML مودال رو حفظ نیستم!
پس باید با هم به مستندات بوتاسترپ مراجعه کنیم.
اما قبل از اون، بیایید مقدماتش رو بچینیم.
توی HTML، دکمهی سبز Contact Us رو پیدا کنیم…
خب، دنبال یه دکمه هستیم که کلاس btn-outline-success داشته باشه،
و بیایید به تگ بازش یه ویژگی data-toggle=”modal” بدیم.
همچنین میخوایم یه ویژگی دیگه بدیم: data-target=
و این یه سلکتور هست که اشاره میکنه به عنصری که میخوایم نمایش بدیم.
پس مثلاً میگیم #contact-us
و میتونی تصور کنی که یه div با id=”contact-us” داریم که محتوایی که میخوایم نمایش بدیم داخلشه.
حالا، فراتر از این دو ویژگی، من دقیق یادم نیست چطور باید مودال رو توی بوتاسترپ اضافه کنیم،
پس بیایید با هم بریم سراغ وبسایت بوتاسترپ.
روی “Docs” یا “Documentation” کلیک کنیم.
توی نوار کناری دنبال بخشی به اسم “Components” میگردیم.
روی “Components” کلیک کنیم، و بعد اگه اسکرول کنیم، چون به ترتیب حروف الفباست،
دنبال چیزی به اسم “Modal” میگردیم.
روی صفحهی مودال کلیک کنیم.
کاری که من معمولاً میکنم اینه که اسکرول میکنم تا یه مثال خوب پیدا کنم.
دارم اسکرول میکنم، اسکرول میکنم…
این یکی فقط مودال رو نشون میده ولی یه لینک قابل کلیک نیست که مودال رو باز کنه، پس ادامه میدم.
این همون چیزیه که دنبالش بودم: “Live Demo”
اگه روی این دکمه کلیک کنی، مودال باز میشه. عالیه!
درست زیر اون دمو، یه عالمه HTML میبینیم.
ما قبلاً دکمهای که کلیک میشه رو اضافه کردیم.
من دنبال HTML خود مودال هستم، پس انتخابش میکنم و ازت میخوام همین کار رو بکنی.
کل این HTML رو انتخاب کن، از درست زیر کامنت مودال تا انتهای HTML.
کپیاش کن توی کلیپبوردت.
برگردیم به VS Code، درست زیر دکمهای که با data-toggle و data-target ساختیم،
اون HTML رو paste کن.
اگه اسکرول کنیم بالا به اون HTML که paste کردیم،
میبینیم id=”exampleModal” داره.
پس فقط این id رو تغییر بدیم به contact-us چون دکمهمون دنبال همین id میگرده.
پس id=”contact-us”
ذخیره کن، تستش کنیم.
رفرش کن، روی دکمهی سبز “Contact Us” کلیک کن.
عالیه!
الان فقط سه تا نقطه برای محتوا میبینیم چون واقعاً همینو نوشتیم.
میتونی اون رو به “Hello World” تغییر بدی.
و اگه نمیخوای اون دکمهی آبی “Save Changes” رو داشته باشی،
میتونی فقط دکمهی “Close” رو نگه داری.
پس اون دکمهی آبی رو حذف کن.
ذخیره کن، رفرش کن، دوباره تست کن.
عالیه! حالا میبینیم “Hello World”
و میتونی با کلیک روی X یا دکمهی Close مودال رو ببندی.
خب، این درس رو همینجا تموم میکنیم.
ولی میخوام بهت بگم که ما فقط سطحی از امکانات بوتاسترپ رو لمس کردیم.
اگه توی مستنداتش بگردی، کلی قابلیت جذاب پیدا میکنی.
مثلاً توی بخش Components دنبال چیزی به اسم Carousel بگرد.
میتونی باهاش یه اسلایدشو بسازی.
اگه اسکرول کنی توی صفحهی Carousel، یه مثال میبینی:
اسلاید اول، دوم، سوم…
اگه بیشتر اسکرول کنی، میتونی تنظیمش کنی که نقطههای ناوبری یا پیشرفت داشته باشه.
اگه باز هم اسکرول کنی، میبینی چطور میتونی برای هر اسلاید یه کپشن بذاری علاوه بر تصویر.
و همینطور ادامه داره.
همچنین توی Components، اگه روی Collapse کلیک کنی و یه مقدار پایین بری،
یه عالمه دموهای مختلف هست.
یکی از جالبترینها Accordion هست.
میبینی سه بخش مختلف داره، و اگه روی بخش دوم کلیک کنی، اون باز میشه ولی بخش اول بسته میشه.
بوتاسترپ پر از این قابلیتهای متنوعه.
تشویقت میکنم که بری سراغ مستنداتش، بگردی، تست کنی، و تجربه کسب کنی.
وقتی یه ویژگی رو پیدا کردی که دوستش داری، درست زیر دمو، همیشه HTML دقیقش رو نشون میده،
که میتونی کپیاش کنی و استفاده کنی.
در نگاه کلی، با دانشی که از HTML داری، حالا میتونی تحقیق کنی و کلی چیز مختلف بسازی با بوتاسترپ.
بوتاسترپ یه منبع عالیه که خوبه باهاش آشنا باشی.
یه ابزار خوبه برای جعبهابزارمون، و اگه بهش علاقه داری، تشویقت میکنم که تمرین کنی و تجربه کسب کنی.
اینم از بوتاسترپ و این درس.
بیایید حالا مسیرمون رو عوض کنیم و من توی بخش بعدی میبینمت. 🎬