آموزش کامل نقاط شکست در بوت استرپ (Breakpoint)

0 دیدگاه

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

مفاهیم پایه‌ای Breakpoint در بوت استرپ

در بوت استرپ، از نقاط شکست برای طراحی واکنش گرا استفاده می‌شود. این Breakpoint ها به ما اجازه می‌دهند تا چیدمان و استایل عناصر را برای اندازه‌ها و دستگاه‌های خاص تنظیم کنیم.
بوت استرپ از Media Queries در CSS برای کنترل نقاط شکست استفاده می‌کند. بیشتر این مدیا کوئری ها بر پایه ویژگی min-width نوشته شده‌اند، یعنی زمانی که عرض صفحه به یک مقدار مشخص رسید یا از آن بیشتر شد، یک سری استایل خاص اعمال شود.
بوت استرپ به صورت Mobile First طراحی شده، یعنی ابتدا طراحی برای دستگاه‌های موبایل صورت می‌گیرد و سپس لایه‌های طراحی برای دستگاه‌های بزرگ‌تر اضافه می‌شود. این رویکرد به بهینه‌سازی زمان رندر و تجربه کاربری بهتر کمک می‌کند.

انواع نقاط شکست در بوت استرپ

بوت استرپ شش Breakpoint پیش‌فرض دارد که با نام سطوح شبکه ای (Grid Tiers) شناخته می‌شوند. اگر از فایل‌های Sass بوت استرپ استفاده کنید، می‌توانید این مقادیر را شخصی‌سازی کنید.

نوع Breakpoint	پیشوند کلاس (Class Infix)	ابعاد
بسیار کوچک (Extra small)	ندارد	کمتر از 576px
کوچک (Small)	`sm`	576px و بیشتر
متوسط (Medium)	`md`	768px و بیشتر
بزرگ (Large)	`lg`	992px و بیشتر
بسیار بزرگ (Extra large)	`xl`	1200px و بیشتر
فوق‌العاده بزرگ (Extra extra large)	`xxl`	1400px و بیشتر

این نقاط شکست اغلب دستگاه‌های متداول را پوشش می‌دهند و می‌توان آن‌ها را با Sass تغییر داد.

$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1400px
  );

$grid-breakpoints: (

xs: 0,

sm: 576px,

md: 768px,

lg: 992px,

xl: 1200px,

xxl: 1400px

);

Media Query در بوت استرپ

بوت استرپ با رویکرد Mobile First توسعه داده شده، بنابراین Media Query ها نقش مهمی در طراحی رابط واکنش گرا دارند. با استفاده از min-width و max-width می‌توان رفتار چیدمان را کنترل کرد.

min-width در بوت استرپ

ویژگی min-width مشخص می‌کند که یک سری استایل، فقط برای دستگاه‌هایی اعمال شود که عرض آن‌ها از یک مقدار خاص بیشتر باشد.

  @include media-breakpoint-up(sm) { ... }

1	@include media-breakpoint-up(sm) { ... }

کد بالا به این معناست که استایل مورد نظر برای دستگاه‌هایی با عرض 576 پیکسل و بیشتر (مثلاً موبایل‌هایی با حالت افقی) اعمال خواهد شد.

مثال: اگر بخواهیم یک div را در دستگاه‌هایی با عرض کمتر از 768px پنهان کنیم، از این ویژگی استفاده می‌کنیم.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Breakpoint</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
  <style>
  .custom-class {
    display: none;
  }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  @media (min-width: 768px) {
    .custom-class {
      display: block;
    }
  }
  </style>
  </head>
  <body>
    <h5>This block is visible on all devices</h5>
    <div class="container-fluid mt-2 ">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div><br>
    <h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>
    <div class="container-fluid mt-2 custom-class">
      <div class="row">
        <div class="col-md-6 bg-warning p-3">
          md-6 warning
        </div>
      </div>
    </div>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Breakpoint</title>

<style>

.custom-class {

display: none;

}

@media (min-width: 768px) {

.custom-class {

display: block;

}

@media (min-width: 768px) {

.custom-class {

display: block;

}

</style>

</head>

<body>

<h5>This block is visible on all devices</h5>

md-6 warning

</div>

</div><br>

<h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>

md-6 warning

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید و نتیجه را مشاهده کنید.

آنلاین امتحان کنید

max-width در بوت استرپ

ویژگی max-width مشخص می‌کند که استایل فقط برای دستگاه‌هایی اعمال شود که عرض آن‌ها کمتر از یک مقدار خاص باشد.

  @include media-breakpoint-down(xl) { ... }

1	@include media-breakpoint-down(xl) { ... }

در این حالت، استایل فقط روی دستگاه‌هایی با عرض کمتر از 1200px (یعنی کمتر از Extra Large) اعمال می‌شود.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Breakpoint</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"> </script>
<style>
.custom-class {
  display: none;
}
@media (max-width: 767.98px) {
  .custom-class {
    display: block;
  }
}
</style>
</head>
<body>

  <h5>This block visible on all devices</h5>
  <div class="container-fluid mt-2">
    <div class="row">
      <div class="col-xxl-3 bg-primary text-black p-3">
        xxl-3 primary
      </div>
    </div>
  </div>
  <h5>This block not visible all devices larger than sm</h5>
  <div class="container-fluid mt-2 custom-class">
    <div class="row">
      <div class="col-lg-6  bg-warning text-black p-3">
        lg-6 warning
      </div>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Breakpoint</title>

<style>

.custom-class {

display: none;

}

@media (max-width: 767.98px) {

.custom-class {

display: block;

}

</style>

</head>

<body>

<h5>This block visible on all devices</h5>

xxl-3 primary

</div>

<h5>This block not visible all devices larger than sm</h5>

lg-6 warning

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید و نتیجه را در ابعاد مختلف مشاهده کنید.

آنلاین امتحان کنید

Breakpoint تکی در بوت استرپ

در این روش، یک بازه مشخص از اندازه صفحه را هدف قرار می‌دهیم؛ یعنی هم min-width و هم max-width را مشخص می‌کنیم.

  @include media-breakpoint-only(md) { ... }

1	@include media-breakpoint-only(md) { ... }

این کد باعث می‌شود استایل فقط برای دستگاه‌هایی با عرض بین 768px تا 991.98px (مانند تبلت‌ها و برخی لپ‌تاپ‌ها) اعمال شود.

Between Breakpoints در بوت استرپ

در این حالت، می‌توان چندین Breakpoint را هم‌زمان هدف قرار داد.

@include media-breakpoint-between(md, xl) { ... }

1	@include media-breakpoint-between(md, xl) { ... }

کد بالا معادل مدیا کوئری زیر است:

@media (min-width: 892px) and (max-width: 1278px) { ... }

1	@media (min-width: 892px) and (max-width: 1278px) { ... }

به این معنا که استایل مربوطه از دستگاه‌های با عرض متوسط (مانند تبلت‌ها) تا دستگاه‌های بسیار بزرگ (مانند مانیتورهای بزرگ) اعمال می‌شود.

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

پکیج صفر تا صد آموزش سئو و بهینه سازی بصورت عملی

انتشار: ۲۳ اردیبهشت ۱۴۰۴

آموزش کامل نقاط شکست در بوت استرپ (Breakpoint)

مفاهیم پایه‌ای Breakpoint در بوت استرپ

انواع نقاط شکست در بوت استرپ

Media Query در بوت استرپ

min-width در بوت استرپ

max-width در بوت استرپ

Breakpoint تکی در بوت استرپ

Between Breakpoints در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط