بررسی ستون بندی در بوت استرپ
طرح بندی چند ستونه
ایجاد یک طرح چند ستونه(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>
<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="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>
<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>
خودتان امتحان کنید »
- نوشته شده توسط احسان عباسی
- بازدید: 12472
دیدگاه‌ها
با سلام
اگر بخواهیم که مثلا در سه ستون فایلهایی را از دیتابیس بگیریم و وقتی که اون فایلها به اخر ستون اول میرسن بطور اتوماتیک به ستون دوم و در ادامه به ستون سوم بروند از چه دستوی استفاده کنم
ممنون
با سلام اگر بخواهم طوری برنامه ریزی کنم که تعدادی از div ها توی رزولوشن smو xs نشان داده نشوند چکار باید انجام بدهم؟؟
با سلام.
کافیه برای اون عنصر از کلاس‌های hidden-sm-up یا hidden-sm-down استفاده کنید.
up برای این هست که از اون رزولوشن به بعد مخفی بشه و down هم برای از اون رزولوشن کمتر.
لینک زیر میتونه شما رو کامل راهنمایی کنه.
v4-alpha.getbootstrap.com/layout/responsive-utilities/