BootstrapCSSHTMLطراحی وب

Responsive Grid System و تقسیم بندی صفحه در Bootstrap

بوت استرپ

به جرات می تونم بگم آموزش تقسیم بندی صفحات وب، یا همان 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

نظرات