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

آموزش کار با سیستم خانه بندی 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 ستون با پهناهای متفاوت را در یک ردیف نشان می دهد .
این دو ستون در صفحات بزرگ در کنار هم و در صفحات کوچک زیر هم قرار می گیرند .
کد مثال عملی
کد
                                    
خروجی
© Copyright 2007 - 2021 Developer 1 ®
Designed & Owned By Mehrdad Fattahi
Pishgaman Toseye Web Company
استفاده از مطالب سايت با ذکر آدرس کامل و نام سايت بلامانع است .
این سایت در سامانه وزارت فرهنگ و ارشاد اسلامی ثبت شده است .