سلام به همه!
توی این درس، قراره با چیزی به اسم بوت‌استرپ آشنا بشیم.
خب، اصلاً بوت‌استرپ چی هست؟
از طریق وب‌سایت رسمی‌اش می‌تونیم ببینیم که بوت‌استرپ یه ابزار هست که بهمون کمک می‌کنه خیلی سریع طراحی کنیم و وب‌سایت‌های واکنش‌گرا بسازیم.
یا به زبان ساده‌تر، بوت‌استرپ یه ابزاره که بهمون کمک می‌کنه صفحات وب بسازیم، حتی اگه نوشتن کدهای CSS یا JavaScript نباشیم.

برای مثال، یه نگاه کوچیک بندازیم به نتیجه نهایی چیزی که قراره توی این درس با هم بسازیم.
یه صفحه‌ی ساده‌ی وب داریم با یه نوار بنر در بالا و یه چیدمان دو ستونه.
توی ستون سمت چپ، اگه روی دکمه‌ی “Learn More” کلیک کنم، یه بخش مخفی باز می‌شه.
اگه دوباره کلیک کنم، اون بخش مخفی دوباره بسته می‌شه.
و توی ستون کناری، اگه روی دکمه‌ی “Contact Us” کلیک کنم، یه پنجره‌ی پاپ‌آپ یا مودال باز می‌شه که می‌تونم ببندمش.

حالا برگردیم به موضوع اصلی، یعنی بوت‌استرپ.
بوت‌استرپ قراره بهمون کمک کنه این صفحه‌ی HTML رو بسازیم بدون اینکه حتی یه خط کد CSS یا JavaScript بنویسیم.

پس به طور خلاصه، بوت‌استرپ چیه؟
یه مجموعه از کدهای آماده‌ی CSS و JavaScript هست.
ما فقط HTML می‌نویسیم با کلاس‌هایی که بوت‌استرپ از قبل تعریف کرده.
و بعد HTML ما از اون CSS و JavaScript استفاده می‌کنه، طوری که فقط با نوشتن یه مقدار HTML، صفحه‌ی وبمون ظاهر و طراحی و چیدمان منظم و واکنش‌گرا پیدا می‌کنه.

مثلاً اگه پنجره‌ی مرورگرم رو کوچیک کنم، چیدمان دو ستونه تبدیل می‌شه به یه ستون، که برای گوشی‌های هوشمند عالیه.
بوت‌استرپ خودش همه‌ی media queryها، CSSها، JavaScriptها رو هندل می‌کنه.
ما فقط یه مقدار HTML می‌نویسیم که کلاس‌های بوت‌استرپ رو بشناسه.

حالا قبل از اینکه بریم جلوتر و با هم شروع کنیم به ساختن، شاید از خودت بپرسی:
«اگه می‌تونیم یه صفحه‌ی وب بسازیم بدون نوشتن CSS، پس اصلاً چرا باید CSS یاد بگیریم؟»

خب، جوابش بستگی به هدفت داره.
اگه هدفت فقط ساختن یه وب‌سایت ساده‌ست، پس حتماً از بوت‌استرپ استفاده کن.
اما اگه می‌خوای وارد دنیای توسعه‌ی وب یا طراحی وب یا طراحی گرافیک یا USER EXPERIENCE بشی.
و اگه این مسیر شغلی رو می‌خوای دنبال کنی، نمی‌تونی کاملاً وابسته به بوت‌استرپ باشی، چون پروژه‌های واقعی و مشتری‌های واقعی معمولاً طراحی‌های خیلی خاص و استایل‌های دقیق و برندینگ اختصاصی می‌خوان، و بوت‌استرپ نمی‌تونه کمکت کنه.

برای پروژه‌های سفارشی که مشتری پول خوبی پرداخت می‌کنه، باید بتونی CSS کاملاً اختصاصی بنویسی.

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

یه نکته‌ی آخر قبل از اینکه وارد عمل بشیم:
بوت‌استرپ فقط یه کتابخونه‌ی ناشناخته نیست که من شخصاً دوستش داشته باشم.
بلکه بوت‌استرپ فوق‌العاده محبوبه، شاید حتی زیادی محبوب!
انقدر درصد زیادی از وب از بوت‌استرپ استفاده می‌کنه که خیلی از سایت‌ها شبیه هم شدن.
و این می‌تونه یکی از نقاط ضعف بوت‌استرپ باشه.
اما خیالت راحت باشه، بوت‌استرپ یه استاندارد صنعتی هست و میلیون‌ها نفر بهش اعتماد دارن.

خب، بزن بریم!
بیایید این صفحه رو با هم بسازیم با استفاده از بوت‌استرپ.

برای شروع، یه فایل HTML خالی نیاز داریم که توش کار کنیم.
تشویقت می‌کنم همین الان با من همراه بشی توی VS Code.
یه فایل جدید بساز هرجایی از کامپیوترت که راحت پیداش کنی، مثلاً روی دسکتاپ یا توی یه پوشه یا توی Documents.
من یه فایل جدید ساختم به اسم index.html که کاملاً خالیه.

این بخش هنوز ربطی به بوت‌استرپ نداره.
فقط یه ترفند جالب توی Visual Studio Code هست.
اگه توی فایلی هستی که پسوندش HTML هست، فقط کافیه تایپ کنی doc و بعد کلید tab رو بزنی.
این کار یه اسکلت اولیه برای صفحه‌ی HTML بهمون می‌ده.

حالا سوال اینه: چطور بوت‌استرپ رو به این صفحه‌ی HTML خالی اضافه کنیم؟
بذار نشونت بدم.

برگردیم به مرورگر.
در زمان ضبط این ویدیو، این وب‌سایت رسمی بوت‌استرپ هست: getbootstrap.com
و می‌بینی که نسخه‌ی فعلی v5.3.8 هست.
از نسخه‌ی ۵ به بعد، بوت‌استرپ دیگه از jQuery استفاده نمی‌کنه، که رویکرد مدرن‌تریه.

فقط باید اسکرول کنی پایین و دنبال بخشی بگردی که نوشته Bootstrap CDN
اونجا یه خط کد بهمون می‌ده که می‌تونیم کپی کنیم تا CSS بوت‌استرپ رو داشته باشیم.

فقط اون خطی که تگ link داره با rel برابر stylesheet رو انتخاب کن.
کل خط رو انتخاب کن تا آخر و بعد کپی‌اش کن توی کلیپ‌بوردت.

حالا برگردیم به VS Code توی سند خالی‌مون، درست زیر تگ title
همون‌جا این خط رو paste می‌کنم.

و حالا که CSS بوت‌استرپ رو داریم، بیایید شروع کنیم به ساختن صفحه‌مون.

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

بیایید یه div داخل تگ body بسازیم.
توی VS Code فقط تایپ کن div و بعد کلید tab رو بزن.
روی این تگ div باز، یه کلاس تعریف کنیم: class=”bg-dark”

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

حالا داخل این div، یه heading سطح یک بذاریم و بنویسیم “Our Amazing Website”
بیایید فایل رو ذخیره کنیم و ببینیم چی ساختیم.

توی این تب، فایل index.html رو باز کردم که داریم روش کار می‌کنیم، و اگه رفرش کنم،
می‌بینیم یه ناحیه با پس‌زمینه‌ی تیره داریم،
اما متنمون مشکیه روی پس‌زمینه‌ی خیلی تیره، پس خوندنش سخت شده.

خب، بیایید همین کار رو روی همون div انجام بدیم.
بیایید یه کلاس دیگه هم بهش اضافه کنیم به اسم text-light.
فایل رو ذخیره کن، رفرش کن.
عالیه!

الان شاید از خودت بپرسی: «از کجا این اسم‌ کلاس‌ها رو می‌دونم؟»
خب، توی این درس، من فقط اسم کلاس‌ها رو می‌گم تا سریع پیش بریم.
اما قبل از اینکه ادامه بدیم، می‌خوام بهت نشون بدم که خودت چطور می‌تونی این اسم‌ها رو پیدا کنی.

از وب‌سایت بوت‌استرپ، اگه روی گزینه‌ی “Docs” یا “Documentation” در بالای صفحه کلیک کنی،
توی نوار کناری بخش‌هایی مثل Layout، Content، Components، Utilities رو می‌بینی.
و چیزی که الان استفاده می‌کنم، مربوط به بخش “Color Utilities” باشه.

بله، می‌بینی یه زیرمجموعه به اسم Colors هست و اینجا می‌تونی همه‌ی اسم‌های مختلف رو ببینی مثل:
text-primary، text-secondary، text-success، text-danger، text-warning، و اینم text-light.
اگه بیشتر اسکرول کنی، کلاس‌های رنگ پس‌زمینه رو هم می‌بینی.
ما از bg-dark استفاده کردیم، ولی می‌تونی از هرکدوم از این‌ها استفاده کنی.

برگردیم به کاری که داریم انجام می‌دیم.
فکر می‌کنم بهتر باشه اگه متنمون به جای اینکه بچسبه به لبه‌ی افقی صفحه، یه مقدار وسط‌چین باشه.

پس توی کد، داخل همین div که رنگ پس‌زمینه رو تعیین می‌کنه،
می‌خوام محتوای داخلش رو داخل یه div دیگه به اسم container قرار بدم.
توی VS Code فقط تایپ کن div و قبل از اینکه کلید tab رو بزنی، یه نقطه بذار و بنویس container.
اگه tab بزنی، خودش تبدیل می‌شه به یه div با کلاس container.

حالا heading سطح یکمون رو منتقل کنیم داخل این div.
اگه ذخیره کنیم و رفرش کنیم، عالیه!
متنمون حالا وسط صفحه قرار گرفته.

مرحله‌ی بعدی، بیایید یه مقدار padding عمودی به این div با پس‌زمینه‌ی تیره اضافه کنیم،
تا یه مقدار فاصله‌ی عمودی اطرافش ایجاد بشه.
پس به این div کلاس py-5 رو اضافه می‌کنیم.

p یعنی padding، y یعنی محور عمودی (بالا و پایین).
اگه بخوای چپ و راست باشه، باید از x استفاده کنی.
اگه بخوای از هر چهار جهت padding داشته باشی، می‌تونی بگی p-5.
ولی ما فقط بالا و پایین رو می‌خوایم، پس py-5.
ذخیره کن، رفرش کن.
عالیه!

بیایید یه مقدار متنمون رو شخصی‌سازی کنیم.
روی تگ h1 یه کلاس display-2 اضافه کنیم تا استایلش متفاوت بشه.

بیایید یه زیرعنوان هم اضافه کنیم.
درست زیر h1 یه پاراگراف بسازیم با کلاس lead.
بنویسیم:
«Thanks for visiting our super cool and wonderful website !»
عالیه!
همه چیز داره شکل می‌گیره.

یادت باشه، این همون صفحه نهایی‌ایه که قراره با هم بسازیم.
تا اینجا، نوار بنر بالایی رو ساختیم.

مرحله‌ی بعدی، بیایید روی بخش دو ستونه تمرکز کنیم.
زیر این div کلی با پس‌زمینه‌ی تیره، یه div جدید با کلاس container بسازیم.
این کار رو می‌کنیم تا بخش دو ستونه‌مون تمام عرض صفحه رو نگیره و وسط‌چین باشه.
پس تایپ کن div.container و tab بزن.

حالا برای ساختن چیدمان ستونی توی بوت‌استرپ، اول باید یه row بسازیم.
پس تایپ کن div.row.

داخل row می‌تونیم ستون‌هایی داشته باشیم.
یه ستون بسازیم: div.col
داخل این ستون اول، یه مقدار متن تستی بذاریم.
تایپ کن p و بعد lorem و tab بزن.

حالا این ستون رو کپی کنیم تا یه ستون دوم هم داشته باشیم.
کپی کن، paste کن.
الان یه row داریم با دو تا ستون.
ذخیره کن، رفرش کن.
عالیه!

اما اگه نخوایم عرض دو ستون برابر باشه چی؟
اگه بخوایم یکی دو سوم عرض رو بگیره و اون یکی یک سوم؟
بوت‌استرپ از سیستم شبکه‌ی ۱۲ ستونه استفاده می‌کنه
دو سوم می‌شه ۸ از ۱۲، و یک سوم می‌شه ۴ از ۱۲.

پس توی کد، روی ستون اول به جای col بنویس col-8
و روی ستون دوم بنویس col-4.
ذخیره کن، رفرش کن.
عالیه!

اما اگه پنجره‌ی مرورگر رو خیلی باریک کنیم، مثل گوشی،
می‌بینی که ستون‌ها به حالت تک‌ستونه تبدیل نمی‌شن.

برای حل این مشکل، به جای col-8 بنویس col-md-8
و برای اون یکی col-md-4.
یعنی این چیدمان فقط روی صفحه‌هایی با سایز متوسط یا بزرگ اعمال بشه.
میتونی از sm برای کوچک، lg برای بزرگ، xl برای خیلی بزرگ استفاده کنی.
ذخیره کن، رفرش کن.
حالا وقتی صفحه باریکه، ستون‌ها روی هم قرار می‌گیرن،
و وقتی صفحه بزرگ‌تره، چیدمان دو ستونه حفظ می‌شه.

