Source

سیستم شبکه ای

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

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

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

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

یکی از سه ستون

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

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

کانتینرها وسیله ای برای وسط و قرار دادن افقی محتویات سایت شما هستند. برای .containerعرض پیکسل پاسخگو یا .container-fluidبرای width: 100%همه درگاه‌های دید و اندازه‌های دستگاه استفاده کنید.
سطرها بسته بندی برای ستون ها هستند. هر ستون دارای افقی padding(به نام ناودان) برای کنترل فضای بین آنها است. paddingسپس در ردیف هایی با حاشیه های منفی این امر خنثی می شود. به این ترتیب، تمام محتوای ستون های شما به صورت بصری در سمت چپ تراز می شود.
در طرح‌بندی شبکه‌ای، محتوا باید درون ستون‌ها قرار گیرد و فقط ستون‌ها ممکن است فرزندان مستقیم ردیف‌ها باشند.
با تشکر از flexbox، ستون های شبکه بدون مشخص شده widthبه طور خودکار به عنوان ستون هایی با عرض مساوی طرح بندی می شوند. به عنوان مثال، چهار نمونه از .col-smاراده هر کدام به طور خودکار 25٪ از نقطه شکست کوچک و بالاتر عرض دارند. برای مثال‌های بیشتر به بخش ستون‌های طرح‌بندی خودکار مراجعه کنید .
کلاس‌های ستون تعداد ستون‌هایی را که می‌خواهید از ۱۲ ستون ممکن در هر ردیف استفاده کنید، نشان می‌دهد. بنابراین، اگر می‌خواهید سه ستون با عرض مساوی در عرض داشته باشید، می‌توانید از .col-4.
ستون widthهای s بر حسب درصد تنظیم می شوند، بنابراین آنها همیشه روان و نسبت به عنصر اصلی خود اندازه دارند.
برای ایجاد ناودان بین ستون‌ها، ستون‌ها افقی دارند padding، با این حال، می‌توانید marginاز ردیف‌ها و paddingستون‌ها را با .no-guttersروی علامت حذف کنید .row.
برای پاسخگو بودن شبکه، پنج نقطه شکست شبکه وجود دارد، یکی برای هر نقطه شکست پاسخگو : همه نقاط شکست (بسیار کوچک)، کوچک، متوسط، بزرگ و بسیار بزرگ.
نقاط شکست شبکه بر اساس پرس‌وجوهای رسانه حداقل عرض است، به این معنی که برای آن یک نقطه شکست و همه موارد بالای آن اعمال می‌شوند (مثلاً .col-sm-4برای دستگاه‌های کوچک، متوسط، بزرگ و بسیار بزرگ اعمال می‌شود، اما اولین xsنقطه شکست نیست).
می‌توانید از کلاس‌های شبکه از پیش تعریف‌شده (مانند .col-4) یا میکس‌های Sass برای نشانه‌گذاری معنایی بیشتر استفاده کنید.

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

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

در حالی که Bootstrap از ems یا rems برای تعریف بیشتر اندازه pxها استفاده می کند، s برای نقاط شکست شبکه و عرض کانتینر استفاده می شود. این به این دلیل است که عرض درگاه نمایش بر حسب پیکسل است و با اندازه فونت تغییر نمی کند .

ببینید که چگونه جنبه های سیستم شبکه بوت استرپ در چندین دستگاه با یک جدول مفید کار می کند.

	بسیار کوچک <576 پیکسل	کوچک ≥576 پیکسل	متوسط ≥768 پیکسل	بزرگ ≥992 پیکسل	بسیار بزرگ ≥1200 پیکسل
حداکثر عرض ظرف	هیچکدام (خودکار)	540 پیکسل	720 پیکسل	960 پیکسل	1140 پیکسل
پیشوند کلاس	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# ستون	12
عرض ناودان	30 پیکسل (15 پیکسل در هر طرف یک ستون)
تودرتو	آره
ترتیب ستون	آره

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

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

با عرض مساوی

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

1 از 2

2 از 2

1 از 3

2 از 3

3 از 3

<div class="container">
  <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 در Safari وجود داشت که از کارکرد آن بدون علامت صریح flex-basisیا border. راه‌حل‌هایی برای نسخه‌های مرورگر قدیمی‌تر وجود دارد، اما اگر به‌روز هستید، لازم نیست.

