طرح بندی چند ستونه

Wiki

ایجاد یک طرح چند ستونه(multicolumn) در بوتسترپ بسیار آسان می باشد.

بوتسترپ، یک سیستم شبکه بندی 12 ستونه و واکنش گرا و پاسخگرا به مبایل را ارائه می دهد.

هنگامی که ستون ها در صفحه های نمایش مختلف نشان داده می شوند، خود را بازآرایی می کنند.

برخی قواعد شبکه بندی:

  • همواره با یک ظرف شروع کنید(<div class="container">).
  • یک ردیف را به وسیله ی عبارت <div class="row"> به ظرف اضافه کنید.
  • برای سرعت بیشتر در ایجاد ستون های شبکه بندی، می توانید از کلاس های از پیش تعریف شده ی ستون ها استفاده کنید.  مثلا می توانید از کلاس های .col-md-4 و .col-md-6 استفاده کنید.
  • ستون های شبکه بندی با مشخص کردن 12 ستون قابل گسترش ایجاد می شوند، بعنوان مثال برای ایجاد سه ستون مساوی می توانید از کلاس .col-md-4 استفاده کنید.
  • همواره باید جمع اعداد داخل کلاس .col-*-*  برای هر ردیف(row) برابر با 12 باشد.
  • محتوا نیز درون ستون های شبکه بندی قرار می گیرند.

مثال زیر نشان می دهد که چطور، 4 ستون با عرض مساوی را ایجاد کنیم:

مثال (گزینه ستون های چندگانه)

<div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-3"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
  </div>
  <div class="col-md-3"> 
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>

خودتان امتحان کنید »

ستون ها با عرض های متفاوت

Wiki

اکنون ما می خواهیم ستون هایی را با عرض های متفاوت ایجاد کنیم.

مثال زیر یک طرح  سه ستونه را ایجاد می کند، به طوری که ستون وسط، نسبت به ستون اول و آخر، گسترده تر می باشد.

مثال (ستون های چندگانه)

 <div class="row">
  <div class="col-md-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
    incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="col-md-6"> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div class="col-md-3"> 
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
    dicta sunt explicabo.</p>
  </div>
</div>

خودتان امتحان کنید »