آموزش گاتر (Gutter) در بوت استرپ | صفر تا صد فاصله بین ستون ها در طراحی واکنش گرا

0 دیدگاه

در این بخش به معرفی گاتر در بوت استرپ می‌پردازیم. گاتر (Gutter) در بوت استرپ نقش مهمی در ایجاد فاصله بین ستون ها و نظم بخشیدن به ساختار چیدمان دارد. استفاده درست از گاتر باعث می شود محتوا به شکل خواناتر و منظم تری نمایش داده شود و طراحی نهایی سازگار با ابعاد مختلف صفحه باشد.

نحوه عملکرد گاتر در بوت استرپ

بوت استرپ گاترها را با استفاده از فاصله داخلی افقی در ستون ها ایجاد می کند. در هر ستون، ویژگی های padding-left و padding-right باعث می شوند فاصله مشخصی بین محتوای ستون ها به وجود بیاید. مقدار پیش فرض این فاصله 1.5 rem (معادل 24 پیکسل) است که با سیستم فاصله گذاری بوت استرپ هماهنگ طراحی شده است.

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

گاترهای افقی

برای کنترل فاصله افقی بین ستون ها، بوت استرپ کلاس های .gx-* را ارائه می دهد. در صورتی که از گاترهای بزرگ تر استفاده شود، بهتر است برای جلوگیری از سرریز محتوا، ساختار کانتینر یا .container-fluid را نیز با استفاده از کلاس هایی مانند .px-4 تنظیم کرد. این کار از بهم ریختگی طراحی در نمایشگرهای مختلف جلوگیری می کند.

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

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Gutters</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 px-4 text-center mt-2">
        <div class="row gx-5">
          <div class="col">
           <div class="p-2 bg-info">First Column</div>
          </div>
          <div class="col">
            <div class="p-2 bg-warning">Second Column</div>
          </div>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="p-2 bg-info">First Column</div>

</div>

<div class="p-2 bg-warning">Second Column</div>

</div>

</body>

</html>

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

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

استفاده از قابلیت Overflow

یکی از روش های کنترل سرریز محتوا در ردیف ها، اضافه کردن یک عنصر پوششی با کلاس .overflow-hidden به اطراف عنصر .row است. این کار به مخفی شدن بخش های اضافه محتوا کمک می کند و از بهم ریختگی در طراحی جلوگیری می کند.

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Gutters</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 overflow-hidden text-center">
        <div class="row gx-5 mt-2">
          <div class="col">
           <div class="p-2 bg-info">First Column</div>
          </div>
          <div class="col">
            <div class="p-2 bg-warning">Second Column</div>
          </div>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="p-2 bg-info">First Column</div>

</div>

<div class="p-2 bg-warning">Second Column</div>

</div>

</body>

</html>

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

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

گاترهای عمودی در بوت استرپ

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

برای کنترل عرض گاترهای عمودی در یک ردیف، می توان از کلاس های .gy-* استفاده کرد. این کلاس ها به ویژه زمانی کاربرد دارند که ستون ها به دلیل محدودیت فضا به خط بعد منتقل می شوند (column wrapping).

همانند گاترهای افقی، استفاده از گاترهای عمودی نیز ممکن است باعث ایجاد سرریز در پایین ردیف شود، به خصوص در انتهای صفحات. برای جلوگیری از این مشکل، می توان یک عنصر پوششی با کلاس .overflow-hidden دور عنصر .row قرار داد تا بخش های اضافه به درستی مدیریت شوند.

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Gutters</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 overflow-hidden text-center mt-2">
        <div class="row gy-5">
          <div class="col-6">
            <div class="p-2 bg-info">First Column</div>
          </div>
          <div class="col-6">
            <div class="p-2 bg-warning">Second Column</div>
          </div>
          <div class="col-6">
            <div class="p-2 bg-info">Third Column</div>
          </div>
          <div class="col-6">
            <div class="p-2 bg-warning">Fourth Column</div>
          </div>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="p-2 bg-info">First Column</div>

</div>

<div class="p-2 bg-warning">Second Column</div>

</div>

<div class="p-2 bg-info">Third Column</div>

</div>

<div class="p-2 bg-warning">Fourth Column</div>

</div>

</body>

</html>

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

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

گاترهای افقی و عمودی در بوت استرپ

