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

آموزش گرید سیستم بوت استرپ در دستگاه های بزرگ

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

در درس قبلی یک مثال شبکه بندی (Grid) همراه با کلاس های مربوط به دستگاه های small و medium ارائه شد. در آن مثال، از دو div (ستون) استفاده شد و درصدهای دسته بندی 25%/75% را به دستگاه های کوچک، و نسبت 50%/50% را برای دستگاه های متوسط اختصاص دادیم:

                    
....
....

اما برای دستگاه های بزرگتر، نسبت تقسیم بندی 33%/66% بسیار مطلوب تر خواهد بود.

نکته:

دستگاه بزرگ دستگاهی است که صفحه ی نمایش آن دارای عرض 1200 پیکسل و یا بیشتر می باشد. برای شبکه بندی دستگاه های بزرگ از کلاس های .col-lg-* استفاده می شود.

به این صورت، اکنون قادریم که مقادیر پهنای ستون ها را به دستگاه های بزرگ اضافه نماییم:

                    
....
....

حال BootStrap اعلان می کند که: " برای سایز کوچک دنبال کلاس هایی باشید که دارای عبارت -sm- در درون خود می باشند، و برای سایز متوسط به دنبال کلاس هایی باشید که داری پیشوند -md- در درون خود هستند. برای سایزهای بزرگ نیز به دنبال کلاس هایی باشید که دارای کلمه ی -lg- در درون خود هستند".
مثال پایین منجر به تقسیم بندی صفحه ی نمایشگر در دستگاه های کوچک با نسبت 25%/75%، نسبت 50%/50% در دستگاه های متوسط، و تقسیم بندی 33%/66% در دستگاه های بزرگ می شود:

نمونه 1

Hello World!

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید
نکته:

مطمئن شوید که جمع مقادیر کلاس ها همواره 12 می باشد.

استفاده ی تنها از Large

در مثال پایین، تنها کلاس .col-lg-6 تعیین شده است (بدون در نظر گرفتن کلاس .col-md-* یا .col-sm-* ). این بدان معناست که نمایشگر دستگاه های بزرگ با نسبت 50%/50% تقسیم بندی خواهد شد. با اینوجود، برای دستگاه های متوسط و کوچک، به صورت عمودی و با پهنای 100% تقسیم بندی خواهد شد:

نمونه 2




  Bootstrap Example
  
  
  
  
  



Large Grid

The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices. On extra small devices, it will automatically stack (100%).

Resize the browser window to see the effect.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
امتحان کنید
  • 1019
  •    816
  • تاریخ ارسال :   1395/10/17

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

ارسال

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

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