در این بخش به معرفی گاتر در بوت استرپ میپردازیم. گاتر (Gutter) در بوت استرپ نقش مهمی در ایجاد فاصله بین ستون ها و نظم بخشیدن به ساختار چیدمان دارد. استفاده درست از گاتر باعث می شود محتوا به شکل خواناتر و منظم تری نمایش داده شود و طراحی نهایی سازگار با ابعاد مختلف صفحه باشد.
نحوه عملکرد گاتر در بوت استرپ
بوت استرپ گاترها را با استفاده از فاصله داخلی افقی در ستون ها ایجاد می کند. در هر ستون، ویژگی های padding-left
و padding-right
باعث می شوند فاصله مشخصی بین محتوای ستون ها به وجود بیاید. مقدار پیش فرض این فاصله 1.5 rem (معادل 24 پیکسل) است که با سیستم فاصله گذاری بوت استرپ هماهنگ طراحی شده است.
برای ایجاد چیدمان های منعطف تر، می توان اندازه گاترها را با استفاده از کلاس های واکنش گرا در نقاط شکست مختلف تنظیم کرد. این کلاس ها امکان مدیریت فاصله افقی، عمودی یا هر دو را فراهم می کنند.
گاترهای افقی
برای کنترل فاصله افقی بین ستون ها، بوت استرپ کلاس های .gx-*
را ارائه می دهد. در صورتی که از گاترهای بزرگ تر استفاده شود، بهتر است برای جلوگیری از سرریز محتوا، ساختار کانتینر یا .container-fluid
را نیز با استفاده از کلاس هایی مانند .px-4
تنظیم کرد. این کار از بهم ریختگی طراحی در نمایشگرهای مختلف جلوگیری می کند.
در آموزش پروژه محور بوت استرپ نیز معمولاً از همین کلاس ها برای ساخت رابط های کاربری منظم و واکنش گرا استفاده می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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> |
استفاده از قابلیت Overflow
یکی از روش های کنترل سرریز محتوا در ردیف ها، اضافه کردن یک عنصر پوششی با کلاس .overflow-hidden
به اطراف عنصر .row
است. این کار به مخفی شدن بخش های اضافه محتوا کمک می کند و از بهم ریختگی در طراحی جلوگیری می کند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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> |
گاترهای عمودی در بوت استرپ
گاتر عمودی برای ایجاد فاصله واکنش گرا بین ستون ها، تنظیم فاصله داخلی و تراز کردن محتوا با ساختار گرید استفاده می شود.
برای کنترل عرض گاترهای عمودی در یک ردیف، می توان از کلاس های .gy-*
استفاده کرد. این کلاس ها به ویژه زمانی کاربرد دارند که ستون ها به دلیل محدودیت فضا به خط بعد منتقل می شوند (column wrapping).
همانند گاترهای افقی، استفاده از گاترهای عمودی نیز ممکن است باعث ایجاد سرریز در پایین ردیف شود، به خصوص در انتهای صفحات. برای جلوگیری از این مشکل، می توان یک عنصر پوششی با کلاس .overflow-hidden
دور عنصر .row
قرار داد تا بخش های اضافه به درستی مدیریت شوند.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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> |
گاترهای افقی و عمودی در بوت استرپ
برای کنترل همزمان گاترهای افقی و عمودی در گرید بوت استرپ، از کلاس های .g-*
استفاده کنید. این کلاس ها به شما امکان می دهند با یک دستور، فاصله بین ستون ها را در هر دو جهت مدیریت کنید.
استفاده از گاترهایی با عرض کمتر باعث می شود نیازی به استفاده از کلاس .overflow-hidden
برای جلوگیری از سرریز محتوا وجود نداشته باشد. این روش، طراحی را ساده تر و تمیزتر نگه می دارد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!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> |
گاتر در ستون های ردیفی
در طراحی واکنش گرا، می توان کلاس های گاتر را به ستون های ردیفی اضافه کرد. با ترکیب کلاس های ستون ردیفی و گاترهای واکنش گرا، می توان فاصله بین ستون ها را در اندازه های مختلف صفحه بهدرستی تنظیم کرد.
در مثال زیر، از ستون های واکنش گرا همراه با کلاس های گاتر استفاده شده است تا چیدمان منظم و هماهنگ در تمام ابعاد صفحه ایجاد شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!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> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
حذف گاترها در بوت استرپ
برای حذف کامل فاصله بین ستون ها در سیستم گرید، می توانید از کلاس .g-0
استفاده کنید. این کلاس باعث می شود حاشیه های منفی از .row
و فاصله داخلی افقی از ستون های داخل آن حذف شود.
اگر قصد دارید یک طراحی تمام عرض (edge-to-edge) داشته باشید، می توانید عنصر والد .container
یا .container-fluid
را حذف کرده و کلاس .mx-0
را به .row
اضافه کنید تا از سرریز محتوا جلوگیری شود.
کلاس .g-0
هم حاشیه ها و هم فاصله های داخلی را از ردیف و ستون ها حذف می کند و باعث ایجاد ساختاری کاملاً فشرده و بدون فاصله می شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!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> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۷ اردیبهشت ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس