درس اول: کالبدشکافی کامل Bootstrap 5
درس اول: کالبدشکافی کامل Bootstrap 5
در این بخش از مقدماتیترین تعاریف تا پیشرفتهترین متدهای چیدمان در سیستم ۱۲ ستونی را به صورت گامبهگام و با جزئیات فنی بررسی خواهیم کرد.
۱. مقدمه: چرا دنیای وب به بوتاسترپ پناه برد؟
قبل از ظهور بوتاسترپ در سال ۲۰۱۱ توسط تیم توییتر، طراحی وب یک فرآیند بسیار زمانبر بود. هر طراح باید برای حل مشکل نمایش سایت در مرورگرهای مختلف (مثل اینترنت اکسپلورر یا کروم) کدهای اختصاصی مینوشت.
بوتاسترپ یک استاندارد واحد ایجاد کرد. این فریمورک بر پایه زبانهای CSS، HTML و JS بنا شده است. نسخه ۵ که در حال حاضر آموزش میدهیم، وابستگی خود به کتابخانههای قدیمی مثل jQuery را قطع کرده و از قدرت خالص CSS مدرن (مثل Flexbox) استفاده میکند.
- عدم نیاز به CSSنویسی: هدف ما این است که ۹۰٪ ظاهر سایت را فقط با اضافه کردن کلماتی به نام “Class” در HTML بسازیم.
- تطبیقپذیری مطلق: یاد میگیرید چطور سایتی بسازید که در ساعتهای هوشمند، موبایل، تبلت و نمایشگرهای 4K بدون تغییر کد، عالی دیده شود.
۲. درک عمیق ساختار دربرگیرنده (Containers)
اولین گام در هر پروژه بوتاسترپی، انتخاب “ظرف” یا همان Container است. کانتینرها وظیفه دارند عرض محتوا را محدود کرده و آن را در مرکز صفحه قرار دهند.
| نوع کانتینر | رفتار در نمایشگر | مورد استفاده |
|---|---|---|
.container | عرض ثابت در هر نقطه شکست (Breakpoint) | سایتهای شرکتی و وبلاگی کلاسیک |
.container-fluid | ۱۰۰٪ عرض صفحه در تمام حالتها | داشبوردهای مدیریتی و نقشهها |
۳. مهندسی چیدمان: جادوی عدد ۱۲
چرا ۱۲؟ چون عدد ۱۲ به اعدادی مثل ۲، ۳، ۴ و ۶ بخشپذیر است. این یعنی شما میتوانید صفحه را به ۲، ۳، ۴ یا ۶ ستون مساوی تقسیم کنید.
اجزای سازنده ردیف و ستون:
- Row: از کلاس
.rowبرای ایجاد یک سطر استفاده میشود. ردیفها دارای Margin منفی هستند تا فاصلههای اضافی (Gutter) ستونها را تراز کنند. - Col: محتوا را در خود جای میدهد. ستونها دارای Padding هستند تا محتوا به هم نچسبد.
تحلیل یک مثال پیچیده و کاربردی:
<div class=“row”>
<!– ستونی که ۸ واحد میگیرد (محتوای اصلی) –>
<div class=“col-md-8”>
در تبلت و دسکتاپ عریض است، در موبایل تمامعرض میشود.
</div>
<!– ستونی که ۴ واحد میگیرد (سایدبار) –>
<div class=“col-md-4”>
سایدبار کناری.
</div>
</div>
</div>
۴. مدیریت ابعاد: Breakpoints
بوتاسترپ ۵ از ۶ نقطه شکست برای واکنشگرایی استفاده میکند. این نقاط بر اساس عرض پیکسل نمایشگر تعیین میشوند:
| کلاس | محدوده (پیکسل) | نامک |
|---|---|---|
| Extra Small | < 576px | col- |
| Small | ≥ 576px | col-sm- |
| Medium | ≥ 768px | col-md- |
| Large | ≥ 992px | col-lg- |
۵. کلاسهای ترکیبی؛ قدرت واقعی بوتاسترپ
شما میتوانید همزمان چندین کلاس را به یک ستون بدهید تا در هر سایز، رفتار متفاوتی داشته باشد. این یعنی یک ستون میتواند در موبایل تمامعرض باشد، در تبلت نصف صفحه و در لپتاپ یکسوم صفحه را بگیرد:
<div class="col-12 col-md-6 col-lg-4">- col-12: در موبایل (کوچکترین حالت) ۱۲ ستون یعنی ۱۰۰٪ عرض را میگیرد.
- col-md-6: در تبلت (سایز متوسط) ۶ ستون یعنی ۵۰٪ عرض را میگیرد.
- col-lg-4: در دسکتاپ (سایز بزرگ) ۴ ستون یعنی ۳۳٪ عرض را میگیرد.
🔬 کارگاه عملی درس اول: طراحی قالب خبری
فرض کنید میخواهید لایه اصلی یک سایت خبری را طراحی کنید. طبق دستورالعمل زیر کد آن را در ذهن خود (یا ویرایشگر کد) بسازید:
- یک Container برای کل صفحه ایجاد کنید.
- یک Row برای بخش هدر بسازید که کل ۱۲ ستون را بگیرد.
- یک Row جدید برای بخش محتوا بسازید که شامل:
- یک ستون col-md-9 برای نمایش اخبار اصلی.
- یک ستون col-md-3 برای نمایش تبلیغات کناری.
- یک Row نهایی برای فوتر که دوباره ۱۲ ستون باشد.