آموزش فاصله در بوت استرپ (spacing)

0 دیدگاه

در این بخش، کلاس های کاربردی (Utility Classes) فریم ورک بوت استرپ برای مدیریت فضاهای خالی بررسی می‌شوند.

بوت استرپ مجموعه‌ای از کلاس های آماده برای تنظیم حاشیه (margin)، فاصله داخلی (padding) و گپ (gap) ارائه می‌دهد. با استفاده از این کلاس ها، طراحان می‌توانند ظاهر عناصر را در صفحات وب به‌راحتی تغییر دهند. این کلاس ها با تمام نقاط شکست (breakpoints) در طراحی واکنش گرا سازگار هستند و در اندازه های مختلف صفحه عملکرد درستی دارند.

جدول زیر، نقاط شکست مختلف را همراه با حداقل عرض آن‌ها نمایش می‌دهد:

نقطه شکست	حداقل عرض
xs	بدون محدودیت
sm	576 پیکسل و بیشتر
md	768 پیکسل و بیشتر
lg	992 پیکسل و بیشتر
xl	1200 پیکسل و بیشتر
xxl	1400 پیکسل و بیشتر

نحوه نام‌گذاری کلاس ها

برای نام‌گذاری کلاس های فاصله دهی در بوت استرپ، الگوی مشخصی وجود دارد که به نوع breakpoint بستگی دارد:

نقطه شکست	الگوی نام‌گذاری
xs	`{property}{sides}-{size}`
sm تا xxl	`{property}{sides}-{breakpoint}-{size}`

در این ساختار، مقدار property نشان می‌دهد که کلاس مربوط به کدام نوع فضای خالی است:

property	نوع فضای خالی
`m`	margin (حاشیه خارجی)
`p`	padding (فاصله داخلی)

در ساختار نام‌گذاری کلاس‌های فاصله‌دهی، بخش sides مشخص می‌کند که حاشیه یا فاصله داخلی روی کدام سمت از عنصر اعمال می‌شود. مقادیر قابل استفاده برای sides عبارت‌اند از:

sides	توضیح
`t`	اعمال بر بالای عنصر (margin-top یا padding-top)
`b`	اعمال بر پایین عنصر (margin-bottom یا padding-bottom)
`s`	اعمال بر سمت چپ عنصر (margin-left یا padding-left)
`e`	اعمال بر سمت راست عنصر (margin-right یا padding-right)
`x`	اعمال همزمان بر چپ و راست (margin-left و margin-right یا padding-left و padding-right)
`y`	اعمال همزمان بر بالا و پایین (margin-top و margin-bottom یا padding-top و padding-bottom)
بدون مقدار (خالی)	اعمال بر همه جهات (چهار سمت) به‌صورت یکسان

همچنین بخش size در کلاس، میزان فاصله‌ای را مشخص می‌کند که باید اعمال شود. مقادیر قابل قبول برای size شامل موارد زیر است:

size	مقدار فاصله
`0`	مقدار صفر (بدون فاصله)
`1`	معادل 0.25 رِم (rem)
`2`	معادل 0.5 رِم (rem)
`3`	معادل 1 رِم (rem)
`4`	معادل 1.5 رِم (rem)
`5`	معادل 3 رِم (rem)
`auto`	فقط برای margin – مقدار خودکار (auto)

نکته: اگر به اندازه های بیشتری نیاز دارید، می‌توانید آن‌ها را با افزودن مقادیر دلخواه به متغیر Sass به نام $spacers تعریف کنید.

در بخش بعد، یک نمونه عملی از نحوه استفاده از کلاس‌های حاشیه را بررسی می‌کنیم تا نحوه عملکرد آن‌ها در صفحه بهتر مشخص شود:

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-4">Spacing margin utilities</h4>
        <p><u>Set the spacing (margin) of an element with the {property}{sides}-{breakpoint}-{size} classes.</u></p>
        <div class="mt-4 bg-info">Only top margin (1.5rem)</div>
        <div class="mb-5 bg-light">Only bottom margin (1rem)</div>
        <div class="ms-5 bg-warning">Only left margin (3rem)</div>
        <div class="me-5 bg-warning">Only right margin (3rem)</div>
        <div class="mx-5 text-bg-secondary">Both left and right margins (3rem)</div>
        <div class="my-5 bg-primary">Both top and bottom margins (3rem)</div>
      </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

<h4 class="display-4">Spacing margin utilities</h4>

<p><u>Set the spacing (margin) of an element with the {property}{sides}-{breakpoint}-{size} classes.</u></p>

