بررسی ستون بندی در بوت استرپ

چاپ

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

Wiki

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

بوتسترپ، یک سیستم شبکه بندی 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>

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