در سیستم خانه بندی bootstrap ، عرض صفحه به 12 خانه مساوی ( Column ) تقسیم می شود . شما می توانید از میزان پهنای این خانه ها برای قرار دادن محتویات مورد نظر خود استفاده نموده و یا با گروه کردن ( Combine ) آنها ، خانه های پهن تری ایجاد کنید . همانطور که در مثال زیر نشان داده می شود ، ردیف اول دارای 12 ستون است . در این حالت می توانید محتوبات مورد نظر خود را در هر یک این خانه ها قرار دهید ، اما اگر به فضای بیشتری نیاز دارید ، با گروه کردن خانه ها ( که در ادامه به آموزش آن خواهیم پرداخت ) به صورت 2 ، 3 ، 4 ، 5 ، 6 ، 8 ، 10 و یا 12 تایی ، ستون های پهن تری ساخته و استفاده کنید .
سیستم خانه بندی ( Grid ) در bootstrap کاملا واکنش گرا ( Responsive ) بوده و ستون ها می توانند ، نحوه قرار گیری و خروجی خود را بر حسب سایز صفحه تغییر دهند . برای مثال فرض کنید که 3 ستون مساوی ( span4 ) در عرض صفحه دارید . در یک صفحه نمایش بزرگ ، این 3 ستون در کنار هم و در عرض صفحه قرار خواهند گرفت . اما در یک صفحه نمایش کوجک مثل موبایل ، هر یک از ستون ها ( span4 ) به تنهایی در عرض صفحه نمایش داده شده و دو ستون دیگر به ترتیب زیر هم قرار گرفته و آنها نیز کل عرض صفحه را می پوشانند . تصویر زیر نحوه نمایش ستون ها در سیستم خانه بندی bootstrap را نشان می دهد :
به این صورت می توانید محتویات خود را فارغ از اینکه ، از قبل بدانید بر روی چه اندازه صفحه نمایشی قرار است نمایش داده شوند ، تنظیم کنید .
bootstrap دارای 4 کلاس ( بر حسب سایز صفحه و نوع دستگاه نمایش دهنده محتویات ) برای قالب بندی ستون ها به شرح زیر است : کلاس xs که برای صفحات کوچک مثل موبایل استفاده می شود . کلاس sm که برای صفحات متوسط مثل تبلت ها به کار می رود . کلاس md که برای صفحات نمایش معمولی مثل لپ تاپ ها یا مانیتورها تعیین شده است . کلاس lg که برای دستگاه های بزرگ و wide مناسب می باشند . هر یک از کلاس های فوق ، هنگامی که در یک عنصر تعیین شوند ، متناسب با اندازه صفحه نمایش ، در خروجی به کار می روند . در ادامه بیشتر با نحوه استفاده و خروجی این کلاس ها ، آشنا خواهید شد .
کد زیر ، ساختار پایه سیستم خانه بندی ( Grid ) در bootstrap را نشان می دهد . کد زیر را به دقت مرور کنید ، در ادامه به تشریح نکات آن خواهیم پرداخت :
در ابتدا یک ردیف ( عرض کلی صفحه را به وسیله یک تگ < div> به صورت <" div class = " row> ) ایجاد می کنیم . سپس نوع و تعداد ستون هایی که می خواهیم در این ردیف نمایش داده شوند را در تگ های درونی < div> اصلی و با خاصیت class برابر با " * - * - col. " تعیین می کنیم . * اول نشان دهنده نوع صفحه نمایش مورد نظر و ستاره دوم تعداد خانه هایی است که می خواهیم ستون مورد نظر از ( مجموع 12 خانه ) شامل شود . مثلا xs و عدد 4 به مرورگر می گوید که در یک صفحه نمایش موبایل و یا بزرگتر از آن ، عرض صفحه را به 4 قسمت مساوی تقسیم کرده و در هر کدام محتویات مربوطه را نمایش دهد . در مثال های زیر ، نحوه استفاده از این کلاس ها را در عمل نشان داده ایم :
در مثال زیر ، نحوه تعریف یک کلاس 3 ستونه با عرض یکسان را نشان می دهد : مثال 1 : یک ردیف 3 ستونه با خانه های مساوی :
مثال 2 : تعیین 2 ستون در یک ردیف با پهنای متفاوت : مثال : مثال زیر ، نحوه تعریف 2 ستون با پهناهای متفاوت را در یک ردیف نشان می دهد . این دو ستون در صفحات بزرگ در کنار هم و در صفحات کوچک زیر هم قرار می گیرند .