رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

شبکه CSS

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

در این صفحه

سیستم شبکه پیش‌فرض Bootstrap نشان‌دهنده اوج بیش از یک دهه تکنیک‌های چیدمان CSS است که توسط میلیون‌ها نفر آزمایش و آزمایش شده است. اما، همچنین بدون بسیاری از ویژگی‌ها و تکنیک‌های مدرن CSS که در مرورگرهایی مانند CSS Grid جدید می‌بینیم، ایجاد شد.

توجه داشته باشید - سیستم CSS Grid ما آزمایشی است و از نسخه 5.1.0 شرکت می کند! ما آن را در CSS اسناد خود گنجانده‌ایم تا آن را برای شما نشان دهیم، اما به طور پیش‌فرض غیرفعال است. به خواندن ادامه دهید تا یاد بگیرید چگونه آن را در پروژه های خود فعال کنید.

چگونه کار می کند

با Bootstrap 5، ما گزینه ای را اضافه کرده ایم که یک سیستم شبکه جداگانه را فعال می کند که بر روی CSS Grid ساخته شده است، اما با یک پیچش بوت استرپ. شما هنوز هم کلاس‌هایی دریافت می‌کنید که می‌توانید برای ایجاد طرح‌بندی‌های واکنش‌گرا، اما با رویکردی متفاوت، از روی هوس استفاده کنید.

  • CSS Grid انتخاب شده است. با تنظیم، سیستم شبکه پیش‌فرض را غیرفعال کنید و با تنظیم $enable-grid-classes: falseCSS Grid را فعال کنید $enable-cssgrid: true. سپس، Sass خود را دوباره کامپایل کنید.

  • نمونه های را .rowبا .grid. کلاس .gridمجموعه ای را تنظیم display: gridو ایجاد می کند grid-templateکه شما با HTML خود بر روی آن می سازید.

  • .col-*کلاس ها را با کلاس ها جایگزین کنید .g-col-*. این به این دلیل است که ستون های CSS Grid ما از grid-columnویژگی به جای width.

  • ستون ها و اندازه های ناودان از طریق متغیرهای CSS تنظیم می شوند. اینها را روی والد .gridتنظیم کنید و هر طور که می خواهید سفارشی کنید، درون خطی یا در یک شیوه نامه، با --bs-columnsو --bs-gap.

در آینده، Bootstrap احتمالاً به یک راه حل ترکیبی تغییر خواهد کرد زیرا این gapویژگی تقریباً از پشتیبانی کامل مرورگر برای flexbox برخوردار است.

تفاوت های کلیدی

در مقایسه با سیستم شبکه پیش فرض:

  • ابزارهای فلکس به همان شکل بر ستون‌های CSS Grid تأثیر نمی‌گذارند.

  • شکاف ها جایگزین ناودان ها می شوند. این gapویژگی جایگزین افقی paddingسیستم شبکه پیش‌فرض ما می‌شود و بیشتر شبیه به عملکرد می‌شود margin.

  • به این ترتیب، بر خلاف .rows، .grids هیچ حاشیه منفی ندارند و نمی توان از ابزارهای حاشیه برای تغییر ناودان های شبکه استفاده کرد. شکاف های شبکه به طور پیش فرض به صورت افقی و عمودی اعمال می شوند. برای جزئیات بیشتر به بخش سفارشی سازی مراجعه کنید.

  • سبک های درون خطی و سفارشی باید به عنوان جایگزینی برای کلاس های اصلاح کننده در نظر گرفته شوند (مثلاً در style="--bs-columns: 3;"مقابل class="row-cols-3").

  • تودرتو به طور مشابه کار می کند، اما ممکن است از شما بخواهد که تعداد ستون های خود را در هر نمونه از یک تودرتو تنظیم مجدد کنید .grid. برای جزئیات بیشتر به بخش تودرتو مراجعه کنید.

مثال ها

سه ستون

.g-col-4با استفاده از کلاس‌ها می‌توان سه ستون با عرض مساوی در تمام نمای‌پورت‌ها و دستگاه‌ها ایجاد کرد . اضافه کردن کلاس های پاسخگو برای تغییر طرح بندی بر اساس اندازه نمایش.

.g-col-4
.g-col-4
.g-col-4 
<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

پاسخگو

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

g-col-6 .g-col-md-4
g-col-6 .g-col-md-4
g-col-6 .g-col-md-4 
<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

آن را با این طرح‌بندی دو ستونی در تمام نمای‌پورت‌ها مقایسه کنید.

.g-col-6
.g-col-6 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

کاغذ بسته بندی

هنگامی که فضای افقی دیگری وجود ندارد، موارد شبکه به طور خودکار به خط بعدی می‌پیوندند. توجه داشته باشید که در gapمورد شکاف های افقی و عمودی بین موارد شبکه اعمال می شود.

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

شروع می شود

هدف کلاس‌های شروع جایگزینی کلاس‌های افست شبکه پیش‌فرض ما است، اما آنها کاملاً یکسان نیستند. CSS Grid یک الگوی شبکه‌ای را از طریق سبک‌هایی ایجاد می‌کند که به مرورگرها می‌گوید «از این ستون شروع کنند» و «در این ستون ختم شوند». آن خواص هستند grid-column-startو grid-column-end. کلاس های شروع برای اولی مختصر هستند. آن‌ها را با کلاس‌های ستون جفت کنید تا ستون‌های خود را به اندازه‌ای که نیاز دارید، تراز کنید. کلاس های شروع با 1مقدار 0نامعتبر برای این ویژگی ها شروع می شوند.

