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

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

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

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

مثال زیر یک طرح ساده دو ستونی “انباشته به افقی” را نشان می دهد ، به این معنی که در همه صفحه ها 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 استفاده کنید.