برای کنترل همزمان گاترهای افقی و عمودی در گرید بوت استرپ، از کلاس های .g-* استفاده کنید. این کلاس ها به شما امکان می دهند با یک دستور، فاصله بین ستون ها را در هر دو جهت مدیریت کنید.

استفاده از گاترهایی با عرض کمتر باعث می شود نیازی به استفاده از کلاس .overflow-hidden برای جلوگیری از سرریز محتوا وجود نداشته باشد. این روش، طراحی را ساده تر و تمیزتر نگه می دارد.

<!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Gutters</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 text-center">
      <div class="row g-2 mt-2">
        <div class="col-6">
          <div class="p-2 bg-info">First Column</div>
        </div>
        <div class="col-6">
          <div class="p-2 bg-warning">Second Column</div>
        </div>
        <div class="col-6 ">
          <div class="p-2 bg-info">Third Column</div>
        </div>
        <div class="col-6">
          <div class="p-2 bg-warning">Fourth Column</div>
        </div>
      </div>
    </div>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="p-2 bg-info">First Column</div>

</div>

<div class="p-2 bg-warning">Second Column</div>

</div>

<div class="p-2 bg-info">Third Column</div>

</div>

<div class="p-2 bg-warning">Fourth Column</div>

</div>

</body>

</html>

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

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

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

در طراحی واکنش گرا، می توان کلاس های گاتر را به ستون های ردیفی اضافه کرد. با ترکیب کلاس های ستون ردیفی و گاترهای واکنش گرا، می توان فاصله بین ستون ها را در اندازه های مختلف صفحه به‌درستی تنظیم کرد.

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Gutters</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 text-center">
        <div class="row row-cols-2 row-cols-lg-3 g-2 g-lg-3 mt-2">
          <div class="col">
            <div class="p-3 bg-info">First Row column</div>
          </div>
          <div class="col">
            <div class="p-3 bg-warning">Second Row column</div>
          </div>
          <div class="col">
            <div class="p-3 bg-info">Third Row column</div>
          </div>
          <div class="col">
            <div class="p-3 bg-warning">Fourth Row column</div>
          </div>
          <div class="col">
            <div class="p-3 bg-info">Fifth Row column</div>
          </div>
          <div class="col">
            <div class="p-3 bg-warning">Sixth Row column</div>
          </div>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="p-3 bg-info">First Row column</div>

</div>

<div class="p-3 bg-warning">Second Row column</div>

</div>

<div class="p-3 bg-info">Third Row column</div>

</div>

<div class="p-3 bg-warning">Fourth Row column</div>

</div>

<div class="p-3 bg-info">Fifth Row column</div>

</div>

<div class="p-3 bg-warning">Sixth Row column</div>

</div>

</body>

</html>

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

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

حذف گاترها در بوت استرپ

برای حذف کامل فاصله بین ستون ها در سیستم گرید، می توانید از کلاس .g-0 استفاده کنید. این کلاس باعث می شود حاشیه های منفی از .row و فاصله داخلی افقی از ستون های داخل آن حذف شود.

اگر قصد دارید یک طراحی تمام عرض (edge-to-edge) داشته باشید، می توانید عنصر والد .container یا .container-fluid را حذف کرده و کلاس .mx-0 را به .row اضافه کنید تا از سرریز محتوا جلوگیری شود.

کلاس .g-0 هم حاشیه ها و هم فاصله های داخلی را از ردیف و ستون ها حذف می کند و باعث ایجاد ساختاری کاملاً فشرده و بدون فاصله می شود.

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Gutters</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="row g-0 text-center mt-2">
        <div class="col-sm-4 col-md-6 p-2 bg-info">First Column</div>
        <div class="col-4 col-md-3 p-2 bg-warning">Second Column</div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Gutters</title>

</head>

<body>

<div class="col-sm-4 col-md-6 p-2 bg-info">First Column</div>

<div class="col-4 col-md-3 p-2 bg-warning">Second Column</div>

</div>

</body>

</html>

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

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

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

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

نظرات

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

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

آموزش گاتر (Gutter) در بوت استرپ | صفر تا صد فاصله بین ستون ها در طراحی واکنش گرا

نحوه عملکرد گاتر در بوت استرپ

گاترهای افقی

استفاده از قابلیت Overflow

گاترهای عمودی در بوت استرپ

گاترهای افقی و عمودی در بوت استرپ

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

حذف گاترها در بوت استرپ

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط