آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

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

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

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

 

One of three columns
One of three columns
One of three columns

 

 <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 قرار دارند. شکستن آن در این جا این است که چگونه کار می کند. 

1-کانتینر ها ابزارهایی برای محاسبه  محاسبه محتوای سایت خود را به صورت افقی و عمودی فراهم می کنند. از Container برای عرض ریسپانسیو یا container-fluid. برای عرض: 100٪ در سراسر نمایش و اندازه دستگاه استفاده می شود.

2-ردیف ها برای ستون ها پیچیده است. هر ستون دارای padding افقی برای کنترل فاصله بین آنها است. سپس این سطوح در ردیف حاوی حاشیه منفی قرار میگیرد. به این ترتیب، تمام محتوا در ستون های شما به صورت بصری در سمت چپ قرار دارد.

3-در یک طرح شبکه، محتوا باید داخل ستون ها قرار گیرد و تنها ستون ها ممکن است فرزندانی از ردیف باشند.

4-با استفاده از flexbox، ستون های شبکه بدون یک عرض مشخص به طور خودکار به عنوان ستون های عرض برابر می شوند. به عنوان مثال، چهار نمونه از col-sm. هر یک به طور خودکار 25 درصد از نقطه توقف کوچک هستند. برای نمونه های بیشتر بخش ستون بندی خودکار را ببینید.

5-کلاس ستون تعداد ستون هایی را که می خواهید استفاده کنید از 12 مورد در هر ردیف نشان می دهد. بنابراین، اگر شما سه ستون برابر عرض می خواهید، می توانید از col-4. استفاده کنید.

6-ستون ها دارای padding افقی برای ایجاد gutters بین ستون های جداگانه هستند، اما شما می توانید حاشیه را از ردیف ها و ستون ها از ستون های no-gutters. در row. بردارید.

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

8-نقطه توقف ریسپانسیو بر اساس پرس و جو های رسانه ای استوار است، به این معنی که آن ها به آن نقطه توقف و هر نقطه ای که بالای آن قرار دارد اعمال می شود.

9-شما می توانید کلاس های شبکه های از پیش تعریف شده یا مخزن های Sass را برای نشانه گذاری معنایی بیشتر استفاده کنید.

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

 

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

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

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

 

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

 

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

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

 

عرض برابر

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

 

2of 2
 1of 2
3of 3
2of 3
 1of 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 وجود دارد که مانع از کارکرد آن بدون یک پایه یا مرز می شود. راه کار های زیادی برای نسخه های مرورگر قدیمی وجو دارد، اما اگر بروز نباشید مشکلی نیست.

 

Column
Column 
 
Column
Column

 

 <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 همچنین به این معنی است که شما می توانید عرض یک ستون را تنظیم کنید و ستون های خواهر و برادر را به طور خودکار در اطراف آن تغییر دهید. ممکن است از مخازن شبکه های از پیش تعریف شده، یا عرض های inline استفاده کنید. توجه داشته باشید که ستون های دیگر بدون توجه به عرض ستون مرکز تغییر خواهند کرد.

 

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 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 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 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. در جایی که می خواهید ستون ها را به یک خط جدید ببرید، ایجاد کنید. 

 

col
col
col
col

 

 

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

 

کلاس های ریسپانسیو 

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

 

تمام نقطه توقف

برای شبکه هایی که از کوچکترین دستگاه ها به بزرگترین هستند، از کلاس های col. و *-col. استفاده کنید. وقتی یک ستون به اندازه خاص نیاز دارید، یک کلاس شماره را مشخص کنید.

 

col
col
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.شما می توانید یک سیستم شبکه اصلی ایجاد کنید که قبل از افقی شدن در نقطه توقف کوچک شروع می شود.

 

col-sm-8
col-sm-4
col-sm
col-sm
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 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.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>

 

چیدمان عمودی 

 

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns

 

 

 

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

 

One of three columns
One of three columns
One of three columns

 

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

 

چیدمان افقی 

 

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns

 

 

 

 <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 حذف شوند. این حاشیه منفی از row. و عنصر افقی را از همه ستون های فوری فرزندان حذف می کند.

در اینجا کد منبع برای درست کردن استایل ها داریم. توجه داشته باشید که لغو شدن به تنهایی ستون های فرزند اول محدود می شود و از طریق انتخاب ویژگی انتخاب، انتخاب می شود. در حالی که این یک انتخاب گر خاص را تولید می کند با افزودن colour cloumns می توانید از utilities فاصله سفارشی سازی کنید.

نیاز به طراحی لبه به لبه دارد؟ پدر یا مادر را تهیه کنید. Container. یا Container-fluid.

 

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

 

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

 

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

 

بسته شدن ستون

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

 

.col-9
.col-4
Since 9 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

 

 

 <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، نیاز به یک هک کوچک دارد: یک عنصر با عرض: 100٪ هر جا که می خواهید ستون خود را به یک خط جدید اضافه کنید. به طور معمول این کار با چند rows. انجام می شود، اما هر روش پیاده سازی را  نمی تواند برای این حساب کند.

 

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.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
.col-6 .col-sm-4
.col-6 .col-sm-4
.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 classes

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

 

First, but unordered
Second, but last
Third, but first

 

 <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: -1 and order: 13 (order: $columns 1، ترتیب یک عنصر را تغییر می دهند. 

 

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

ستون ها را به سمت راست با استفاده از کلاس های -*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-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>

 

Marging utilities

 

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

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-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. را در یک ستون موجود در *-colol-sm. اضافه کنید. لازم نیست که از تمام 12 ستون موجود استفاده کنید.

 

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

 

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

 

sass mixins

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

 

متغییر ها

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

 $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 );

 

Mixins

Mixins در رابطه با متغیرهای شبکه برای تولید 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);

 

مثال استفاده شده 

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

 

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

 

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

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

 

cloumns and gutters

تعداد ستون های شبکه را می توان با استفاده از متغیرهای Sass تغییر داد. grid-columns$ برای تولید عرض (درصدی) هر ستون جداگانه استفاده می شود در حالی که grid-gutter-width$ اجازه می دهد عرض های خاصی را که به طور یکنواخت در کنار padding-left و padding-right برای gutters ستون تقسیم می شوند، فراهم می کند.

 

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

 

Grid tiers

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

 

 $grid-breakpoints: ( xs: 0, sm: 480px, md: 768px, lg: 1024px ); $container-max-widths: ( sm: 420px, md: 720px, lg: 960px );

 

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