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

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

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

سه ستون برابر

مثال زیر نحوهٔ ایجاد سه ستون با عرض برابر را نشان می‌دهد که در ابتدا با (اندازه ی) تبلت‌ها آغاز می‌شود و در رایانه‌های رومیزی مقیاس آن افزایش می‌یابد. در موبایل‌ها، ستون‌ها بطور خودکار روی هم قرار می‌گیرند (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>


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


منابع آموزشی