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

آموزش ایجاد گرید تمام عرض به افقی در Bootstrap 4

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

آموزش ایجاد گرید تمام عرض (Stacked) به افقی در Bootstrap 4:

در این درس، یک جدول گرید سیستم (Grid System) ساده ایجاد کرده ایم، که ستون های آن در صفحات موبایل بسیار کوچک، به صورت تمام عرض (Stacked) بر روی هم قرار می گیرند، ولی در صفحات نمایش بزرگتر به صورت افقی در آمده و در یک سطر کنار هم تنظیم می شوند.

به این روش ساخت گرید تمام عرض به افقی (Stacked to Horizontal) می گویند و هدف اینه که بهترین نمایش را در صفحات خیلی کوچک موبایلی داشته باشیم، ولی در صفحات بزرگتر از عرض صفحه بهتر استفاده کنیم.

کد مثال عملی زیر، یک مثال ساده از گرید تمام عرض به افقی 2 ستونه را نشان می دهد که در تمامی صفحات نمایش، هر ستون دارای 50 درصد عرض صفحه یا عنصر دربرگیرنده است، به جز در صفحات موبایلی بسیار کوچک (xs) که با عرض 100 درصد، بر روی هم قرار می گیرند.

آموزش ایجاد گرید تمام عرض (Stacked) به افقی در Bootstrap 4

مثال 1

Lorem ipsum...

Sed ut perspiciatis...

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

عدد استفاده شده در کلاس col-sm-*، تعیین می کند که هر ستون بایستی چند واحد از 12 واحد ممکن را اشغال کند. برای مثال col-sm-1، یک واحد، کلاس col-sm-4، تعداد 4 واحد و کلاس col-sm-6، شش واحد از 12 واحد عرض را در بر خواهند گرفت و ... .

نکته :

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

راهنمایی:

می توانید هر الگو یا Layout با عرضی ثابت را به الگو تمام عرض full-width، که از تمامی عرض صفحه یا عنصر دربرگیرنده آن، استفاده می کند، تبدیل نمایید. برای این منظور بایستی از کلاس container-fluid به جای کلاس container استفاده کنید.

مثال : در کد مثال عملی زیر، یک گرید سیستم تمام عرض در صفحه ایجاد کرده ایم :

مثال 2

Lorem ipsum...

Sed ut perspiciatis...

امتحان کنید

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

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

در این صورت بوت استرپ 4، خودش به صورت اتوماتیک عرض سطر را بین تعداد ستون ها تقسیم کرده و ستون هایی با سایز یکسان در همه حالت، ایجاد می کند. پارامتر size در کلاس فوق، تعیین کننده سایز هدف صفحه نمایش است که می تواند یکی از مقادیر sm، md، lg یا xl را داشته باشد. به کار بردن مقدار sm، باعث تعیین وضعیت یکسان در سایر اندازه ها می شود و دیگر نیازی نیست برای آن ها هم به صورت جدا، کلاس تعیین نمایید.

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

مثال 3


1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
امتحان کنید
  • 22
  •    0
  • تاریخ ارسال :   1398/08/16

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

ارسال

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

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