مفهوم breakpoint در بوت استرپ 4

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

مفهوم breakpoint در بوت استرپ 4
Article مجازی

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

از آنجایی که بوت استرپ یک تکنولوژی mobile first است یعنی اولویت نمایش صحیح صفحات در گوشی های تلفن همراه به عنوان اصلی ترین صفحه نمایش کاربران برای بازدید در صفحات وب است. و همچنین واکنش گراست یعنی صفحات وب باید در نمایشگر های متفاوت به اندازه های متفاوت به درستی نمایش داده شوند. لذا در بوت استرپ چندین محدوده بر اساس اندازه عرض صفحات نمایش تعریف شده است، طوری که رفتار عناصر و نحوه نمایش آنها در هر محدوده متفاوت است تا صفحه به درستی نمایش داده شود. این محدوده ها (صفحات نمایش) عبارتند از:

  • Extra small device ها یا صفحات نمایش خیلی کوچک که اندازه عرض نمایشگر در آنها کمتر از 576px می باشد.
  • Small device ها یا صفحات نمایش کوچک مانند گوشی های هوشمند که حداقل عرض صفحه نمایش آنها 576px و حداکثر 98px می باشد.
  • Medium device ها یا صفحات نمایش متوسط مانند تپلت ها که حداقل عرض صفحه نمایش آنها 768px و حداکثر 98px می باشد.
  • Large device ها یا صفحات نمایش بزرگ مانند مانیتور هایی که حداقل عرض صفحه نمایش آنها 992px و حداکثر 98px می باشد.

Extra large device ها یا صفحات نمایش خیلی بزرگ که حداقل عرض صفحه نمایش در آنها 1200px می باشد.

  نام اختصاری Min-width Max-width
Extra small device xs - 575.98
Small device sm 576 767.98
Medium device md 768 991.98
Large device lg 992 1199.98
Extra large device xl 1200 -

به مرز این محدوده های صفحات اصطلاحا نقاط شکست یا breakpoint می گویند. به عبارتی اگر نمایشگری داریم که اندازه عرض صفحه نمایش آن 800px باشد، در محدوده medium-device یا تپلت ها می باشد.

شما حتی می توانید با کم کردن عرض مرورگر هم در مانیتور رفتار صفحه در نمایشگرهای مختلف را ببینید. یک سایتی که با بوت استرپ طراحی شده را باز کنید (به شرطی که سایت بصورت استاندارد طراحی شده باشد). حال به کمک ماوس عرض مروگر را به آرامی کم کنید. به محض اینکه عرض مرورگر به مرز های نقاط شکست برسد نحوه نمایش عناصر روی صفحه تغییر می کند.

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

بوت استرپ به کمک media-query قوانین css در این محدوده ها را کنترل می کند. درباره media-query ها در این مقاله صحبت کرده ایم. به عبارتی media-query ها این امکان را می دهند که در css مشخص کنیم یک قانون در چه صفحه نمایشی اعمال شود.

به سه حالت مختلف در بوت استرپ قوانین css نوشته می شوند.

الف: حالتی که قوانین روی نمایشگر های با حداقل عرض تعیین شده اعمال می شوند.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

ب: حالتی که قوانین روی نمایشگر های حداکثر عرض تعیین شده اعمال می شوند.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

ج: حالتی که قوانین صرفا روی نمایشگر در محدوده خاص اعمال می شوند.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

 

 

محتوا
  • - مفهوم breakpoint در بوت استرپ 4

  • مفهوم breakpoint در بوت استرپ 4

توسعه وب / Bootstrap