.g-col-3 .g-start-2
.g-col-4 .g-start-6 
<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ستون های خودکار

هنگامی که هیچ کلاسی در آیتم های شبکه وجود ندارد (فرزندان مستقیم یک .grid)، هر آیتم شبکه به طور خودکار به یک ستون اندازه می شود.

1
1
1
1
1
1
1
1
1
1
1
1 
<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

این رفتار را می توان با کلاس های ستون گرید مخلوط کرد.

.g-col-6
1
1
1
1
1
1 
<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

لانه سازی

مشابه سیستم شبکه پیش‌فرض ما، شبکه CSS ما امکان تودرتو کردن آسان .grids را می‌دهد. با این حال، برخلاف حالت پیش‌فرض، این شبکه تغییرات در ردیف‌ها، ستون‌ها و شکاف‌ها را به ارث می‌برد. به مثال زیر توجه کنید:

  • ما تعداد پیش فرض ستون ها را با یک متغیر CSS محلی لغو می کنیم: --bs-columns: 3.
  • در اولین ستون خودکار، تعداد ستون ها به ارث می رسد و هر ستون یک سوم عرض موجود است.
  • در دومین ستون خودکار، تعداد ستون‌های تودرتو .gridرا به ۱۲ (پیش‌فرض ما) بازنشانی کرده‌ایم.
  • ستون خودکار سوم محتوای تودرتو ندارد.

در عمل، در مقایسه با سیستم شبکه پیش‌فرض ما، این امکان را برای طرح‌بندی‌های پیچیده‌تر و سفارشی‌تر فراهم می‌کند.

اولین ستون خودکار
ستون خودکار
ستون خودکار
ستون خودکار دوم
6 از 12
4 از 12
2 از 12
ستون خودکار سوم 
<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

سفارشی کردن

تعداد ستون ها، تعداد ردیف ها و عرض شکاف ها را با متغیرهای CSS محلی سفارشی کنید.

متغیر مقدار بازگشتی شرح
--bs-rows 1 تعداد ردیف‌های قالب شبکه شما
--bs-columns 12 تعداد ستون ها در قالب شبکه شما
--bs-gap 1.5rem اندازه فاصله بین ستون ها (عمودی و افقی)

این متغیرهای CSS هیچ مقدار پیش فرضی ندارند. در عوض، آنها مقادیر بازگشتی را اعمال می کنند که تا زمانی که یک نمونه محلی ارائه شود استفاده می شود. به عنوان مثال، ما از var(--bs-rows, 1)ردیف‌های شبکه CSS خود استفاده می‌کنیم که نادیده گرفته می‌شوند --bs-rowsزیرا هنوز در جایی تنظیم نشده است. پس از آن، .gridنمونه از آن مقدار به جای مقدار بازگشتی استفاده می کند 1.

بدون کلاس شبکه

عناصر فرزندان فوری .gridآیتم‌های شبکه‌ای هستند، بنابراین بدون افزودن صریح .g-colکلاس اندازه‌گیری می‌شوند.

ستون خودکار
ستون خودکار
ستون خودکار 
<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

ستون ها و شکاف ها

تعداد ستون ها و شکاف را تنظیم کنید.

.g-col-2
.g-col-2 
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>
.g-col-6
.g-col-4 
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

افزودن ردیف ها

افزودن ردیف های بیشتر و تغییر محل قرارگیری ستون ها:

ستون خودکار
ستون خودکار
ستون خودکار 
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

شکاف ها

شکاف های عمودی را فقط با تغییر دادن تغییر دهید row-gap. توجه داشته باشید که ما از gaps استفاده می کنیم .grid، اما row-gapو column-gapمی توان آن را در صورت نیاز تغییر داد.

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

به همین دلیل، می توانید s های عمودی و افقی مختلفی داشته باشید gapکه می توانند یک مقدار واحد (همه طرف) یا یک جفت مقدار (عمودی و افقی) داشته باشند. این را می توان با یک سبک درون خطی برای gapیا با --bs-gapمتغیر CSS ما اعمال کرد.

.g-col-6
.g-col-6
.g-col-6
.g-col-6 
<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ساس

یکی از محدودیت‌های CSS Grid این است که کلاس‌های پیش‌فرض ما هنوز توسط دو متغیر Sass $grid-columnsو $grid-gutter-width. این به طور موثر تعداد کلاس های تولید شده در CSS کامپایل شده ما را از پیش تعیین می کند. شما در اینجا دو گزینه دارید:

  • متغیرهای پیش‌فرض Sass را تغییر دهید و CSS خود را دوباره کامپایل کنید.
  • از سبک های درون خطی یا سفارشی برای تقویت کلاس های ارائه شده استفاده کنید.

برای مثال، می‌توانید تعداد ستون‌ها را افزایش دهید و اندازه شکاف را تغییر دهید، و سپس «ستون‌های» خود را با ترکیبی از سبک‌های درون خطی و کلاس‌های ستون از پیش تعریف‌شده CSS Grid اندازه‌گیری کنید (مثلاً .g-col-4).

14 ستون
.g-col-4 
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>