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

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

جدول بندی در بوت استرپ| Bootstrap 4 Grids

جدول بندی درBootstrap 4


سیستم شبکه بوت استرپ با flexbox ساخته شده است و اجازه می دهد تا حداکثر ۱۲ ستون در طول صفحه باشد.اگر نمی خواهید از هر ۱۲ ستون بطور جداگانه استفاده کنید ، می توانید ستون ها را بهم متصل کنید تا ستون های وسیع تری ایجاد کنید:

col-1 container
سطون درbootstrap

سیستم رسپانسیو است و بسته به اندازه صفحه ، ستون ها دوباره بصورت خودکار تنطیم می شوند.مطمعن شید که هر سطون حداکثر ۱۲ یا کمتر است (لازم نیست از هر ۱۲ ستون موجود استفاده کنید).

کلس هایه bootstrap


سیستم شبکه Bootstrap 4 دارای پنج کلاس است:

.col- (دستگاه های اضافی کوچک – عرض صفحه کمتر از ۵۷۶ پیکسل)
.col-sm- (دستگاه های کوچک – عرض صفحه برابر یا بیشتر از ۵۷۶px)
.col-md- (وسایل متوسط ​​- عرض صفحه برابر یا بیشتر از ۷۶۸px)
.col-lg- (دستگاه های بزرگ – عرض صفحه برابر یا بیشتر از ۹۹۲px)
.col-xl- (دستگاه های xlarge – عرض صفحه برابر یا بیشتر از ۱۲۰۰px)
کلاس های فوق می توانند برای ایجاد طرح های پویاتر و انعطاف پذیر تر ترکیب شوند.

نکته: هر کلاس ترازو می کند ، بنابراین اگر می خواهید عرض های یکسان را برای sm و md تنظیم کنید ، فقط باید sm را مشخص کنید.

ساختار اصلی شبکه بندی در bootstrap


در زیر ساختار اصلی شبکه Bootstrap 4 ارائه شده است:

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

مثال اول: یک ردیف ایجاد کنید (). سپس تعداد ستون های مورد نظر را اضافه کنید (برچسب هایی با کلاس های مناسب .col – * – ). ستاره اول () نشان دهنده ی پاسخگویی است: sm ، md ، lg یا xl ، در حالی که ستاره دوم یک عدد را نشان می دهد که برای هر سطر باید حداکثر ۱۲ باشد.

مثال دوم: به جای اضافه کردن یک عدد به هر ستون ، اجازه دهید bootstrap با چیدمان طرح ، برای ایجاد ستونهای با عرض برابر: دو عنصر “col” = 50٪ عرض به هر col. سه قطعه = ۳۳/۳۳ width عرض به هر قطعه. چهار ستون = ۲۵٪ عرض و غیره می توانید برای پاسخگو بودن ستونها از .col-sm | md | lg | xl نیز استفاده کنید.

مثال زیر نحوه ایجاد چهار ستون با پهنای برابر را با شروع از تبلت ها و مقیاس گذاری به سمت دسک تاپ های بزرگ بزرگ نشان می دهد. در تلفن های همراه یا صفحه نمایشهایی که کمتر از ۵۷۶ پیکسل عرض داشته باشند ، ستون ها به طور خودکار روی یکدیگر قرار می گیرند.

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

دو ستون پاسخگو نابرابر

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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