خانه تالار گفتگو دانلود خبرنامه سفارش سایت درباره ما ارتباط با ما حمایت از ما تبلیغات

آموزش کار با سیستم خانه بندی Grid در Bootstrap

آموزش مقدماتی کار با سیستم خانه بندی ( Grid ) در bootstrap

در سیستم خانه بندی bootstrap ، عرض صفحه به 12 خانه مساوی ( Column ) تقسیم می شود . شما می توانید از میزان پهنای این خانه ها برای قرار دادن محتویات مورد نظر خود استفاده نموده و یا با گروه کردن ( Combine ) آنها ، خانه های پهن تری ایجاد کنید .
همانطور که در مثال زیر نشان داده می شود ، ردیف اول دارای 12 ستون است . در این حالت می توانید محتوبات مورد نظر خود را در هر یک این خانه ها قرار دهید ، اما اگر به فضای بیشتری نیاز دارید ، با گروه کردن خانه ها ( که در ادامه به آموزش آن خواهیم پرداخت ) به صورت 2 ، 3 ، 4 ، 5 ، 6 ، 8 ، 10 و یا 12 تایی ، ستون های پهن تری ساخته و استفاده کنید .
آموزش مقدماتی کار با سیستم خانه بندی ( Grid ) در bootstrap
سیستم خانه بندی ( Grid ) در bootstrap کاملا واکنش گرا ( Responsive ) بوده و ستون ها می توانند ، نحوه قرار گیری و خروجی خود را بر حسب سایز صفحه تغییر دهند .
برای مثال فرض کنید که 3 ستون مساوی ( span4 ) در عرض صفحه دارید . در یک صفحه نمایش بزرگ ، این 3 ستون در کنار هم و در عرض صفحه قرار خواهند گرفت . اما در یک صفحه نمایش کوجک مثل موبایل ، هر یک از ستون ها ( span4 ) به تنهایی در عرض صفحه نمایش داده شده و دو ستون دیگر به ترتیب زیر هم قرار گرفته و آنها نیز کل عرض صفحه را می پوشانند .
تصویر زیر نحوه نمایش ستون ها در سیستم خانه بندی bootstrap را نشان می دهد :
آموزش مقدماتی کار با سیستم خانه بندی ( Grid ) در bootstrap
به این صورت می توانید محتویات خود را فارغ از اینکه ، از قبل بدانید بر روی چه اندازه صفحه نمایشی قرار است نمایش داده شوند ، تنظیم کنید .
نکته :

حتما به خاطر داشته باشید که مجموع ستون ها در عرض صفحه ، نبایستی از عدد 12 بیشتر شود .


کلاس های سیستم خانه بندی ( Grid ) در bootstrap

bootstrap دارای 4 کلاس ( بر حسب سایز صفحه و نوع دستگاه نمایش دهنده محتویات ) برای قالب بندی ستون ها به شرح زیر است :

  • کلاس xs که برای صفحات کوچک مثل موبایل استفاده می شود .
  • کلاس sm که برای صفحات متوسط مثل تبلت ها به کار می رود .
  • کلاس md که برای صفحات نمایش معمولی مثل لپ تاپ ها یا مانیتورها تعیین شده است .
  • کلاس lg که برای دستگاه های بزرگ و wide مناسب می باشند .
هر یک از کلاس های فوق ، هنگامی که در یک عنصر تعیین شوند ، متناسب با اندازه صفحه نمایش ، در خروجی به کار می روند . در ادامه بیشتر با نحوه استفاده و خروجی این کلاس ها ، آشنا خواهید شد .
نکته مهم :

اگر یک Grid را با کلاس کوچک تر ، مثل xs یا sm تعریف کنیم ، در هنگام نمایش در یک صفحه بزرگ ، خانه ها به صورت هوشمند و واکنش گرا بزرگ شده و خود را با صفحه متناسب می کنند .
به عبارت دیگر ، کلاس های xs یا sm می توانند نقش کلاس های md و lg را بازی کنند . اما برعکس این عمل رخ نمی دهد . یعنی اگر کلاس ، md باشد ، آنگاه در یک صفحه موبایل به صورت نا متناسب نمایش داده خواهد شد .


ساختار پایه یک خانه ( Grid ) در bootstrap

کد زیر ، ساختار پایه سیستم خانه بندی ( Grid ) در bootstrap را نشان می دهد . کد زیر را به دقت مرور کنید ، در ادامه به تشریح نکات آن خواهیم پرداخت :
کد مثال عملی
کد

                                    
در ابتدا یک ردیف ( عرض کلی صفحه را به وسیله یک تگ < div> به صورت <" div class = " row> ) ایجاد می کنیم . سپس نوع و تعداد ستون هایی که می خواهیم در این ردیف نمایش داده شوند را در تگ های درونی < div> اصلی و با خاصیت class برابر با " * - * - col. " تعیین می کنیم .
* اول نشان دهنده نوع صفحه نمایش مورد نظر و ستاره دوم تعداد خانه هایی است که می خواهیم ستون مورد نظر از ( مجموع 12 خانه ) شامل شود . مثلا xs و عدد 4 به مرورگر می گوید که در یک صفحه نمایش موبایل و یا بزرگتر از آن ، عرض صفحه را به 4 قسمت مساوی تقسیم کرده و در هر کدام محتویات مربوطه را نمایش دهد .
در مثال های زیر ، نحوه استفاده از این کلاس ها را در عمل نشان داده ایم :
در مثال زیر ، نحوه تعریف یک کلاس 3 ستونه با عرض یکسان را نشان می دهد :
مثال 1 : یک ردیف 3 ستونه با خانه های مساوی :
نکته :

همانطور که قبلا هم گفته شده و در این مثال مشاهده می شود ، چون کلاس تعیین شده از نوع sm می باشد ، این جدول به صورت واکنش گرا ، برای صفحات بزرگ تر ، خود را بزرگ کرده و 3 ستون را در کنار هم قرار می دهد . اما در صفحات کوچک موبایل ، ستون ها به ترتیب و زیر یکدیگر جای گرفته ، تا بهتر نمایش داده شوند . برای مشاهده این نوع عمکلرد ، کافی است عرض مرورگر خود را به اندازه یک صفحه موبایل کاهش دهید ، تا نحوه تغییر و واکنش گرایی خانه ها را ببینید :


کد مثال عملی
کد
                                    
خروجی
مثال 2 : تعیین 2 ستون در یک ردیف با پهنای متفاوت :
مثال : مثال زیر ، نحوه تعریف 2 ستون با پهناهای متفاوت را در یک ردیف نشان می دهد .
این دو ستون در صفحات بزرگ در کنار هم و در صفحات کوچک زیر هم قرار می گیرند .
کد مثال عملی
کد
                                    
خروجی