به جرات می تونم بگم آموزش تقسیم بندی صفحات وب، یا همان Grid System یکی از سخت ترین و حساس ترین جلسات آموزشی من در کلاس های طراحی وب طی این سال ها بوده است. اما بوت استراپ به شکلی فوق العاده، طراحی واکنشگرا یا Responsive را ساده و قابل درک طراحی کرده است.
در بخش بندی صفحه وب با Bootstrap ، بخش های مختلف صفحه به تعدادی سطر (Row) و ستون (Column) تقسیم می شوند.
به این صورت که برای ایجاد هر ردیف لازم است که یک المنت DIV با کلاس row بنویسیم:
<div class="row"></div>
حالا این ردیف از نظر بوت استراپ به ۱۲ ستون تقسیم می شود، به این صورت که به ازای هر ستون یک المنت DIV با کلاس col-md-x قرار می دهیم، و در انتهای آن به جای x یک عدد بین ۱ تا ۱۲ قرار می گیرد که مشخص می کند این ستون چند واحد از ۱۲ واحد ممکن را اشغال کند:
<div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div>
خروجی کد بالا یک ردیف با ۱۲ ستون ۱ واحد می باشد
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
نمونه دوم:
.col-md-4
|
.col-md-8
|
نظرات