<div class="mt-4 bg-info">Only top margin (1.5rem)</div>

<div class="mb-5 bg-light">Only bottom margin (1rem)</div>

<div class="ms-5 bg-warning">Only left margin (3rem)</div>

<div class="me-5 bg-warning">Only right margin (3rem)</div>

<div class="mx-5 text-bg-secondary">Both left and right margins (3rem)</div>

<div class="my-5 bg-primary">Both top and bottom margins (3rem)</div>

</div>

</body>

</html>

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

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

در ادامه، یک مثال کاربردی از کلاس های فاصله داخلی (Padding) را بررسی می کنیم:

<!DOCTYPE html>
<html>
   <head>
       <title>Bootstrap - Spacing</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>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-4">Spacing padding utilities</h4>
        <p><u>Set the spacing (padding) of an element with the {property){sides}-{breakpoint}-{size} classes.</u></p>
        <div class="pt-4 bg-info">Only top padding (1.5rem)</div>
        <div class="pb-5 text-bg-success">Only bottom padding (1rem)</div>
        <div class="ps-5 bg-warning">Only left padding (3rem)</div>
        <div class="pe-5 text-bg-danger">Only right padding (3rem)</div>
        <div class="px-5 text-bg-secondary">Both left and right padding (3rem)</div>
        <div class="py-5 text-bg-primary">Both top and bottom padding (3rem)</div>
      </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

<h4 class="display-4">Spacing padding utilities</h4>

<p><u>Set the spacing (padding) of an element with the {property){sides}-{breakpoint}-{size} classes.</u></p>

<div class="pt-4 bg-info">Only top padding (1.5rem)</div>

<div class="pb-5 text-bg-success">Only bottom padding (1rem)</div>

<div class="ps-5 bg-warning">Only left padding (3rem)</div>

<div class="pe-5 text-bg-danger">Only right padding (3rem)</div>

<div class="px-5 text-bg-secondary">Both left and right padding (3rem)</div>

<div class="py-5 text-bg-primary">Both top and bottom padding (3rem)</div>

</div>

</body>

</html>

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

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

وسط چین افقی (Horizontal Centering)

برای وسط چین کردن افقی محتوایی که عرض ثابتی دارد (و به صورت بلاک نمایش داده می شود)، بوت استرپ کلاس .mx-auto را در اختیار شما قرار می دهد.

در ادامه، یک مثال از وسط چین کردن افقی در بوت استرپ را بررسی می کنیم:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap - Spacing</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>
   </head>
   <body>
      <div class="container mt-3">
        <h4 class="display-5">Horizontal centering</h4><br>
        <div class="mx-auto p-2 text-bg-success" style="width: 200px;">
          Horizontally centered
        </div>
      </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

<h4 class="display-5">Horizontal centering</h4><br>

Horizontally centered

</div>

</body>

</html>

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

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

در حالت پیش فرض، می توان در CSS از مقادیر منفی برای حاشیه (margin) استفاده کرد. این ویژگی امکان می دهد عناصر به سمت بالا، چپ، راست یا پایین “بیرون زده” شوند و به جای فاصله گرفتن، به عناصر دیگر نزدیک تر شوند یا روی آن ها قرار بگیرند.
اما توجه داشته باشید که استفاده از مقادیر منفی برای فاصله داخلی (padding) مجاز نیست، زیرا منطق ساختاری آن اجازه نمی دهد.
در بوت استرپ، اگر بخواهید استفاده از کلاس های دارای margin منفی را فعال کنید، باید متغیر $enable-negative-margins را در فایل Sass روی مقدار true تنظیم کنید.

کلاس های فاصله بین عناصر (Gap Utilities)

کلاس های gap در بوت استرپ برای تنظیم فاصله بین عناصر داخلی یک عنصر والد به کار می روند، مخصوصاً زمانی که از display: grid یا display: flex استفاده می شود.

نکات کلیدی:

باید این کلاس ها را روی عنصر والد (container) اعمال کنید.
به صورت پیش فرض، کلاس های gap در بوت استرپ واکنش گرا هستند.
مقادیر قابل استفاده برای gap از $spacers گرفته می شوند و شامل ۶ اندازه از 0 تا 5 هستند.
بوت استرپ کلاسی به نام .gap-auto ارائه نمی دهد، زیرا عملکرد آن با .gap-0 یکسان است (یعنی بدون فاصله).

