مثال‌های شبکه‌های Bootstrap 5

در اینجا تعدادی از مثال‌های ساختار شبکه Bootstrap 5 را جمع‌آوری کرده‌ایم.

سه ستون مساوی

برای استفاده در تعداد مشخصی از عناصر .col شما می‌توانید از تعداد مشخصی از عناصر استفاده کنید تا Bootstrap تعداد عناصر را شناسایی کند (و ستون‌های مساوی ایجاد کند). در مثال زیر، از سه عنصر col استفاده شده است که هر کدام 33.33% عرض دارند.

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

به طور مستقیم امتحان کنید

سه ستون مساوی با استفاده از اعداد

شما همچنین می‌توانید از اعداد برای کنترل عرض ستون استفاده کنید. فقط مطمئن شوید که مجموع برابر یا کمتر از 12 است (نیاز به استفاده از تمام 12 ستون موجود نیست):

مثال

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>

به طور مستقیم امتحان کنید

سه ستون غیر مساوی

برای ایجاد ستون‌های غیر مساوی، باید از اعداد استفاده کنید. در مثال زیر، 25%/50%/25% تقسیم می‌شود:

مثال

<div class="row">
  <div class="col-3">col-3</div>
  <div class="col-6">col-6</div>
  <div class="col-3">col-3</div>
</div>

به طور مستقیم امتحان کنید

تنظیم عرض یک ستون

با این حال، فقط تنظیم عرض یک ستون کافی است و سایر ستون‌های برادر در اطراف به طور خودکار اندازه‌گیری می‌شوند. در مثال زیر، 25%/50%/25% تقسیم می‌شود:

مثال

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

به طور مستقیم امتحان کنید

ستون‌های مساوی بیشتر

مثال

<!-- دو ستون مساوی -->
<div class="row">
  <div class="col">1 از 2</div>
  <div class="col">2 از 2</div>
</div>
<!-- چهار ستون مساوی -->
<div class="row">
  <div class="col">1 از 4</div>
  <div class="col">2 از 4</div>
  <div class="col">3 از 4</div>
  <div class="col">4 از 4</div>
</div>
<!-- شش ستون مساوی -->
<div class="row">
  <div class="col">1 از 6</div>
  <div class="col">2 از 6</div>
  <div class="col">3 از 6</div>
  <div class="col">4 از 6</div>  
  <div class="col">5 از 6</div>
  <div class="col">6 از 6</div>
</div>

به طور مستقیم امتحان کنید

Row Cols

شما همچنین می‌توانید از .row-cols-* کنترل‌های نوع ستون باید در کنار یکدیگر قرار گیرند (مهم نیست که چند ستون باشند):

مثال

<div class="row row-cols-1">
  <div class="col">1 از 2</div>
  <div class="col">2 از 2</div>
</div>
<div class="row row-cols-2">
  <div class="col">1 از 4</div>
  <div class="col">2 از 4</div>
  <div class="col">3 از 4</div>
  <div class="col">4 از 4</div>
</div>
<div class="row row-cols-3">
  <div class="col">1 از 6</div>
  <div class="col">2 از 6</div>
  <div class="col">3 از 6</div>
  <div class="col">4 از 6</div>  
  <div class="col">5 از 6</div>
  <div class="col">6 از 6</div>
</div>

به طور مستقیم امتحان کنید

ستون‌های غیر مساوی بیشتر

مثال

<!-- دو ستون غیر مساوی -->
<div class="row">
  <div class="col-8">1 از 2</div>
  <div class="col-4">2 از 2</div>
</div>
<!-- چهار ستون نابرابر -->
<div class="row">
  <div class="col-2">1 از 4</div>
  <div class="col-2">2 از 4</div>
  <div class="col-2">3 از 4</div>
  <div class="col-6">4 از 4</div>
</div>
<!-- تنظیم عرض دو ستون -->
<div class="row">
  <div class="col-4">1 از 4</div>
  <div class="col-6">2 از 4</div>
  <div class="col">3 از 4</div>
  <div class="col">4 از 4</div>
</div>

به طور مستقیم امتحان کنید

بلندی یکسان

اگر یک ستون بلندتر از ستون دیگر باشد (به دلیل متن یا ارتفاع CSS)، بقیه ستون‌ها دنبال می‌کنند:

مثال

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

به طور مستقیم امتحان کنید

ستون‌های درون‌ریز

مثال زیر نحوه ایجاد چیدمان دو ستون را نشان می‌دهد، که در یک ستون دو ستون دیگر قرار دارند:

مثال

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

به طور مستقیم امتحان کنید

کلاس‌های پاسخگو

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

  • .col- (دستگاه‌های بسیار کوچک - عرض صفحه کمتر از 576px)
  • .col-sm- (دستگاه‌های کوچک - عرض صفحه برابر یا بزرگتر از 576px)
  • .col-md- (دستگاه‌های متوسط - عرض صفحه برابر یا بزرگتر از 768 پیکسل)
  • .col-lg- (دستگاه‌های بزرگ - عرض صفحه برابر یا بزرگتر از 992 پیکسل)
  • .col-xl- (دستگاه‌های xlarge - عرض صفحه برابر یا بزرگتر از 1200px)
  • .col-xxl- (دستگاه‌های xxlarge - عرض صفحه برابر یا بزرگتر از 1400px)

می‌توانید کلاس‌های فوق را ترکیب کنید تا چیدمان‌های پویاتر و انعطاف‌پذیرتری ایجاد کنید.

توجه:هر کلاس به نسبت بزرگتر می‌شود، بنابراین اگر می‌خواهید برای sm و md برای تنظیم عرض مشابه، فقط نیاز به指定 sm。

عمودی به افقی

مثال زیر نحوه ایجاد چیدمان ستون‌ها را نشان می‌دهد، که در ابتدا در دستگاه‌های کوچک‌تر به صورت عمودی قرار می‌گیرند و سپس در دستگاه‌های بزرگتر (sm، md، lg و xl) به چیدمان افقی تبدیل می‌شوند:

مثال

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

به طور مستقیم امتحان کنید

Mix و Match

مثال

<!-- در دستگاه‌های بسیار کوچک 50%/50% تقسیم می‌شود، در دستگاه‌های بزرگ 75%/25% تقسیم می‌شود -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>
<!-- در دستگاه‌های بسیار کوچک، کوچک، متوسط 58%/42% تقسیم می‌شود، در دستگاه‌های بزرگ و فوق‌العاده بزرگ 66.3%/33.3% تقسیم می‌شود -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>
<!-- در دستگاه‌های کوچک 25%/75% تقسیم می‌شود، در دستگاه‌های متوسط 50%/50% تقسیم می‌شود، در دستگاه‌های بزرگ و فوق‌العاده بزرگ 33%/66% تقسیم می‌شود. در دستگاه‌های بسیار کوچک، به صورت خودکار روی هم قرار می‌گیرند (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

به طور مستقیم امتحان کنید

بدون gutter

برای تغییر فاصله بین ستون‌ها (فضای اضافی)، از هر .g-1|2|3|4|5 کلاس (.g-4 این مقدار پیش‌فرض است).

برای حذف کامل حاشیه‌ها (gutter)، لطفاً از .g-0:

مثال

<div class="row g-0">

به طور مستقیم امتحان کنید