container ها در بوت استرپ
هر صفحه وب دارای چندین لایه است. لایهبندیهای بوت استرپ برای تراز بندی عنصرها مورد استفاده قرار میگیرد. 7 نوع container در بوت استرپ وجود دارد که بسته به نیاز خود میتوانید از هرکدام از آنها استفاده کنید. container در نسخه جدید بوت استرپ واکنشگرا هستند. container های بوت استرپ دونوع هستند:
- container
- container-fluid
1.container
بلوک پیشفرض و دارای عرض ثابت متناسب با هر صفحه نمایش است. البته در صفحه نمایشهای کوچکتر از 576 پیکسل دارای عرض 100% است. این نوع container دارای 5 دسته دیگر نیز است که در ادامه مشاهده میکنید:
- container-sm
- container-md
- container-lg
- container-xl
- container-xxl
جدول زیر سایزبندی هرکدام از container ها را بر اساس پیکسل (px) نمایش میدهد:
| <576px (خیلی کوچک) | ≥576px (کوچک) | ≥768px (متوسط) | ≥992px (بزرگ) | ≥1200px (خیلی بزرگ) | ≥1400px (خیلی خیلی بزرگ) | |
|---|---|---|---|---|---|---|
| container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
2. container-fluid
زمانی که بخواهید محتوای شما از از 100 درصد عرض صفحه وب استفاده کند و به علاوه، درصورتی که محتوای شما از عرض صفحه وب تجاوز کرد، مرورگر وب به صورت خودکار عرض صفحه را تنظیم کند، از کلاس container-fluid استفاده میشود. استفاده از این کلاس باعث میشود تا محتوای شما به صورت درست نمایش داده شود. این نوع از container در تمامی دستگاهها با صفحه نمایشهای مختلف دارای عرض 100 درصدی است.
اضافه کردن container به صفحه وب
یک کلاس برای تگ div ایجاد کنید و کلاس container-fluid را به آن اضافه کنید. سایز بلوک به صورت 100 درصد تنظیم خواهد شد. تگ div را به صورت زیر ویرایش کنید.
<div class=”container-fluid”>
پیشنمایش به صورت زیر خواهد بود.
نکته: دقت کنید که چون پسزمینه صفحه وب سفید است ممکن است به صورت واقعی نتیجه را مشاهده نکنید.
همه درس ها به ترتیب
دستورات ضروری