بیایید یک مثال از کلاس های gap در بوت استرپ ببینیم:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap - Spacing</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>
  </head>
  <body>
    <div class="container mt-3">
      <h4 class="display-6">
          gap utility
      </h4>
      <h4>gap utility class <i>.gap-*</i></h4>
      <div class="d-grid gap-0 p-3 border border-primary bg-light">
          <div class="p-2 bg-light border">
              gap-0
          </div>
          <div class="p-2 bg-light border">
              gap-0
          </div>
      </div>
      <div class="d-grid gap-1 p-3 border border-danger bg-primary-subtle">
          <div class="p-2 bg-light border">
            gap-1
          </div>
          <div class="p-2 bg-light border">
            gap-1
          </div>
      </div>
      <div class="d-grid gap-2 p-3 border border-success bg-danger-subtle">
          <div class="p-2 bg-light border">
            gap-2
          </div>
          <div class="p-2 bg-light border">
            gap-2
          </div>
      </div> 
    </div>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

gap utility

</h4>

<h4>gap utility class <i>.gap-*</i></h4>

gap-0

</div>

gap-0

</div>

gap-1

</div>

gap-1

</div>

gap-2

</div>

gap-2

</div>

</body>

</html>

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

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

فاصله عمودی بین ردیف ها (Row Gap)

برای تنظیم فاصله عمودی بین آیتم های فرزند در یک کانتینر مشخص، می توانید از کلاس کاربردی .row-gap-* استفاده کنید. این کلاس باعث می شود بین ردیف های عناصر داخلی، فضای عمودی مشخصی ایجاد شود. این قابلیت به ویژه در ساختارهای Flex و Grid کاربرد دارد.

بیایید یک مثال ببینیم:

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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>
   </head>
   <body>
     <div class="container mt-3">
        <h4 class="display-6">
         gap utility
        </h4>
        <h4>row gap utility class <i>.row-gap-*</i></h4>
        <div class="d-grid gap-0 row-gap-4">
          <div class="p-2 border bg-primary">
            row gap-4
          </div>
          <div class="p-2 border bg-info">
            row gap-4
          </div>
          <div class="p-2 border bg-warning">
            row gap-4
          </div>
          <div class="p-2 border bg-danger-subtle">
            row gap-4
          </div>
        </div>
      </div> 
     </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

gap utility

</h4>

<h4>row gap utility class <i>.row-gap-*</i></h4>

row gap-4

</div>

row gap-4

</div>

row gap-4

</div>

row gap-4

</div>

</body>

</html>

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

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

فاصله افقی بین ستون ها (Column Gap)

برای تنظیم فاصله افقی بین آیتم های فرزند در یک کانتینر خاص، می توانید از کلاس کاربردی .column-gap-* استفاده کنید. این کلاس به شما اجازه می دهد فاصله مشخصی بین ستون های عناصر داخلی ایجاد کنید. این قابلیت به ویژه در ساختارهای flex و grid بسیار مفید است، زمانی که عناصر در یک ردیف قرار می گیرند.

بیایید یک مثال از کاربرد Column Gap در بوت استرپ ببینیم:

<!DOCTYPE html>
<html>
   <head>
     <title>Bootstrap - Spacing</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>
   </head>
   <body>
     <div class="container mt-3">
      <h4 class="display-4">
        gap utility
      </h4>
      <h4>column gap utility class <i>.column-gap-*</i></h4>
      <div class="d-flex gap-0 column-gap-4">
        <div class="p-2 g-col-6 border border-primary">Grid item 1</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 2</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 3</div>
        <div class="p-2 g-col-6 border border-primary">Grid item 4</div>
      </div>
      <div class="d-flex gap-0 column-gap-2">
        <div class="p-2 g-col-6 border border-success">Grid item 1</div>
        <div class="p-2 g-col-6 border border-success">Grid item 2</div>
        <div class="p-2 g-col-6 border border-success">Grid item 3</div>
        <div class="p-2 g-col-6 border border-success">Grid item 4</div>
      </div>
     </div>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap - Spacing</title>

</head>

<body>

gap utility

</h4>

<h4>column gap utility class <i>.column-gap-*</i></h4>

</div>

</div>

</body>

</html>

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

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

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

5/5 - (1 امتیاز)

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

نظرات

دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی

انتشار: ۲۸ تیر ۱۴۰۴

آموزش فاصله در بوت استرپ (spacing)

نحوه نام‌گذاری کلاس ها

وسط چین افقی (Horizontal Centering)

کلاس های فاصله بین عناصر (Gap Utilities)

فاصله عمودی بین ردیف ها (Row Gap)

فاصله افقی بین ستون ها (Column Gap)

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط