ظرف‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

ظرف ها (به انگلیسی: Containers)

در بخش زیر آموختیم که بوت استرپ برای پوشش دادن محتوای سایت نیاز به یک ظرف دارد.[۱]

ظرف‌ها بمنظور قرار گرفتن محتوا در داخل آنها استفاده می‌شوند، و دو کلاس برای ظرف‌ها وجود دارد:

  1. کلاس .container یک ظرف واکنش گرای با عرض ثابت را فراهم می‌کند
  2. کلاس .container-fluid ظرفی با عرض کامل را فراهم می‌کند که به اندازهٔ عرض کل صفحه نمایش گسترش می‌یابد

ظرف ثابت

می‌توان از کلاس .container برای ایجاد ظرفی واکنش گرا و با عرض ثابت استفاده کرد.

توجه کنید که طول آن (max-width) در صفحه نمایش‌های با اندازه‌های متفاوت تغییر خواهد کرد:

<576px

خیلی کوچک

≥576px

کوچک

≥768px

متوسط

≥992px

بزرگ

≥1200px

خیلی بزرگ

حداکثر-عرض ۱۰۰٪ 540px 720px 960px 1140px

مثال زیر را باز کنید و اندازه پنجره مرورگر را تغییر دهید تا چگونگی تغییر عرض ظرف را در breakpointهای مختلف مشاهده کنید:

مثال

1 <div class="container">
2   <h1>My First Bootstrap Page</h1>
3   <p>This is some text.</p>
4 </div>


مشاهدهٔ نتیجه


ظرف شناور (به انگلیسی: Fluid Container)

می‌توان از کلاس .container-fluid برای ایجاد ظرفی با عرض کامل استفاده کرد که همیشه عرض آن برابر عرض صفحه نمایش است (width همیشه 100% است):

مثال

1 <div class="container-fluid">
2   <h1>My First Bootstrap Page</h1>
3   <p>This is some text.</p>
4 </div>


مشاهدهٔ نتیجه


حاشیه ظرف (به انگلیسی: Container Padding)

بطور پیش فرض، ظرف‌ها دارای ۱۵ پیکسل حاشیه راست و چپ هستند، بدون حاشیهٔ بالا و پایین؛ بنابراین، اغلب از امکانات فاصله گذاری مانند حاشیه‌های (به انگلیسی: Padding and Margins) اضافی برای اینکه بهتر به نظر برسند استفاده می‌کنیم. برای مثال .pt-3 یعنی «۱۶ پیکسل حاشیهٔ بالا (به انگلیسی: Top Padding) اضافه شود»:

مثال

<div class="container pt-3"></div>


مشاهدهٔ نتیجه


دربارهٔ کاربردهای فاصله گذاری در بخش امکانات BS4 بیشتر خواهید آموخت.

رنگ و کادربندی ظرف

کاربردهای دیگر، مانند کادرها و رنگ‌ها، اغلب با هم در ظرف‌ها استفاده می‌شوند:

مثال

1 <div class="container p-3 my-3 border"></div>
2 
3 <div class="container p-3 my-3 bg-dark text-white"></div>
4 
5 <div class="container p-3 my-3 bg-primary text-white"></div>


مشاهدهٔ نتیجه


ظرف های واکنش گرا

می‌توان از کلاس‌های .container-sm برای ایجاد ظرف‌های واکنش گرا استفاده کرد.

ویژگی max-width ظرف در صفحه نمایش‌های با اندازه‌های متفاوت تغییر خواهد کرد:

کلاس <576px

خیلی کوچک

≥576px

کوچک

≥768px

متوسط

≥992px

بزرگ

≥1200px

خیلی بزرگ

.container-sm ۱۰۰٪ 540px 720px 960px 1140px
.container-md ۱۰۰٪ ۱۰۰٪ 720px 960px 1140px
.container-lg ۱۰۰٪ ۱۰۰٪ ۱۰۰٪ 960px 1140px
.container-xl ۱۰۰٪ ۱۰۰٪ ۱۰۰٪ ۱۰۰٪ 1140px

مثال

1 <div class="container-sm">.container-sm</div>
2 <div class="container-md">.container-md</div>
3 <div class="container-lg">.container-lg</div>
4 <div class="container-xl">.container-xl</div>


مشاهدهٔ نتیجه


منابع آموزشی