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

مثال گرید سیستم در صفحات موبایلی بسیار کوچک بوت استرپ

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

مثال آموزش ایجاد گرید سیستم در صفحات موبایل بسیار کوچک Extra Small:

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

مثال آموزش ایجاد گرید سیستم در صفحات موبایل بسیار کوچک Extra Small

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

بایستی کلاس های col-3 و Col-9 را همانند مثال عملی زیر به هر ستون اعمال کنیم :

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

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

مثال 1

Lorem ipsum...

Sed ut perspiciatis...

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

دقت داشته باشید که مجموع اعداد تعیین شده در ستون ها از 12 واحد بیشتر نشود (ولی نیازی نیست از تمامی 12 واحد نیز استفاده کرده و به هر میزان که لازم دارید، اختصاص دهید)

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

مثال 2


Lorem ipsum...

Sed ut perspiciatis...

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

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

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

Bootstrap 4 خودش به صورت اتوماتیک عرض کل صفحه یا عنصر دربرگیرنده را بر حسب مقدار ستون ها تقسیم کرده و ستون هایی هم عرض ایجاد می کند.

مثال : در کد مثال عملی زیر، ابتدا یک سطر با دو ستون مساوی و سپس سطر دیگری با 4 ستون مساوی را ایجاد کرده ایم :

مثال 3


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

در درس بعدی، به آموزش ایجاد خانه ها (ستون ها) با عرض یکسان یا متفاوت در موبایل های بزرگ، خواهیم پرداخت.

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

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

ارسال

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

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