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

مثال گرید سیستم در صفحات موبایل با Bootstrap 4

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

آموزش مثال گرید سیستم در صفحات موبایل با Bootstrap 4 :

در عکس زیر، کلاس های مورد استفاده برای اندازه های مختلف عرض صفحه نمایش در Bootstrap 4 را نشان داده ایم. در این درس به آموزش کار با صفحات موبایلی (Small) و ارائه مثال های عملی گریدبندی ستون ها (Columns) در آن ها خواهیم پرداخت :

آموزش مثال گرید سیستم در صفحات موبایل با Bootstrap 4

فرض کنید در یک سطر، دو ستون (Column) داریم که می خواهیم عرض صفحه یا عنصر دربرگیرنده آن ها، در صفحات موبایل (Small) به نسبت 25 درصد به 75 درصد، بین آن ها تقسیم شود. برای موبایل ها، از کلاس col-sm-* استفاده می کنیم.

برای منظور فوق، بایستی کلاس های col-sm-3 و col-sm-9 را برای صفحات موبایل، تعیین کنیم، به صورت کد زیر :

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
            

حال بوت استرپ می گوید، بنابراین هنگامی که صفحه در اندازه small نمایش داده شد، از کلاس های فوق استفاده می کنیم تا عرض ستون ها مشخص شوند.

کد مثال عملی زیر، باعث می شود در صفحات موبایل (small) و صفحه های بزرگتر از آن (تبلت ها و کامپیوتر و لپ تاپ) ، دو ستون با عرض های 25% و 75% ایجاد شود. در صفحات موبایل های بسیار کوچک (زیر 576 پیکسل یا Extra Small) ، دو ستون با عرض 100 و بر روی هم قرار می گیرند، نه در کنار هم :

مثال 1

Lorem ipsum...

Sed ut perspiciatis...

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

دقت نمایید که مجموع اعداد ستون ها در یک سطر از 12 واحد بیشتر نشود (البته می توایند هر مقدار که نیاز دارید زیر 12 واحد استفاده کرده و اجباری از استفاده کل آن ها نیست).

مثال 2: برای ایجاد ستون هایی با عرض 33 درصد و 66 درصد، بایستی به ترتیب کلاس های col-sm-4 و col-sm-8 را به ستون ها بدهیم. همچنین برای ایجاد ستون های هم عرض مساوی 50% درصدی، بایستی کلاس Col-sm-6 را برای هریک تعیین نماییم. همانند کد مثال عملی زیر :

مثال 2


Lorem ipsum...

Sed ut perspiciatis...

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

آموزش ایجاد اتوماتیک ستون های مساوی در موبایل با Bootstrap 4:

در بوت استرپ 4، یک روش ساده جهت ایجاد ستون های هم عرض برای تمامی دستگاه ها و صفحات نمایش با اندازه های مختلف وجود دارد. کافی است عدد را از کلاس های col-sm-* حذف کرده و به هر ستون در سطر، کلاس col-sm بدهید. خود بوت استرپ به صورت اتوماتیک تعداد ستون ها را شناسایی کرده و عرض صفحه یا عنصر دربرگیرنده را به طور مساوی بین آن ها تقسیم کرده و همه را هم عرض می کند.

در صفحات موبایلی بسیار کوچک (Extra Small) ، ستون ها با عرض 100 درصد و بر روی هم، نمایش داده خواهند شد. همانند کد مثال عملی زیر :

مثال 3


1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
امتحان کنید

در درس بعدی، به آموزش ایجاد ستون های مختلف در دستگاه های متوسط مثل تبلت خواهیم پرداخت.

  • 25
  •    0
  • تاریخ ارسال :   1398/08/16

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

ارسال

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

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