در این بخش به آموزش CSS Grid در بوت استرپ پرداخته می‌شود. سیستم گرید پیش‌فرض بوت استرپ، که بیش از یک دهه سابقه دارد، در بسیاری از پروژه‌ها مورد استفاده قرار گرفته و کارایی آن به‌صورت گسترده اثبات شده است. این سیستم در ابتدا بدون بهره‌گیری از قابلیت‌های مدرن CSS طراحی شده بود؛ اما امروزه مرورگرها از ویژگی‌های پیشرفته‌تری مانند CSS Grid پشتیبانی می‌کنند.
نحوه عملکرد CSS Grid در بوت استرپ 5
بوت استرپ 5 امکان استفاده از سیستم گرید مبتنی بر CSS Grid را فراهم کرده است. این سیستم جدید به همراه امکانات اختصاصی بوت استرپ، به توسعه‌دهندگان اجازه می‌دهد تا چیدمان‌های واکنش گرا را با روش‌های متنوع‌تری پیاده‌سازی کنند. در آموزش طراحی سایت با بوت استرپ نیز، این تکنیک به عنوان یکی از بخش‌های کلیدی برای ساخت چیدمان حرفه‌ای آموزش داده می‌شود.
برای فعال‌سازی این قابلیت، لازم است ابتدا سیستم گرید کلاسیک را غیرفعال و CSS Grid را فعال نمایید. این تنظیمات از طریق متغیرهای Sass به شرح زیر قابل انجام است:
-
مقدار
$enable-grid-classesرا برابرfalseقرار دهید. -
مقدار
$enable-cssgridرا برابرtrueقرار دهید.
پس از انجام این تنظیمات:
-
کلاس
.rowرا با.gridجایگزین کنید. کلاس.gridبا اعمالdisplay: gridساختار گرید جدید را فعال می‌سازد. -
به جای کلاس‌های
.col-*از کلاس‌های جدید.g-col-*استفاده نمایید؛ زیرا در CSS Grid، ستون‌ها بر پایه ویژگیgrid-columnتعریف می‌شوند، نه عرض (width).
همچنین می‌توان اندازه ستون‌ها و فاصله میان آن‌ها را با استفاده از متغیرهای CSS مانند --bs-columns و --bs-gap در عنصر والد .grid به‌صورت سفارشی تنظیم کرد.
تفاوت‌های کلیدی CSS Grid با سیستم گرید کلاسیک بوت استرپ
در ادامه، تفاوت‌های مهم میان CSS Grid و گرید کلاسیک بوت استرپ را بررسی میکنیم:
-
ابزارهای فلکس در CSS Grid رفتار متفاوتی دارند و همان تأثیرگذاری پیشین را بر ستون‌ها ندارند.
-
به جای gutterها، باید از ویژگی
gapاستفاده کرد. این ویژگی مشابه margin عمل کرده و جایگزین padding افقی در سیستم گرید کلاسیک می‌باشد. -
در CSS Grid، فاصله‌ها به‌صورت خودکار در هر دو جهت افقی و عمودی اعمال می‌شوند. برخلاف
.rowکه از margin منفی استفاده می‌کند، کلاس.gridاین ویژگی را ندارد و امکان استفاده از کلاس‌های margin برای تنظیم فاصله وجود ندارد. -
برای تعریف تعداد ستون‌ها، استفاده از سبک‌های درون‌خطی یا سفارشی مانند
style="--bs-columns: 3;"توصیه می‌شود، به جای استفاده از کلاس‌های آماده مانندrow-cols-3. -
در ساختارهای تو در تو، لازم است تعداد ستون‌ها برای هر نمونه‌ی
.gridبه‌صورت مستقل تعریف گردد.
ایجاد سه ستون مساوی با استفاده از CSS Grid
برای ایجاد سه ستون با عرض برابر در تمام اندازه‌های صفحه، می‌توان از کلاس .g-col-4 استفاده کرد. این کلاس باعث می‌شود که گرید به سه ستون مساوی تقسیم شود (زیرا ۱۲ تقسیم بر ۴ برابر با ۳ ستون است). همچنین امکان تنظیم چیدمان برای اندازه‌های مختلف نمایشگر با استفاده از کلاس‌های واکنش‌گرا نیز وجود دارد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Three Columns</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-4 bg-info p-2">First Column</div> <div class="g-col-4 bg-light p-2">Second Column</div> <div class="g-col-4 bg-warning p-2">Third Column</div> </div> </div> </div> </body> </html> |
طراحی واکنش‌گرا (Responsive)
برای تنظیم چیدمان صفحه در اندازه‌های مختلف نمایشگر، باید از کلاس‌های واکنش‌گرا استفاده شود. به‌عنوان مثال، می‌توان طراحی را با دو ستون در صفحه‌های کوچک آغاز کرد و سپس در اندازه‌های بزرگ‌تر، چیدمان را به سه ستون گسترش داد. این قابلیت به توسعه‌دهنده اجازه می‌دهد تجربه کاربری بهتری در دستگاه‌های مختلف ارائه دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Responsive</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-6 g-col-md-4 bg-info">First Column</div> <div class="g-col-6 g-col-md-4 bg-light">Second Column</div> <div class="g-col-6 g-col-md-4 bg-warning">Third 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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Two Column Layout</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-6 bg-info">First Column</div> <div class="g-col-6 bg-warning">Second Column</div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
رفتن آیتم‌ها به خط بعد (Wrapping)
وقتی فضای افقی کافی برای نمایش آیتم‌های گرید وجود نداشته باشد، این آیتم‌ها به‌صورت خودکار به خط بعد منتقل می‌شوند. در این حالت، فاصله‌ها (gap) هم به‌صورت افقی و هم عمودی میان آیتم‌ها اعمال می‌شوند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Wrapping</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-6 bg-info">First Column</div> <div class="g-col-6 bg-warning">Second Column</div> <div class="g-col-6 bg-info">Third Column</div> <div class="g-col-6 bg-warning">Fourth Column</div> </div> </div> </div> </body> </html> |
استفاده از Start در CSS Grid
کلاس‌های Start در بوت استرپ، نسخه خلاصه‌ای از ویژگی‌های grid-column-start و grid-column-end در CSS Grid هستند. این کلاس‌ها برای ساخت قالب‌های گرید با مشخص کردن نقطه شروع و پایان ستون‌ها به کار می‌روند.
این کلاس‌ها معمولاً همراه با کلاس‌های ستونی برای تعیین اندازه و تراز ستون‌ها استفاده می‌شوند. مقداردهی این کلاس‌ها از عدد 1 آغاز می‌شود، زیرا مقدار 0 برای این ویژگی‌ها معتبر نیست.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Starts</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-3 g-start-2 bg-info">First Column</div> <div class="g-col-4 g-start-6 bg-warning">Second Column</div> </div> </div> </div> </div> </body> </html> |
ستون های خودکار (Auto Columns) دربوت استرپ
اگر هیچ کلاسی روی آیتم های گرید اعمال نشود، بوت استرپ به‌صورت پیش فرض اندازه هر آیتم را به یک ستون در داخل .grid اختصاص می‌دهد. این رفتار باعث می‌شود آیتم ها به‌طور خودکار در ساختار گرید قرار بگیرند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Auto Column</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="bg-info">First</div> <div class="bg-warning">Second</div> <div class="bg-info">Third</div> <div class="bg-warning">Four</div> <div class="bg-info">Five</div> <div class="bg-warning">Six</div> <div class="bg-info">Seven</div> <div class="bg-warning">Eight</div> <div class="bg-info">Nine</div> <div class="bg-warning">Ten</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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Auto Column</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center"> <div class="g-col-6">First</div> <div>Second</div> <div>Third</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </div> </div> </body> </html> |
تو در تو کردن گرید (Nesting)
سیستم CSS Grid در بوت استرپ امکان تو در تو کردن ساده گریدها را فراهم می‌کند. برخلاف سیستم گرید پیش‌فرض، در این ساختار تنظیمات اعمال‌شده بر روی ردیف‌ها، ستون‌ها و فاصله‌ها (gaps) به‌صورت خودکار به گریدهای داخلی نیز منتقل می‌شود.
برای پیاده‌سازی گرید تو در تو، می‌توان از سناریوی زیر استفاده کرد:
-
تعداد ستون‌ها در گرید اصلی با یک متغیر محلی CSS مانند
--bs-columns: 3بازنویسی می‌شود. -
در ستون اول، ساختار auto-column حفظ می‌شود و هر ستون یک‌سوم از عرض کلی را اشغال می‌کند.
-
در ستون دوم، یک گرید تو در تو ایجاد شده و تعداد ستون‌های آن به ۱۲ (مقدار پیش‌فرض) تنظیم می‌شود.
-
ستون سوم هیچ آیتم داخلی ندارد.
در مقایسه با ساختار گرید ساده، این روش امکان ایجاد چیدمان‌های پیچیده‌تر و سفارشی‌سازی بیشتر را فراهم می‌کند.
|
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 36 37 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Nesting</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center p-3" style="--bs-columns: 3;"> <div class="bg-secondary text-white"> First Auto-column <div class="grid p-3"> <div class="bg-warning">1</div> <div class="bg-info">2</div> </div> </div> <div class="bg-secondary text-white"> Second Auto-column <div class="grid p-3" style="--bs-columns: 12;"> <div class="g-col-6 bg-warning">1</div> <div class="g-col-4 bg-info">2</div> <div class="g-col-2 bg-warning">3</div> </div> </div> <div class="bg-secondary text-white">Third Auto-column</div> </div> </div> </div> </body> </html> |
سفارشی‌سازی در CSS Grid بوت استرپ
برای سفارشی‌سازی تعداد ستون‌ها، ردیف‌ها و فاصله بین آن‌ها، می‌توان از متغیرهای محلی CSS استفاده کرد. این متغیرها امکان کنترل دقیق ساختار گرید را فراهم می‌کنند.
| متغیر | مقدار پیش‌فرض | توضیح |
|---|---|---|
--bs-rows |
1 |
تعیین تعداد ردیف‌ها در قالب گرید |
--bs-columns |
12 |
تعیین تعداد ستون‌ها در قالب گرید |
--bs-gap |
1.5rem |
اندازه فاصله بین ستون‌ها (افقی و عمودی) |
در صورتی که مقدار مشخصی برای این متغیرها تعریف نشده باشد، مقدار پیش‌فرض (fallback) استفاده خواهد شد. به‌عنوان مثال، var(--bs-rows, 1) تا زمانی که مقدار --bs-rows به‌صورت محلی تعریف نشده باشد، عدد ۱ را به عنوان مقدار پیش‌فرض در نظر می‌گیرد.
بدون استفاده از کلاس‌های گرید
در صورتی که کلاس‌های .g-col به آیتم‌های داخل .grid اعمال نشوند، این آیتم‌ها به‌صورت خودکار در گرید جای می‌گیرند و اندازه آن‌ها متناسب با ساختار گرید تنظیم خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">No Grid Classes</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-columns: 3;"> <div class="bg-info">First Column</div> <div class="bg-light">Second Column</div> <div class="bg-warning">Third Column</div> </div> </div> </div> </body> </html> |
ستون ها و فاصله ها (Columns and Gaps) در بوت استرپ
در این بخش، تعداد ستون ها و میزان فاصله بین آن‌ها را مطابق با مثال زیر تغییر می‌دهیم. این تنظیمات با استفاده از متغیرهای CSS انجام می‌شوند و امکان کنترل دقیق ساختار گرید را فراهم می‌کنند.
|
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 - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Column and Gaps</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;"> <div class="g-col-2 bg-info">First Column</div> <div class="g-col-2 bg-warning">Second Column</div> </div> </div> </div> </body> </html> |
برای تغییر تعداد ستون‌ها و اندازه فاصله بین آن‌ها در ساختار گرید، میتوانید از متغیرهای CSS به صورت زیر استفاده کنید:
|
1 |
style="--bs-columns: 10; --bs-gap: 1rem;" |
|
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 - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Column and Gaps</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;"> <div class="g-col-6 bg-info">First Column</div> <div class="g-col-4 bg-warning">Second Column</div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
افزودن ردیف‌ها (Adding Rows)
مثال زیر نحوه چیدمان مجدد ستون‌ها و افزایش تعداد ردیف‌ها را نشان می‌دهد. با استفاده از متغیر --bs-rows می‌توان تعداد ردیف‌های گرید را به‌دلخواه افزایش داد و چیدمان را به‌صورت عمودی گسترش داد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Adding Rows</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;"> <div class="bg-info">First Column</div> <div class="g-start-2 bg-light" style="grid-row: 2">Second Column</div> <div class="g-start-3 bg-warning" style="grid-row: 3">Third Column</div> </div> </div> </div> </body> </html> |
فاصله ها (Gaps) در بوت استرپ
برای تغییر فاصله عمودی بین ردیف‌ها، تنها کافی است مقدار row-gap را تنظیم کنید. با استفاده از ویژگی gap روی عنصر .grid، می‌توان row-gap (فاصله ردیف‌ها) و column-gap (فاصله ستون‌ها) را به‌صورت مستقل یا ترکیبی تغییر داد تا چیدمان موردنظر به‌دست آید.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Gaps</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="row-gap: 0;"> <div class="g-col-6 bg-info">First Column</div> <div class="g-col-6 bg-warning">Second Column</div> <div class="g-col-6 bg-info">Third Column</div> <div class="g-col-6 bg-warning">Fourth Column</div> </div> </div> </div> </body> </html> |
می‌توان برای فاصله‌های عمودی و افقی یک مقدار واحد یا یک جفت مقدار مشخص کرد. این کار را می‌توان با استفاده از استایل درون‌خطی (inline style) یا از طریق متغیر CSS --bs-gap انجام داد.
برای مثال:
|
1 |
<div class="grid" style="--bs-gap: 1rem 2rem;"></div> |
در این مثال، مقدار اول (۱rem) فاصله عمودی (row-gap) و مقدار دوم (۲rem) فاصله افقی (column-gap) را مشخص می‌کند.
|
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 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Gaps</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-gap: .25rem 1rem;"> <div class="g-col-6 bg-info">First Column</div> <div class="g-col-6 bg-warning">Second Column</div> <div class="g-col-6 bg-info">Third Column</div> <div class="g-col-6 bg-warning">Fourth Column</div> </div> </div> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
Sass در CSS Grid بوت استرپ
یکی از محدودیت‌های CSS Grid در بوت استرپ این است که تعداد کلاس‌های تولیدشده در فایل CSS نهایی، بر اساس مقادیر متغیرهای Sass مانند $grid-columns و $grid-gutter-width از پیش تعیین شده است.
برای اعمال تغییر در این مقادیر، باید فایل‌های Sass را ویرایش و CSS نهایی را مجدداً کامپایل کنید.
برای انعطاف‌پذیری بیشتر و سفارشی‌سازی کلاس‌ها، توصیه می‌شود از استایل‌های درون‌خطی یا کدهای سفارشی استفاده نمایید.
همچنین می‌توان تعداد ستون‌ها، اندازه فاصله‌ها (gap) و اندازه ستون‌ها را با ترکیب استایل‌های سفارشی و کلاس‌های آماده CSS Grid مانند .g-col-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 - CSS Grid</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"> <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <h2 class="text-center">Saas</h2> <div class="container p-3 m-0 border-0 bd-example m-0 bd-example-cssgrid"> <div class="row"> <div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;"> <div class="bg-info" style="grid-column: span 14;">First Column</div> <div class="g-col-4 bg-warning">Second Column</div> </div> </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
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
