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

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

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

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

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

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

در درس قبلی، یک مثال کار با گرید سیستم برای دستگاه های کوچک مثل موبایل (Small Device) را بررسی کردیم. دو ستون (Column) را در یک سطر یا Row با تگ div قرار دادیم که یکی عرض 25 درصد و دیگری عرض 75 درصد داشت، با کد زیر :

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

اما در صفحات نمایش متوسط مثل تبلت ها، حالت نمایش بهتر، اندازه های 50 درصد (مساوی) است.

نکته :

دستگاه های سایز متوسط دارای عرضی بین 768 تا 991 پیکسل هستند.

برای دستگاه های متوسط مثل تبلت ها، از کلاس های col-md-* به صورت زیر استفاده می کینم :

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

بوت استرپ با دیدن کد فوق، به خود می گوید برای دستگاه های بسیار کوچک و کوچک بایستی به دنبال کلاس col-sm-* گشته و از آن ها استفاده کنم. در سایزهای متوسط هم بایستی از کلاس های col-md-* استفاده شود.

مثال : کد مثال عملی زیر در دستگاه های کوچک موبایل دو ستون با عرض های 25 درصد و 75 درصد ایجاد کرده و در دستگاه های متوسط مثل تبلت (و سایز های بزرگ مثل لپ تاپ و کامپیوترهای رومیزی)، دو ستون با اندازه مساوی 50% تولید می کند. اما در دستگاه های موبایل بسیار کوچک (کمتر پیکسل)، دو ستون تمام عرض ( 100 درصد) شده و بر روی هم قرار می گیرند :

مثال 1

Lorem ipsum...

Sed ut perspiciatis...

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

توجه داشته باشید که در هنگام به کارگیری کلاس های گرید، مجموع اعداد یک سطر از 12 واحد بیشتر نشود. البته لزومی ندارد حتما از همه 12 واحد استفاده کرده و می توانید تعداد کمتر بر حسب نیاز به کار بگیرید.

استفاده از کلاس های گرید فقط در حالت متوسط medium:

در کد مثال زیر، ما فقط از کلاس col-md (بدون کلاس col-sm-*) استفاده کرده ایم. این بدان معناست که در صفحات اندازه متوسط مثل تبلت و صفحات بزرگتر، دو ستون دارای اندازه مساوی 50 درصد و در کنار هم باشند، زیرا خاصیت کلاس کوچکتر md به سایزهای بالاتر (xl و lg) تعمیم داده می شود.

اما برای دستگاه کوچک موبایل و دستگاه های بسیار کوچک، دو ستون به صورت تمام عرض (100 درصد) و بر روی هم قرار خواهند گرفت (حالت sm و xs) :

مثال 2

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

آموزش ایجاد خودکار Column های هم عرض در سایز medium:

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

ولی در صفحات کوچک موبایلی، با اندازه کوچکتر از 768 پیکسل، ستون ها به صورت تمام عرض (100 درصد) درآمده و بر روی هم قرار می گیرند.

مثال : در کد مثال عملی زیر، در سطر اول 2 ستون هم عرض و در سطر دوم 4 ستون هم عرض ایجاد کرده ایم. با کلاس col-md که در دستگاه های با سایز متوسط و بزرگتر، تأثیر دارد :

مثال 3


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

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

  • 184
  •    182
  • تاریخ ارسال :   1398/08/18

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

ارسال

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

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