سیستم شبکه ای

به لطف یک سیستم دوازده ستونی، شش لایه پیش‌فرض پاسخگو، متغیرها و میکس‌های Sass و ده‌ها کلاس از پیش تعریف‌شده، از شبکه قدرتمند flexbox موبایل اول ما برای ساخت طرح‌بندی‌هایی در همه شکل‌ها و اندازه‌ها استفاده کنید.

در این صفحه

مثال

سیستم شبکه بوت استرپ از مجموعه ای از کانتینرها، ردیف ها و ستون ها برای چیدمان و تراز کردن محتوا استفاده می کند. این با فلکس باکس ساخته شده است و کاملاً واکنش گرا است. در زیر یک مثال و توضیح عمیق برای نحوه ترکیب سیستم شبکه ارائه شده است.

با flexbox جدید یا ناآشنا هستید؟ این راهنمای flexbox ترفندهای CSS را برای پس‌زمینه، اصطلاحات، دستورالعمل‌ها و قطعه‌های کد بخوانید.

ستون

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

مثال بالا با استفاده از کلاس‌های شبکه از پیش تعریف‌شده ما، سه ستون با عرض مساوی در همه دستگاه‌ها و پورت‌های دید ایجاد می‌کند. آن ستون ها در مرکز صفحه با والد .containerقرار دارند.

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

در تجزیه آن، در اینجا نحوه جمع آوری سیستم شبکه آمده است:

شبکه ما از شش نقطه شکست پاسخگو پشتیبانی می کند . نقاط انفصال بر اساس min-widthجستارهای رسانه ای هستند، به این معنی که بر آن نقطه شکست و همه موارد بالاتر از آن تأثیر می گذارند (به عنوان مثال، .col-sm-4برای sm, md, lg, xlو xxl) اعمال می شود. این بدان معنی است که می توانید اندازه و رفتار کانتینر و ستون را با هر نقطه شکست کنترل کنید.
کانتینرها محتوای شما را در مرکز و به صورت افقی قرار می دهند. برای .containerعرض پیکسل پاسخگو، .container-fluidبرای width: 100%همه درگاه‌های نمایش و دستگاه‌ها، یا یک ظرف واکنش‌گرا (مثلاً .container-md) برای ترکیبی از عرض‌های مایع و پیکسل استفاده کنید.
سطرها بسته بندی برای ستون ها هستند. هر ستون دارای افقی padding(به نام ناودان) برای کنترل فضای بین آنها است. سپس paddingروی ردیف‌هایی با حاشیه‌های منفی خنثی می‌شود تا اطمینان حاصل شود که محتوای ستون‌های شما به صورت بصری در سمت چپ تراز شده است. ردیف‌ها همچنین از کلاس‌های اصلاح‌کننده برای اعمال یکنواخت اندازه ستون و کلاس‌های ناودانی برای تغییر فاصله محتوای شما پشتیبانی می‌کنند.
ستون ها فوق العاده انعطاف پذیر هستند. 12 ستون الگو در هر سطر موجود است که به شما امکان می دهد ترکیب های مختلفی از عناصر را ایجاد کنید که هر تعداد ستون را در بر می گیرند. کلاس‌های ستون تعداد ستون‌های الگو را نشان می‌دهد (به عنوان مثال، col-4دهانه چهار). widths بر حسب درصد تنظیم می شوند، بنابراین شما همیشه اندازه نسبی یکسانی دارید.
ناودان ها نیز پاسخگو و قابل تنظیم هستند. کلاس‌های ناودانی در همه نقاط شکست، با اندازه‌های یکسانی با فاصله‌های حاشیه و لایه ما در دسترس هستند . ناودان های افقی را با .gx-*کلاس ها، ناودان های عمودی را با .gy-*یا همه ناودان ها را با .g-*کلاس ها تغییر دهید. .g-0همچنین برای حذف ناودان ها موجود است.
متغیرهای Sass، نقشه‌ها و میکس‌ها به شبکه قدرت می‌دهند. اگر نمی‌خواهید از کلاس‌های شبکه از پیش تعریف‌شده در Bootstrap استفاده کنید، می‌توانید از منبع شبکه ما Sass برای ایجاد کلاس‌های شبکه‌ای با نشانه‌گذاری معنایی‌تر استفاده کنید. ما همچنین برخی از ویژگی های سفارشی CSS را برای مصرف این متغیرهای Sass برای انعطاف پذیری بیشتر برای شما اضافه می کنیم.

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

