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

خانه » مقالات اموزشی » قسمت سی و ششم 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-03

Work time-rafiki

زمان مطالعه:

5 دقیقه

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

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

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

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

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

سیستم شبکه 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 است :

خیلی کوچک (<576px) کوچک (>=576px) متوسط (>=768px)بزرگ (>=992px) خیلی بزرگ (>=1200px)
پیشوند کلاس.col- .col-sm- .col-md-.col-xl-.col-xl-
رفتار شبکه ای در هر دستگاهی افقی برای شروع جمع شد ، افقی در بالای نقاط شکست برای شروع جمع شد ، افقی در بالای نقاط شکستبرای شروع جمع شد ، افقی در بالای نقاط شکست برای شروع جمع شد ، افقی در بالای نقاط شکست
عرض ظرف هیچکدام (خودکار) 540px 720px 960px 1140px
مناسب برایتلفن های افقیتلفن های عمودیتبلتلب تابلب تاب و دسکتاپ
# ستون1212121212
عرض ناودان30px (15pxدر هر طرف یک ستون) 30px (15pxدر هر طرف یک ستون) 30px (15pxدر هر طرف یک ستون) 30px (15pxدر هر طرف یک ستون) 30px (15pxدر هر طرف یک ستون)
قابل ترددبلهبله بله بلهبله
جبران می شود بله بله بله بله بله
سفارش ستون بله بله بله بله بله

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

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

مرتضی افضلی

مرتضی افضلی

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

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

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