طرح بندی چند ستونه
ایجاد یک طرح بندی چند ستونه(multicolumn) در بوتسترپ بسیار آسان می باشد.
بوتسترپ، یک سیستم شبکه بندی 12 ستونه و واکنش گرا و پاسخگرا به مبایل را ارائه می دهد.
هنگامی که ستون ها در صفحه های نمایش مختلف نشان داده می شوند، خود را بازآرایی می کنند.
برخی قواعد شبکه بندی:
- همواره با یک ظرف شروع کنید(<div vlass="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>
<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>
خودتان امتحان کنید »
