شبکه بندی

  2. کامپوننت های Ui
  3. شبکه بندی
گزینه های شبکه بندی
شبکه بندی بوت استرپ امکان ساخت بلوک های انعطاف پذیر با ارتفاع مساوی را به راحتی فراهم می کند

در حالی که بوت استرپ از em یا rem برای تعریف بیشتر اندازه ها استفاده می کند، px برای نقاط شکست شبکه و عرض کانتینر استفاده می شود. این به این دلیل است که عرض درگاه نمایش بر حسب پیکسل است و با اندازه قلم تغییر نمی‌کند.

خیلی کوچک
<576px		 کوچک
≥576px		 متوسط
≥768px		 بزرگ
≥992px		 خیلی بزرگ
≥1200px		 خیلی خیلی بزرگ
≥1400px
رفتار شبکه بندی افقی در همه حال برای شروع جمع شده، افقی بالای نقاط شکست
حداکثر عرض ظرف هیچکدام (خودکار) 540px 720px 960px 1140px 1320px
پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
# ستون 12
عرض ناودان 1.5rem (.75rem در سمت چپ و راست)
تو در تو بله
افست بله
ترتیب ستون بله
ستون شبکه بندی

با استفاده از یک مجموعه واحد از کلاس‌های شبکه .col-md-*، می‌توانید یک سیستم شبکه پایه ایجاد کنید که قبل از افقی شدن در دستگاه‌های تلفن همراه و تبلت‌ها (بازه بسیار کوچک تا کوچک) شروع می‌شود. دستگاه های رومیزی (متوسط). ستون های شبکه را در هر . ردیف قرار دهید.

col-md-1
col-md-2
col-md-2
col-md-3
col-md-4
col-md-5
col-md-7
col-md-6
col-md-6
col-md-8
col-md-4
col-md-9
col-md-3
col-md-10
col-md-2
col-md-12
<!--  Grid Column Copy begin -->
<div class="row">
  <div class="col-md-1 text-center">
    <span >
       col-md-1
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-3 text-center">
    <span >
       col-md-3
    </span>
  </div>
  <div class="col-md-4 text-center">
    <span >
       col-md-4
    </span>
  </div>
  <div class="col-md-5 text-center">
    <span >
       col-md-5
    </span>
  </div>
  <div class="col-md-7 text-center">
    <span >
       col-md-7
    </span>
  </div>
  <div class="col-md-6 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-6 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-8 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-4 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-9 text-center">
    <span >
       col-md-9
    </span>
  </div>
  <div class="col-md-3 text-center">
    <span >
       col-md-3
    </span>
  </div>
  <div class="col-md-10 text-center">
    <span >
       col-md-10
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-12 text-center">
    <span >
       col-md-12
    </span>
  </div>
</div>
<!--  Grid Column Copy end -->
ستون های ردیف

از کلاس‌های پاسخ‌گو.row-cols-* برای تنظیم سریع تعداد ستون‌هایی که محتوا و طرح‌بندی شما را ارائه می‌کنند، استفاده کنید. در حالی که کلاس‌های .col-* معمولی برای ستون‌های جداگانه اعمال می‌شوند (به عنوان مثال، .col-md-4)، کلاس‌های ستون‌های ردیف در .row والدین به‌عنوان یک تنظیم می‌شوند. پیش فرض برای ستون های حاوی با.row-cols-autoمی توانید عرض طبیعی ستون ها را بدهید.

col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-lg-3
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
col-4 col-lg-2
<!--  Grid Column Copy begin -->
<div class="row">
  <div class="col-md-1 text-center">
    <span >
       col-md-1
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-3 text-center">
    <span >
       col-md-3
    </span>
  </div>
  <div class="col-md-4 text-center">
    <span >
       col-md-4
    </span>
  </div>
  <div class="col-md-5 text-center">
    <span >
       col-md-5
    </span>
  </div>
  <div class="col-md-7 text-center">
    <span >
       col-md-7
    </span>
  </div>
  <div class="col-md-6 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-6 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-8 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-4 text-center">
    <span >
       col-md-6
    </span>
  </div>
  <div class="col-md-9 text-center">
    <span >
       col-md-9
    </span>
  </div>
  <div class="col-md-3 text-center">
    <span >
       col-md-3
    </span>
  </div>
  <div class="col-md-10 text-center">
    <span >
       col-md-10
    </span>
  </div>
  <div class="col-md-2 text-center">
    <span >
       col-md-2
    </span>
  </div>
  <div class="col-md-12 text-center">
    <span >
       col-md-12
    </span>
  </div>
