مثال‌های شبکه‌بندی

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

در ادامه چند مثال از چیدمان‌های شبکه ای بوت استرپ بیان می‌کنیم.[۱]

سه ستون برابر[ویرایش | ویرایش]

از کلاس .col روی تعداد مشخصی از عنصرها استفاده کنید و بوت استرپ تشخیص می‌دهد چند عنصر وجود دارد (و سه ستون با عرض برابر تولید می‌کند). در مثال زیر، از سه عنصر col استفاده می‌کنیم که هرکدام عرض ۳۳٫۳۳٪ می‌گیرند.

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


سه ستون برابر با استفاده از اعداد[ویرایش | ویرایش]

می‌توانید با از عددها برای کنترل عرض ستون‌ها استفاده کنید. فقط مطمئن شوید که مجموع ستون‌ها حداکثر ۱۲ یا کمتر شود (لزومی ندارد از همهٔ ۱۲ ستون موجود استفاده کنید):

مثال[ویرایش | ویرایش]

<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>


مشاهدهٔ نتیجه


سه ستون نا برابر[ویرایش | ویرایش]

برای ایجاد ستون‌های نابرابر، باید از عددها استفاده کنید. مثال زیر یک تقسیم‌بندی ۲۵٪-۵۰٪-۲۵٪ را ایجاد می‌کند:

مثال[ویرایش | ویرایش]

<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>


مشاهدهٔ نتیجه


تنظیم عرض یک ستون[ویرایش | ویرایش]

با این حال، کافیست تنها عرض یک ستون را تنظیم کنید و ستون برادر آن را بطور خودکار در اطراف آن تغییر سایز می‌دهد. مثال زیر یک تقسیم‌بندی ۲۵٪-۵۰٪-۲۵٪ را تولید می‌کند:

مثال[ویرایش | ویرایش]

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


مشاهدهٔ نتیجه


ستون‌های برابر بیشتر[ویرایش | ویرایش]

مثال[ویرایش | ویرایش]

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>


مشاهدهٔ نتیجه


ستون‌های ردیف[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

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


مشاهدهٔ نتیجه


ستون‌های نابرابر بیشتر[ویرایش | ویرایش]

مثال[ویرایش | ویرایش]

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 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>


مشاهدهٔ نتیجه


کلاس‌های واکنش گرا[ویرایش | ویرایش]

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

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

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

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

Stacked تا افقی[ویرایش | ویرایش]

مثال زیر نحوه ایجاد چیدمان ستون‌ها را نشان می‌دهد که از حالت stacked (ستون‌ها بالای یکدیگر) در دستگاه‌های خیلی کوچک آغاز می‌شود، پیش از آنکه در دستگاه‌های بزرگتر به شکل افقی تبدیل شود (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 and Match)[ویرایش | ویرایش]

مثال[ویرایش | ویرایش]

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<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% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<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% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (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ها (فاصلهٔ بین محتوای ستون‌ها)[ویرایش | ویرایش]

کلاس .no-gutters را به ظرف .row اضافه کنید تا gutterها (فاصله‌های اضافی) حذف شوند:

مثال[ویرایش | ویرایش]

<div class="row no-gutters">


مشاهدهٔ نتیجه



منابع آموزشی[ویرایش]