مفاهیم اولیه Grid System در Bootstrap

Grid System مفهومی می باشد که در جنبه های مختلفی از طراحی از آن استفاده می شود و صرفا مختص وب نیست. در این سیستم برای آنکه طراحی اصولی و چشم نواز تری ایجاد شود، صفحه ها را از نظر عرضی به بخش های مختلفی تقسیم می کنند و اندازه عناصر متناسب با این واحد ها می باشد.

در Bootstrap از گرید 12 واحدی استفاده می شود، بدین معنا که عرض صفحه به 12 قسمت مختلف تقسیم می شود. از این تقسیم بندی به شیوه های مختلفی می توان استفاده نمود برای مثال می توان 12 عنصر 1 واحدی ، 6 عنصر 2 واحدی یا 4 عنصر 3 واحدی و ... . هنگامی که گفته می شود 4 عنصر 3 واحدی، به این معنی است که در یک سطر (Row) چهار عنصر قرار می گیرد که عرض هریک از آنها برابر 3 واحد (ستون) می باشد.

همچنین شما ملزم به تقسیم بندی یکسان واحد ها نیستید. برای مثال ممکن است نیاز به طرحی باشد که در آن یک عنصر 4 واحدی و یک عنصر 8 واحدی قرار گیرد. نکته مهم آن است که مجموع واحدهای اختصاص داده شده دقیقا برابر 12 باشد. در تصویر زیر نمونه هایی از تقسیم بندی را مشاهده می نمایید.

ستون بندی های bootstrap

تعریف سطر و ستون

برای استفاده از Grid System باید یک row تعریف کرده و داخل آن ستون هایی با اندازه دلخواه معین شود. برای تعریف row کافی است به div مورد نظر این کلاس را اختصاص دهید.

<div class="row">
  
</div>

پس از تعریف row می توانید عناصر را مطابق نیاز خود درون ستون ها قرار دهید. تعریف ستون ها متناسب با اندازه صفحه نمایش می باشد و با پیشوند های زیر تعریف می شوند.

پیشوند ستون ها

نکته مهمی که می بایست توجه داشته باشید آن است که برای طراحی responsive می بایست اندازه هر ستون را در صفحه نمایش های مختلف تعیین نمود. برای مثال اگر قصد داشته باشیم یک ستون در اندازه Extra large برابر 3 واحد و در اندازه Large برابر 4 واحد باشد، می بایست به شکل زیر تعریف کنیم.

<div class="row">
  <div class="col-xl-3 col-lg-4"></div>
</div>

همچنین اگر قصد داشته باشید ستون هایی با اندازه یکسان در یک ردیف داشته باشید، می توانید از کلاس col استفاده کنید. در این صورت بوت استرپ بصورت اتوماتیک، فضا را بطور مساوی بین ستون ها تقسیم می کند.

برای مثال اگر ستون بندی به شکل زیر تعریف شود سه ستون 4 واحدی خواهید داشت.

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

آیا برای هر ستون نیاز است هر 4 اندازه تعریف شود؟

اگر برای هر ستون مجبور بودیم عملکرد آن را در هریک از اندازه های صفحه نمایش ذکر کنیم، بوت استرپ هم به یک فریم ورک خسته کننده تبدیل می شد. خوشبختانه تمهیدات مناسبی در آن در نظر گرفته شده است که می توان با کمترین کد، بیشترین بازدهی را داشت. اگر در ستون بندی ها یک اندازه ذکر شود برای مثال col-md-4 در این صورت در انداره md و سایز های بزرگتر از آن (مانند lg و xl) اندازه این ستون 4 واحد در نظر گرفته شده و در اندازه های کوچکتر از آن، 12 واحد خواهد بود. با استفاده از این تکنیک می توان از تکرار جلوگیری کرد.

همچنین اگر قصد داشته باشید عملکرد یک ستون در همه اندازه ها یکسان باشد می توانید آن را با پیشوند col و به شکل زیر تعریف کنید.

<div class="row">
  <div class="col-4"></div>
  <div class="col-8"></div>
</div>

بدین ترتیب، ستون اول در همه اندازه ها 4 واحد و ستون دوم 8 واحد خواهد بود.