100% کامل شده تا

سیستم شبکه بندی در بوت استرپ 4

از موتو کد، دانشنامهٔ برنامه‌نویسی
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع




سیستم شبکه ای بوت استرپ، صفحه را به ۱۲ ستون تقسیم‌بندی می‌کند.[۱]

در صورتی که نخواهید همهٔ ۱۲ ستون را بطور مجزا استفاده کنید، می‌توانید چند ستون را با هم در یک دسته قرار دهید تا ستون‌های عریض تری ایجاد شود:

Responsive demo.svg

سیستم شبکه ای بوت استرپ واکنش گرا است و ستون‌ها براساس اندازه صفحه نمایش مجدداً مرتب می‌شوند: ممکن است در صفحه نمایش بزرگ بهتر باشد محتوا در سه ستون مرتب شود اما در صفحه نمایش کوچک شاید بهتر باشد محتواها روی یکدیگر بصورت پشته ای (Stacked) قرار بگیرند.


کلاس های شبکه (Grid Classes)

سیستم شبکه بندی بوت استرپ ۴، پنج کلاس دارد:

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

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

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

قواعد سیستم شبکه بندی (Grid System Rules)

برخی از قواعد سیستم شبکه بندی بوت استرپ ۴:

  • ردیف‌ها باید داخل یک .container (با عرض ثابت) یا .container-fluid (با عرض کامل) باشند تا alignment و padding مناسب ایجاد شود
  • از ردیف‌ها برای ایجاد گروه‌های ستون‌ها استفاده می‌شود
  • محتوا باید داخل ستون‌ها قرار بگیرند و فقط ستون‌ها باید فرزندان بی واسطهٔ ردیف‌ها باشند
  • کلاس‌های از پیش تعریف شده ..row و .col-sm-4 برای ایجاد سریع استایل موجود هستند
  • ستون‌ها gutterها (فاصله بین محتوای ستون) را از طریق padding ایجاد می‌کنند. این padding (حاشیه درونی) فاصلهٔ بین ردیف‌ها برای اولین و آخرین ستون از طریق حاشیه منفی در .rows است
  • ستون‌های شبکه از طریق انتخاب از بین ۱۲ ستون موجود ایجاد می‌شوند. برای مثال برای تعیین سه ستون موازی باید از سه تا .col-sm-4 استفاده شود
  • عرض ستون‌ها به درصد هستند، بنابراین همیشه شناور بوده و نسبت به عنصر والدشان سایزدهی می‌شوند
  • بزرگترین تفاوت بین بوت استرپ ۳ و ۴ این است که بوت استرپ ۴ از flexboxها بجای floatها استفاده می‌کند. یکی از مزایای مهم بوت استرپ ۴ این است که ستون‌های شبکه بدون عرض مشخص، بطور خودکار بعنوان «ستون‌های دارای عرض برابر» (و ارتفاع برابر) چیده می‌شوند. مثال: سه عنصر با .col-sm هرکدام بطور اتوماتیک دارای ۳۳٫۳۳٪ عرض breakpoint کوچک به بالا می‌شوند. نکته نکته: اگر می‌خواهید درمورد Flexbox بیشتر بیاموزید می‌توانید به آموزش CSS Flexbox مراجعه کنید.

دقت کنید که Flexbox در IE9 و نسخه‌های قدیمی‌تر پشتیبانی نمی‌شود.

اگر نیازمند پشتیبانی IE8-9 هستید از بوت استرپ ۳ استفاده کنید. زیرا پایدارترین نسخه بوت استرپ است و توسط تیم برای bugfixهای بحرانی و تغییرات مستندسازی پشتیبانی می‌شود. با این حال هیچ ویژگی جدیدی به آن اضافه نمی‌شود.




ساختار ساده یک شبکه بوت استرپ ۴ (Basic Structure of a Bootstrap 4 Grid)

کد زیر ساختار پایهٔ یک شبکه بون استرپ را نشان می‌دهد

مثال

<div class="row">
  <div class="col-*-*"></div>
  <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 class="col"></div>
</div>

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Basic Grid Structure</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">50%</div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
    <br>
    
    <div class="row">
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
      <div class="col-sm-4" style="background-color:orange;">33.33%</div>
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
    </div>
    <br>

    <div class="row">
      <div class="col-sm" style="background-color:yellow;">25%</div>
      <div class="col-sm" style="background-color:orange;">25%</div>
      <div class="col-sm" style="background-color:yellow;">25%</div>
      <div class="col-sm" style="background-color:orange;">25%</div>
    </div>
    <br>
    
    <div class="row">
      <div class="col" style="background-color:yellow;">25%</div>
      <div class="col" style="background-color:orange;">25%</div>
      <div class="col" style="background-color:yellow;">25%</div>
      <div class="col" style="background-color:orange;">25%</div>
    </div>
  </div>
</div>

</body>
</html>

Responsive demo.svg


اولین مثال: یک ردیف ایجاد کنید (<div class="row">). سپس، تعداد مورد نظر ستون‌ها را اضافه کنید (تگ‌هایی با کلاس‌های .col-*-*). ستاره (*) اول واکنش‌گرایی (Responsiveness) را نشان می‌دهد: sm, md, lg یا xl، در حالیکه ستاره (*) دوم نشان دهندهٔ تعداد است که مجموع آن به ازاء هر ردیف باید حداکثر ۱۲ تا باشد.

مثال دوم: بجای اضافه کردن عدد به هر col، بهتر است بوت استرپ برای ایجاد ستون‌های برابر چیدمان را مدیریت کند: دو عنصر "col" با عرض ۵۰٪ برای هر col باشد. سه عنصر col با عرض ۳/۳۳ برای هر کدام. چهار عنصر col با عرض ۲۵٪ برای هر کدام و غیره. می‌توان از .col-sm|md|lg|xl برای ایجاد ستون‌های واکنش گرا استفاده کرد.


امکانات شبکه (Grid Options)

جدول زیر نحوهٔ عملکرد سیستم شبکه بندی بوت استرپ را در چند دستگاه نشان می‌دهد:

خیلی کوچک

(<۵۷۶ پیکسل)

کوچک

(=< ۵۷۶ پیکسل)

متوسط

(=<۷۶۸ پیکسل)

بزرگ

(=<۹۹۲ پیکسل)

خیلی بزرگ

(>= ۱۲۰۰ پیکسل)

پیشوند کلاس .col- .col-sm- .col-md- .col-lg- .col-xl-
رفتار شبکه همیشه افقی در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی در ابتدا بصورت جمع شده (Collapsed)، بالای Breakpoint بصورت افقی
عرض ظرف هیچ (خودکار) 540px 720px 960px 1140px
مناسب برای موبایل‌های عمودی موبایل‌های افقی تبلت‌ها لپ تاپ‌ها لپ تاپ‌ها و رایانه‌های رومیزی
# تعداد ستون‌ها ۱۲ ۱۲ ۱۲ ۱۲ ۱۲
عرض Gutter ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون) ۳۰ پیکسل (۱۵ پیکسل در هر طرف ستون)
قابلیت تودرتو شدن بله بله بله بله بله
فاصله‌ها بله بله بله بله بله
ترتیب ستون‌ها بله بله بله بله بله

مثال ها (Examples)

در بخش‌های بعدی مثال‌هایی از سیستم‌های شبکه بندی برای دستگاه‌های مختلف و صفحه نمایش‌های با عرض متفاوت را ارائه شده‌است:



منابع آموزشی






به‌روزرسانی شده: ۴ ماه پیش