ستون

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

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

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

1 از 3

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

3 از 3

1 از 3

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

3 از 3

<div class="container">
  <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

<div class="container">
  <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>

چند ردیفی با عرض مساوی

.w-100با قرار دادن یک جایی که می خواهید ستون ها به یک خط جدید شکسته شوند، ستون هایی با عرض مساوی ایجاد کنید که چندین ردیف را در بر می گیرند. با ترکیب کردن آن .w-100با برخی ابزارهای نمایشگر پاسخگو ، وقفه ها را پاسخگو کنید .

سرهنگ

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

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

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

همه نقاط شکست

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

سرهنگ

col-8

col-4

<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>

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

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

col-sm-8

col-sm-4

col-sm

<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>

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

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

col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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>

هم ترازی

برای تراز عمودی و افقی ستون ها از ابزارهای تراز flexbox استفاده کنید.

چیدمان عمودی

یکی از سه ستون

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

یکی از سه ستون

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

تراز افقی

یکی از دو ستون

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

بدون ناودان

ناودان های بین ستون ها در کلاس های شبکه از پیش تعریف شده ما را می توان با حذف کرد .no-gutters. این margins های منفی را از .rowو افقی را paddingاز تمام ستون های فرزند فوری حذف می کند.

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

به طراحی لبه به لبه نیاز دارید؟ والد .containerیا .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

پیچیدن ستون

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

.col-9

.col-4
از 9 + 4 = 13 > 12، این div 4 ستونی به عنوان یک واحد پیوسته روی یک خط جدید پیچیده می شود.

.col-6
ستون های بعدی در امتداد خط جدید ادامه می یابند.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ستون می شکند

شکستن ستون ها به یک خط جدید در flexbox به یک هک کوچک نیاز دارد: یک عنصر را با width: 100%هر جایی که می خواهید ستون های خود را به یک خط جدید بپیچید اضافه کنید. معمولاً این با چندین .rows انجام می شود، اما هر روش پیاده سازی نمی تواند این را توضیح دهد.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

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

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

سفارش مجدد

سفارش کلاس ها

از .order-کلاس هایی برای کنترل نظم بصری محتوای خود استفاده کنید. این کلاس ها پاسخگو هستند، بنابراین می توانید orderنقطه شکست را تنظیم کنید (به عنوان مثال، .order-1.order-md-2). شامل پشتیبانی 1از 12تمام پنج لایه شبکه است.

اول، اما بدون نظم

دوم، اما آخرین

سوم، اما اول

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

همچنین ریسپانسیو .order-firstو .order-lastکلاس هایی وجود دارند که به orderترتیب با اعمال order: -1و order: 13( order: $columns + 1)، عنصر یک عنصر را تغییر می دهند. این کلاس ها همچنین می توانند در صورت نیاز با کلاس های شماره گذاری شده مخلوط شوند .order-*.

اول، اما آخر

دوم، اما بدون نظم

سوم، اما اول

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

تنظیم ستون ها

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

کلاس های افست

.offset-md-*با استفاده از کلاس ها، ستون ها را به سمت راست حرکت دهید . این کلاس ها حاشیه سمت چپ یک ستون را با *ستون افزایش می دهند. به عنوان مثال، روی چهار ستون .offset-md-4حرکت می کند ..col-md-4

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

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

col-sm-5 .col-md-6

col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

col-sm-6 .col-md-5 .col-lg-6

col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

ابزارهای حاشیه

با حرکت به flexbox در نسخه 4، می‌توانید از ابزارهای حاشیه مانند .mr-autoمجبور کردن ستون‌های خواهر و برادر از یکدیگر استفاده کنید.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

لانه سازی

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

سطح 1: .col-sm-9

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

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

میکس های ساس

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

متغیرها

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

مخلوط ها

مخلوط‌ها همراه با متغیرهای شبکه برای تولید 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

مثال استفاده

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

.example-container {
  width: 800px;
  @include make-container();
}

.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);
  }
}

محتوای اصلی

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

<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عرض های خاص نقطه شکست را که به طور مساوی در سرتاسر padding-leftو padding-rightبرای ناودان های ستون تقسیم می شوند اجازه می دهد.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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یا %) تنظیم کرده اید.