آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

سیستم BootStrap Grid-شبکه بندی بوتسترپ

دوره های مرتبط با این مقاله

سیستمِ BootStrap Grid (شبکه بندیِ بوتسترپ)

سیستمِ Grid (شبکه بندی) موجب می شود که عرضِ صفحه به میزانِ حداکثر 12 ستون افزایش یابد. اگر خواستارِ استفاده از تمامیِ این 12 ستون نمی باشید، می توانید ستون ها را با هم ترکیب کرده و ستون های گسترده تری را به دست آورید:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

سیستمِ BootStrap Grid به صورت Responsive یا واکنش گرا بوده و در آن ستون ها به صورت خودکار و بسته به سایزِ صفحه نمایشگر، تغییر اندازه خواهند داد.

کلاس های Grid

سیستمِ BootStrap Grid دارای چهار کلاس می باشد:

  • xs برای موبایل
  • sm برای تبلت
  • md برای رایانه
  • lg برای رایانه های بزرگتر

برای طراحیِ Layout های انعطاف پذیر و داینامیک، می توان کلاس های بالا را با هم ترکیب نمود.

ساختار اصلی BootStrap Grid

کد پایین ساختار اولیه و پایه ی سیستم BootStrap Grid را نشان می دهد:

   
                          
...

قبل از هر کار یک ردیف ایجاد کنید:

سپس، با استفاده از تگِ.col-*-* تعداد ستون های مورد نظر را لحاظ نمایید. توجه داشته باشید که ستون هایی که به هر سطر اضافه می شوند، همیشه باید 12 عدد باشند.
در بخش بعدی، مثال هایی از Layout اصلی BootStrap Grid فراهم شده است.

سه ستون برابر (Three Equal Columns)

 .col-sm-4
 .col-sm-4
 .col-sm-4
                    

مثال پایین چگونگی دستیابی به یک ستون با پهنای سه ستون برابر ، که از تبلت ها تا رایانه های بزرگ درجه بندی می شوند، را نشان می دهد. ستون ها در گوشی های موبایل به طور اتوماتیک دسته بندی می شوند.

   
                    
.col-sm-4
.col-sm-4
.col-sm-4

دو ستون نابرابر (Two Unequal Columns)

.col-sm-4
.col-sm-8

                    

مثال پایین چگونگی دستیابی به دو ستون با پهنای متفاوت که از تبلت ها تا دسکتاپ های بزرگ درجه بندی می شوند، را نشان می دهد:

  
                    
.col-sm-4
.col-sm-8
  • 2944
  •    852
  • تاریخ ارسال :   1395/10/03

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .