قسمت سی و هفتم bootstrap : تراز بندی افقی در بوت استرپ 4

خانه » مقالات اموزشی » css » بوت استرپ » قسمت سی و هفتم bootstrap : تراز بندی افقی در بوت استرپ 4
Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت سی و هفتم bootstrap : تراز بندی افقی در بوت استرپ 4

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

2021-08-09

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

مثالی برای تراز افقی :

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

مثال زیر یک طرح ساده دو ستونی “انباشته به افقی” را نشان می دهد ، به این معنی که در همه صفحه ها 50٪/50٪ تقسیم می شود ، به جز صفحه های کوچک اضافی ، که به طور خودکار روی هم قرار می گیرد (100٪):

برای درک بهتر این موضوع قطعه کد زیر را اجرایی کنید :

نکته: اعداد در کلاس های .col-sm-* نشان می دهد که div باید چند ستون داشته باشد (تا 12). بنابراین ، .col-sm-1 شامل 1 ستون ، .col-sm-4 شامل 4 ستون ، .col-sm-6 شامل 6 ستون و … است.

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

یاداوری : با تغییر کلاس .container به .container-fluid: می توانید هر طرح با عرض ثابت را به یک طرح کامل عرض تبدیل کنید.

تراز خودکار

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

پیشنهاد میکنم برای درک کاملتر این جلسه حتما تقسیم بندی المان ها در بوت استرپ را مطالعه کنید.

اگر تمایل به یادگیری موارد بیشتر داشته باشید می توانید به سایت getbootstrap مراجعه فرمایید.

همچنین برای یادگیری سایر موارد می توانید از دوره رایگان بوت استرپ 4 استفاده کنید.

مرتضی افضلی

مرتضی افضلی

این روزها دیگر نیاز نیست کلی هزینه‌ی اجاره‌ی مغازه بدهید. با دنیای کسب‌وکار اینترنتی و دیجیتال مارکتینگ می‌توانیم کسب درامد داشته باشیم و من در مجموعه‌ی کدپز در این راه همراه شما هستم.

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

دیدگاهتان را بنویسید