قسمت سی و ششم bootstrap : نحوه ی تقسیم بندی المان ها در بوت استرپ 4

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

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

شبکه بندی در بوت استرپ 4

سیستم شبکه Bootstrap اجازه می دهد تا 12 ستون در سراسر صفحه داشته باشید. اگر نمی خواهید از هر 12 ستون به صورت جداگانه استفاده کنید ، می توانید ستون ها را با هم گروه بندی کنید تا ستون های گسترده تری ایجاد کنید:

سیستم شبکه Bootstrap ریسپانسیو است و ستون ها بسته به اندازه صفحه نمایش دوباره مرتب می شوند: در یک صفحه بزرگ ممکن است با محتوای سه ستون سازماندهی شده بهتر به نظر برسد ، اما در یک صفحه کوچک بهتر است موارد محتوا به ترتیب از بالا به پایین روی هم چیده شوند.

کلاس های شبکه بندی

سیستم شبکه بندی بوت استرپ از 5 کلاس به شرح زیر تشکیل می شود :

• .col- ( دستگاه های بسیار کوچک – صفحات نمایشگر کوچکتر از 576px )
• .col-sm- ( دستگاه های کوچک – صفحات نمایشگر بزرگتر یا برابر با 576px )
• .col-md- ( دستگاه های متوسط – صفحات نمایشگر بزرگتر یا برابر با 768px )
• .col-lg- ( دستگاه های بزرگ – صفحات نمایشگر بزرگتر یا برابر با 992px )
• .col-xl- ( دستگاه های خیلی بزرگ – صفحات نمایشگر بزرگتر یا برابر با 1200px )

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

نکته: هر کلاس افزایش می یابد ، بنابراین اگر می خواهید عرضهای یکسان را برای sm و md تنظیم کنید ، فقط باید sm را مشخص کنید.

قوانین شبکه بندی

برخی از قوانین شبکه بندی در بوت استرپ 4 را بررسی می کنیم :

• ردیف ها باید در یک .container (عرض ثابت) یا .container-fluid (تمام عرض) قرار بگیرند تا تراز و چیدمان مناسب انجام شود.
• برای ایجاد گروه های افقی از ستون ها از کلاس .rows استفاده کنید.
• محتوا باید در داخل ستون ها قرار گیرد و فقط ستون ها ممکن است به ترتیب سطرهای کوچک باشند.
• کلاسهای از پیش تعریف شده مانند .row و .col-sm-4 برای ایجاد سریع طرح بندی شبکه در دسترس هستند..
• .
• ستون های شبکه با تعیین تعداد 12 ستون موجود که می خواهید بین آنها ایجاد شود ایجاد می شوند. به عنوان مثال ، سه ستون مساوی از سه .col-sm-4 استفاده می کنند.
• عرض ستونها برحسب درصد است ، بنابراین نسبت به عنصر اصلی خود همیشه سیال و اندازه هستند.
• بزرگترین تفاوت بین بوت استرپ 3 و بوت استرپ 4 این است که در بوت استرپ 4 به جای float از flexbox استفاده می شود. یک مزیت بزرگ استفاده کردن از flexbox این است که ستون های شبکه بدون عرض مشخص به طور خودکار به عنوان “ستون های با عرض یکسان” (و ارتفاع مساوی) طرح بندی می شوند. مثال: سه عنصر با .col-sm هر کدام به طور خودکار 33.33٪ عرض از نقطه شکست کوچک به بالا خواهند داشت.

برای دریافت اطلاعات بیشتر در رابطه با flexbox می توانید به آموزش flexbox در بوت استرپ مراجعه فرمایید.

طرح پایه شبکه بندی

قطعه کد زیر یک طرح پایه از شبکه بندی در بوت استرپ 4 است ، برای درک بهتر تمام قوانین و موارد ذکر شده به ساختار کد توجه کنید :

مثال اول : یک ردیف با کلاس .row بسازید . سپس ، تعداد ستون های مورد نظر را اضافه کنید (برچسب ها با کلاس های .col-*-* مناسب).ستاره اول (*) نشان دهنده سایز مناسب دستگاه ریسپانسیو است: sm ، md ، lg یا xl ، در حالی که ستاره دوم یک عدد را نشان می دهد ، مجموع اعداد ستون باید 12 باشد .

مثلا شما قصد دارید از 3 ردیف برای دستگاه های متوسط استفاده کنید. باید از سه کلاس .com-md-4 استفاده کنید.

مثال دوم: به جای افزودن یک عدد به هر ستون ، اجازه دهید بوت استرپ طرح را مدیریت کند ، تا ستونهایی با عرض یکسان ایجاد شود: دو عنصر “col” = 50٪ عرض به هر ستون. سه ستون = 33.33 width عرض به هر ستون. چهار ستون = 25٪ عرض و غیره. همچنین می توانید از .col-sm | md | lg | xl برای ریپانسیو کردن ستون ها استفاده کنید.

عملکرد شبکه

جدول زیر نمایشی از عملکرد کامل شبکه بندی در بوت استرپ 4 است :

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

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