گزینه های شبکه

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

بسیار کوچک (xs)
کوچک (sm)
متوسط (md)
بزرگ (lg)
خیلی بزرگ (xl)
فوق العاده بزرگ (xxl)

همانطور که در بالا ذکر شد، هر یک از این نقاط شکست دارای محفظه، پیشوند کلاس منحصر به فرد و اصلاح کننده های خود هستند. در اینجا نحوه تغییر شبکه در این نقاط شکست آمده است:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
ظرف`max-width`	هیچکدام (خودکار)	540 پیکسل	720 پیکسل	960 پیکسل	1140 پیکسل	1320 پیکسل
پیشوند کلاس	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ستون	12
عرض ناودان	1.5rem (.75rem در چپ و راست)
ناودان های سفارشی	آره
تودرتو	آره
ترتیب ستون	آره

طرح بندی خودکار ستون ها

از کلاس‌های ستون خاص نقطه شکست برای اندازه‌گیری آسان ستون بدون کلاس شماره‌دار صریح مانند .col-sm-6.

با عرض مساوی

برای مثال، در اینجا دو طرح‌بندی شبکه‌ای وجود دارد که برای هر دستگاه و درگاه دید، از xsتا xxl. هر تعداد کلاس بدون واحد را برای هر نقطه شکستی که نیاز دارید اضافه کنید و عرض هر ستون یکسان خواهد بود.

1 از 2

2 از 2

1 از 3

2 از 3

3 از 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

تنظیم یک عرض ستون

طرح‌بندی خودکار برای ستون‌های شبکه flexbox همچنین به این معنی است که می‌توانید عرض یک ستون را تنظیم کنید و اندازه ستون‌های خواهر و برادر را به‌طور خودکار در اطراف آن تغییر دهید. می توانید از کلاس های شبکه از پیش تعریف شده (همانطور که در زیر نشان داده شده است)، میکس های شبکه، یا عرض های درون خطی استفاده کنید. توجه داشته باشید که ستون های دیگر بدون توجه به عرض ستون مرکزی، اندازه آنها تغییر می کند.

1 از 3

2 از 3 (عریض تر)

3 از 3

1 از 3

2 از 3 (عریض تر)

3 از 3

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

محتوای عرض متغیر

از col-{breakpoint}-autoکلاس ها برای اندازه گیری ستون ها بر اساس عرض طبیعی محتوای آنها استفاده کنید.

1 از 3

محتوای عرض متغیر

3 از 3

1 از 3

محتوای عرض متغیر

3 از 3

html

<div class="container text-center">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

کلاس های پاسخگو

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

همه نقاط شکست

برای شبکه‌هایی که از کوچک‌ترین دستگاه‌ها تا بزرگ‌ترین آنها یکسان هستند، از کلاس‌های .coland استفاده کنید. .col-*زمانی که به ستونی با اندازه خاص نیاز دارید یک کلاس شماره گذاری شده را مشخص کنید. در غیر این صورت، با خیال راحت به .col.

سرهنگ

col-8

col-4

html

<div class="container text-center">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

به صورت افقی روی هم چیده شده است

با استفاده از یک مجموعه واحد از .col-sm-*کلاس ها، می توانید یک سیستم شبکه ای پایه ایجاد کنید که به صورت انباشته شروع می شود و در نقطه شکست کوچک ( sm) افقی می شود.

col-sm-8

col-sm-4

col-sm

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ترکیب و مطابقت

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

.col-md-8

.col-6 .col-md-4

.col-6

html

<div class="container text-center">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ستون های ردیف

از .row-cols-*کلاس‌های واکنش‌گرا برای تنظیم سریع تعداد ستون‌هایی که محتوا و طرح‌بندی شما را به بهترین شکل ارائه می‌کنند، استفاده کنید. در حالی که .col-*کلاس‌های عادی برای ستون‌های جداگانه اعمال می‌شوند (به عنوان مثال، .col-md-4)، کلاس‌های ستون‌های ردیف در والد .rowبه عنوان میانبر تنظیم می‌شوند. با .row-cols-autoشما می توانید به ستون ها عرض طبیعی خود را بدهید.

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