</div>
<!--  Grid Column Copy end -->
چیدمان عمودی

برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید.

یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
یکی از سه ستون
<!--  Vertical alignment Copy begin -->
<div class="row">
  <div class="col align-self-start">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col align-self-center">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col align-self-end">
    <span >
       یکی از سه ستون
    </span>
  </div>
</div>
<div class="row align-self-start">
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
</div>
<div class="row align-self-center">
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
</div>
<div class="row align-self-end">
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
</div>;
<!--  Vertical alignment Copy end -->
ستون تو در تو

برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید.

سطح 1 : col-sm-9.
سطح 2 : col-8. col-sm-6.
سطح 2 : col-4. col-sm-6.
<!--  Nesting Column Copy begin -->
<div class="row">
  <div class="col-8 col-sm-6">
    <span >
       سطح 2 : col-8 col-sm-6
    </span>
  </div>
  <div class="col-4 col-sm-6">
    <span >
       سطح 2 : .col-4 .col-sm-6
    </span>
  </div>
</div>
<!--  Nesting Column Copy end -->
سفارش

از کلاس‌های .order- برای کنترل ترتیب بصری محتوای خود استفاده کنید. این کلاس‌ها پاسخگو هستند، بنابراین می‌توانید order را بر اساس نقطه شکست تنظیم کنید (به عنوان مثال، .order-1.order-md-2). شامل پشتیبانی از 1 تا 12 در هر پنج سطح شبکه است.

اول، اما بدون نظم
دوم، اما آخر
سوم، اما اول
اول، اما آخر
دوم، اما بدون نظم
سوم، اما اول
<!--  Order Copy begin -->
<div class="row">
  <div class="col">
    <span >
       اول، اما بدون نظم
    </span>
  </div>
  <div class="col order-12">
    <span >
       دوم، اما آخرین
    </span>
  </div>
  <div class="col order-1">
    <span >
       سوم، اما اول
    </span>
  </div>
</div>
<div class="row">
  <div class="col order-last">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col">
    <span >
       یکی از سه ستون
    </span>
  </div>
  <div class="col order-first">
    <span >
       یکی از سه ستون
    </span>
  </div>
</div>
<!--  Order Copy end -->
آفست

با استفاده از کلاس‌های .offset-md-*، ستون‌ها را به سمت راست حرکت دهید. این کلاس ها حاشیه سمت چپ یک ستون را با ستون های * افزایش می دهند. برای مثال، .offset-md-4 .col-md-4 را روی چهار ستون منتقل می کند.

col-md-4.
col-md-4. offset-md-4.
col-md-3. offset-md-3.
col-md-3. offset-md-3.
col-md-6. offset-md-3.
col-sm-5. col-md-6.
col-sm-5. offset-sm-2. col-md-6. offset-md-0.
col-sm-6. col-md-5. col-lg-6.
col-sm-6. col-md-5. offset-md-2. col-lg-6. offset-lg-0.
<!--  Offset Copy begin -->
<div class="row">
  <div class="col-md-4">
    <span >
       col-md-4
    </span>
  </div>
  <div class="col-md-4 offset-md-4">
    <span >
       col-md-4 offset-md-4
    </span>
  </div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">
    <span >
       col-md-3 offset-md-3
    </span>
  </div>
  <div class="col-md-3 offset-md-3">
    <span >
       col-md-3 offset-md-3
    </span>
  </div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">
    <span >
       col-md-6 offset-md-3
    </span>
  </div>
</div>
<div class="row">
  <div class="col-sm-5 col-md-6">
    <span >
       col-sm-5 col-md-6
    </span>
  </div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">
    <span >
       col-sm-5 offset-sm-2 col-md-6 offset-md-0
    </span>
  </div>
</div>
<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">
    <span >
       col-sm-6 col-md-5 col-lg-6
    </span>
  </div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
    <span >
       col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0
    </span>
  </div>
</div>
<!--  Offset Copy end -->