بریم سراغ مرحله‌ی بعد.
بیایید یه عنوان به ستون اصلی اضافه کنیم و یه پاراگراف بزرگ‌تر.
توی ستون اول، بالای پاراگراف، یه h1 بذاریم با متن Welcome to our page».
زیرش یه پاراگراف دیگه با کلاس lead بذاریم.
توی تگ پاراگراف، تایپ کن lorem و tab بزن.
ذخیره کن، رفرش کن.
عالیه!

الان باید یه مقدار فاصله‌ی عمودی بین بنر بالا و بخش دو ستونه داشته باشیم.
و یه سایه‌ی خیلی ظریف زیر بنر تیره دیده می‌شه.

پس برگردیم به VS Code،
روی همون div که کلاس bg-dark داره،
یه کلاس shadow اضافه کنیم،
و یه کلاس دیگه برای margin پایین: mb-5
عدد ۱ تا ۵ نشون‌دهنده‌ی مقدار margin هست.
ذخیره کن، رفرش کن.
عالیه! سایه‌ی ظریف و فاصله‌ی مناسب اضافه شد.

حالا بریم سراغ ستون کناری.
می‌بینیم که متنش یه مقدار کوچیک‌تره.
برای این کار، می‌تونیم کلاس small رو اضافه کنیم.
می‌تونی به پاراگراف اضافه کنی یا به کل ستون.
اگه به کل ستون اضافه کنیم، همه‌ی متن‌ها کوچیک‌تر می‌شن.
ذخیره کن، رفرش کن.
تغییر ظریف ولی قابل مشاهده‌ست.

مرحله‌ی بعد، بیایید اون باکس هشدار زرد یا بژ رو اضافه کنیم.
توی ادیتور، اول ستون دوم، یه div بساز با کلاس alert.

کلاس alert استایل پایه رو می‌ده،
ولی باید یه کلاس رنگ هم بدیم.
مثلاً alert-primary آبیه، alert-success سبز، alert-danger قرمز.
برای زرد، alert-warning.
پس باید هر دو کلاس رو بدیم.

داخل این div بنویسیم:
«We recently updated our entire site. Check it out! »
ذخیره کن، رفرش کن.
عالیه!

خب، تا اینجا کافیه.
توی درس بعدی، می‌تونیم این دو تا دکمه‌ای که اینجا می‌بینیم رو اضافه کنیم:
دکمه‌ی آبی و دکمه‌ی سبز،
و همین‌طور بخش فوتر پایین صفحه رو هم اضافه کنیم.

و از همه مهم‌تر، می‌تونیم رفتار جاوااسکریپتی رو اضافه کنیم تا وقتی روی یکی از دکمه‌ها کلیک می‌کنی، واقعاً یه اتفاقی بیفته
این دکمه یه بخش مخفی رو باز و بسته می‌کنه،
و اون یکی دکمه یه مودال یا لایت‌باکس رو نمایش می‌ده.
پس همه‌ی این‌ها رو توی ویدیوی بعدی پوشش می‌دیم.

اما قبل از اینکه این ویدیو رو تموم کنیم،
می‌خوام یه نکته‌ی مهم رو یادآوری کنم:
اگه از خودت می‌پرسی چطور این اسم‌های جادویی کلاس‌ها رو می‌دونم،
خب، همیشه می‌تونی بری به وب‌سایت بوت‌استرپ،
روی بخش Documentation کلیک کنی،
و مثلاً اگه روی بخش Layout کلیک کنی،
صفحه‌ی Grid سیستم ستونی‌ای که استفاده کردیم رو توضیح می‌ده.

یا مثلاً توی بخش Components،
اگه روی Alerts کلیک کنی،
اون صفحه دقیقاً درباره‌ی باکس هشدار زردی که ساختیم صحبت می‌کنه،
و همین‌طور ادامه داره.

پس لازم نیست حتماً همه‌ی این کلاس‌های جادویی رو حفظ کنی.
همیشه می‌تونی توی مستندات بوت‌استرپ بگردی،
و می‌بینی که مستنداتش واقعاً عالیه.
دقیقاً HTML مورد نیاز برای رسیدن به نتیجه‌ی دلخواه رو نشون می‌ده.

خب، اینم از این ویدیو.
توی ویدیوی بعدی می‌بینمت،
جایی که قراره این چیدمان رو کامل کنیم. 🎯