ستون

html

<div class="container text-center">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ستون

html

<div class="container text-center">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ستون

html

<div class="container text-center">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ستون

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ستون

html

<div class="container text-center">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ستون

html

<div class="container text-center">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

همچنین می توانید از Sass mixin همراه استفاده کنید row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

لانه سازی

برای قرار دادن محتوای خود با شبکه پیش‌فرض، یک ستون جدید .rowو مجموعه‌ای از .col-sm-*ستون‌ها را در یک ستون موجود اضافه .col-sm-*کنید. ردیف‌های تودرتو باید شامل مجموعه‌ای از ستون‌ها باشد که مجموع آنها ۱۲ یا کمتر است (الزامی نیست که از همه ۱۲ ستون موجود استفاده کنید).

سطح 1: .col-sm-3

سطح 2: .col-8 .col-sm-6

سطح 2: .col-4 .col-sm-6

html

<div class="container text-center">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ساس

هنگام استفاده از فایل‌های Sass منبع بوت استرپ، می‌توانید از متغیرها و میکس‌های Sass برای ایجاد طرح‌بندی صفحه سفارشی، معنایی و پاسخگو استفاده کنید. کلاس‌های شبکه از پیش تعریف‌شده ما از همین متغیرها و میکس‌ها استفاده می‌کنند تا مجموعه کاملی از کلاس‌های آماده برای استفاده را برای طرح‌بندی‌های پاسخ‌گوی سریع ارائه دهند.

متغیرها

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;
$grid-row-columns:  6;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

مخلوط ها

مخلوط‌ها همراه با متغیرهای شبکه برای تولید CSS معنایی برای ستون‌های شبکه جداگانه استفاده می‌شوند.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

مثال استفاده

می توانید متغیرها را به مقادیر سفارشی خود تغییر دهید یا فقط از میکس ها با مقادیر پیش فرض خود استفاده کنید. در اینجا نمونه ای از استفاده از تنظیمات پیش فرض برای ایجاد یک طرح بندی دو ستونی با فاصله بین آنها آورده شده است.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

محتوای اصلی

محتوای ثانویه

html

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

سفارشی کردن شبکه

با استفاده از متغیرها و نقشه‌های Grid Sass داخلی، می‌توان کلاس‌های شبکه از پیش تعریف‌شده را به‌طور کامل سفارشی کرد. تعداد لایه‌ها، ابعاد درخواست رسانه و عرض ظرف را تغییر دهید—سپس دوباره کامپایل کنید.

ستون ها و ناودان ها

تعداد ستون های شبکه را می توان از طریق متغیرهای Sass تغییر داد. $grid-columnsبرای تولید عرض (بر حسب درصد) هر ستون جداگانه استفاده می شود در حالی $grid-gutter-widthکه عرض ناودان ستون را تنظیم می کند. $grid-row-columnsبرای تنظیم حداکثر تعداد ستون های استفاده می شود .row-cols-*، هر تعداد بیش از این حد نادیده گرفته می شود.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;

لایه های شبکه

با حرکت فراتر از خود ستون‌ها، می‌توانید تعداد لایه‌های شبکه را نیز سفارشی کنید. اگر فقط چهار سطح شبکه می‌خواستید، $grid-breakpointsو $container-max-widthsرا به چیزی شبیه به این به روز کنید:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

هنگام ایجاد هر گونه تغییر در متغیرها یا نقشه های Sass، باید تغییرات خود را ذخیره کرده و دوباره کامپایل کنید. با انجام این کار، مجموعه جدیدی از کلاس‌های شبکه از پیش تعریف‌شده برای عرض ستون‌ها، آفست‌ها و سفارش‌دهی تولید می‌شود. ابزارهای دید پاسخگو نیز برای استفاده از نقاط شکست سفارشی به روز خواهند شد. مطمئن شوید که مقادیر شبکه را در px(نه rem، emیا %) تنظیم کرده اید.