شبکه بندی پشته‌ای - تا افقی

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

یک سیستم شبکه بندی ساده ایجاد خواهیم کرد که در دستگاه‌های خیلی کوچک در ابتدا بصورت پشته ای باشد، پیش از اینکه در دستگاه‌های بزرگ حالت افقی تبدیل شود.[۱]

مثال زیر یک چیدمان دو ستونهٔ «پشته‌ای-تا افقی» ساده را نشان می‌دهد، یعنی در همهٔ صفحه نمایش‌ها منجر به انشعاب ۵۰٪-۵۰٪ می‌شود، به چز صفحه نمایش‌های بسیار کوچک که در آنها بطور خودکار کاملاً پشته ای می‌شود (۱۰۰٪):

مثال: پشته ای-تا-افقی

<div class="container">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>


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


نکته: عددها در کلاس‌های .col-sm-* نشان دهندهٔ تعداد ستون‌هایی است که div در بر می‌گیرد (حداکثر ۱۲ تا). بنابراین .col-sm-1 یک ستون، .col-sm-4 در ۴ ستون، .col-sm-6 و ۶ ستون را در بر می‌گیرد.

نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ باشد!
نکته: با تغییر کلاس .container به کلاس .container-fluid می‌توان هر چیدمان با عرض ثابتی (fixed-width) را به چیدمان با عرض کامل (full-width) تبدیل کنید.

مثال: ظرف (Container) شناور

<div class="container-fluid">
  <h1>Hello World!</h1>
  <div class="row">
    <div class="col-sm-6" style="background-color:yellow;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-6" style="background-color:pink;">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>


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


منابع آموزشی