فروشگاه همواره تخفیف 2050
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

Container in bootstrap 4| کانتینر در بوت استرپ ۴

شما از فصل قبل دریافتید که Bootstrap برای بسته بندی مطالب سایت به یک کلس نیاز دارد.از container برای پد کردن محتوای داخل آنها استفاده می شود ، و دو کلاس کانتینر ما داریم.

کلاس .container یک کلس با پهنای ثابت را میگویند.
کلاس container-fluid یک کانتینر با عرض کامل فراهم می کند ، و کل عرضصفحه را پوشان می کند

مثال زیر را باز کنید و اندازه پنجره مرورگر را تغییر اندازه دهید تا ببینید که عرض کانتینر در نقاط مختلف مختلف تغییر می کند:

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

Container-Fluid

برایه اینکه همیشه کل صفحه را بپوشانید از Container-Fluid که همیشه کل صفحه را میپوشاند.

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

Padding در کانتینر


به طور پیش فرض ، کانتینر دارای ۱۵px چپ و راست هستند ، بدون pading بالا یا پایین. بنابراین ، ما اغلب از برنامه های کاربردی فاصله ، مانند pading اضافی و حاشیه استفاده می کنیم تا ظاهر آنها بهتر به نظر برسد. به عنوان مثال ، .pt-3 به معنی “اضافه کردن pading بالای ۱۶px” است.

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

هاشیه و رنگ در container


سایر ابزارهای کاربردی ، مانند حاشیه ها و رنگ ها ، اغلب با همراه container نیز استفاده می شوند:

<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>

Responsive Containers

ClassExtra small
<576px
Small
≥۵۷۶px
Medium
≥۷۶۸px
Large
≥۹۹۲px
Extra large
≥۱۲۰۰px
.container-sm۱۰۰%۵۴۰px۷۲۰px۹۶۰px۱۱۴۰px
.container-md۱۰۰%۱۰۰%۷۲۰px۹۶۰px۱۱۴۰px
.container-lg۱۰۰%۱۰۰%۱۰۰%۹۶۰px۱۱۴۰px
.container-xl۱۰۰%۱۰۰%۱۰۰%۱۰۰%۱۱۴۰px

برایه مثال

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

دیدگاه‌های نوشته