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

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

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

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

                    
....
....

اما بر روی دستگاه های متوسط (medium) ، این دسته بندی به صورت تقسیم 50%/50% می باشد که بسیار مطلوب تر است.

نکته:

دستگاه های متوسط(medium) دستگاه هایی هستند که دارای پهنای 992 تا 1199 پیکسل می باشند. برای دستگاه های متوسط از کلاس .col-md-*استفاده می شود.

                    
....
....

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

نمونه 1

Hello World!

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

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

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

نمونه 2

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

درس بعدی، چگونگی افزودن یک درصد تقسیم بندی متفاوت برای دستگاه های بزرگ را نشان می دهد.

  • 796
  •    842
  • تاریخ ارسال :   1395/10/17

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

ارسال

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

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