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

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

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

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

مثال زیر نحوهٔ ایجاد سه ستون با عرض برابر را نشان می‌دهد که در ابتدا با (اندازه ی) تبلت‌ها آغاز می‌شود و در رایانه‌های رومیزی مقیاس آن افزایش می‌یابد. در موبایل‌ها، ستون‌ها بطور خودکار روی هم قرار می‌گیرند (stack):[۱]

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

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


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


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

مثال زیر نحوه طراحی سه ستون با عرض‌های متفاوت را نشان می‌دهد که در ابتدا با (اندازه ی) تبلت آغاز می‌شود و در رایانه‌های رومیزی مقیاس آن افزایش می‌یابد:

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

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-6">.col-sm-6</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>


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


بدون Gutter (فاصلهٔ بین محتوای ستون ها)[ویرایش | ویرایش]

از کلاس .row-no-gutters برای حذف gutterها از یک ردیف و ستون‌هایش استفاده می‌شود:

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

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


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


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

مثال زیر نشان نحوه ایجاد دو ستون که در ابتدا در تبلت آغاز می‌شود و مقیاس آن در رایانه‌های رومیزی افزایش می‌یابد را نشان می‌دهد، با دو ستون دیگر (با عرض برابر) درون ستون بزرگ (در موبایل‌ها، این ستون‌ها و ستون‌های تودرتوی آنها به شکل پشته ای (Stack) قرار می‌گیرند:

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

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


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


ترکیبی: موبایل و رایانه رومیزی[ویرایش | ویرایش]

سیستم شبکه بندی بوت استرپ چهار کلاس دارد: xs (موبایل‌ها)، sm (تبلت‌ها)، md (رایانه‌های رومیزی) و lg (رایانه‌های رومیزی بزگتر). بمنظور ایجاد چیدمان‌های پویاتر و منعطف تر می‌توان این کلاس‌ها را با هم ترکیب کرد.

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

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

<div class="row">
  <div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
  <div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>

<div class="row">
  <div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
  <div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>

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


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


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

ترکیبی: موبایل، تبلت و رایانه رومیزی[ویرایش | ویرایش]

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

<div class="row">
  <div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
  <div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>

<div class="row">
  <div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
  <div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>


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


پاک کردن Floatها[ویرایش | ویرایش]

در Breakpointهای خاصی، Floatها باید پاک شوند (با کلاس .clearfix) تا از پوشش دهی محتوا ی نامساعد جلوگیری شود:

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

<div class="row">
  <div class="col-xs-6 col-sm-3">
    Column 1
    <br>
    Resize the browser window to see the effect.
  </div>
  <div class="col-xs-6 col-sm-3">Column 2</div>
  <!-- Add clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>
  <div class="col-xs-6 col-sm-3">Column 3</div>
  <div class="col-xs-6 col-sm-3">Column 4</div>
</div>


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


فاصلهٔ ستون ها[ویرایش | ویرایش]

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

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>


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


Push و Pull - تغییر ترتیب ستون[ویرایش | ویرایش]

می‌توان با استفاده از کلاس‌های .col-md-push-* و .col-md-pull-* ترتیب ستون‌های شبکه را تغییر داد:

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

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


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


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