تور سىستېمىسى

كۈچلۈك كۆچمە بىرىنچى ئەۋرىشىم ئېلېكتر تورىدىن پايدىلىنىپ ، ئون ئىككى ئىستون سىستېمىسى ، ئالتە سۈكۈتتىكى ئىنكاس قايتۇرۇش دەرىجىسى ، Sass ئۆزگەرگۈچى مىقدار ۋە ئارىلاشمىلار ۋە ئالدىن بېكىتىلگەن ئون نەچچە سىنىپنىڭ ياردىمىدە ھەر خىل شەكىلدىكى چوڭ-كىچىكلىكلەرنى ئورۇنلاشتۇرۇڭ.

بۇ بەتتە

مىسال

Bootstrap نىڭ تور سىستېمىسى بىر قاتار قاچا ، قۇر ۋە ستونلارنى ئىشلىتىپ مەزمۇننى ئورۇنلاشتۇرىدۇ ۋە ماسلاشتۇرىدۇ. ئۇ flexbox بىلەن ياسالغان بولۇپ ، تولۇق ئىنكاس قايتۇرىدۇ. تۆۋەندە تور سىستېمىسىنىڭ قانداق بىرلىشىدىغانلىقىنى مىسال ۋە چوڭقۇر چۈشەندۈردۇق.

Flexbox غا يېڭىمۇ ياكى ناتونۇشمۇ؟ تەگلىك ، تېرمىنولوگىيە ، كۆرسەتمە ۋە كود پارچىلىرى ئۈچۈن بۇ CSS Tricks ئەۋرىشىم قوللانمىسىنى ئوقۇڭ .

ستون

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-4smmdlgxlxxl
كونتېينېرلار مەركىزى ۋە توغرىسىغا توغرىلىنىدۇ. .containerئىنكاسچان پېكسىل كەڭلىكى ، بارلىق كۆرۈنۈش ئۈسكۈنىلىرى ۋە ئۈسكۈنىلەر ئۈچۈن ياكى سۇيۇقلۇق بىلەن پېكسىل كەڭلىكىنى بىرلەشتۈرۈش ئۈچۈن ئىنكاس قاچىسى (مەسىلەن .container-fluid) نى ئىشلىتىڭ .width: 100%.container-md
قۇرلار ستون ئۈچۈن ئورالغان. ھەر بىر ئىستوننىڭ paddingئارىسىدىكى بوشلۇقنى كونترول قىلىش ئۈچۈن توغرىسىغا (ئۆستەڭ دېيىلىدۇ) بار. ئاندىن بۇ paddingقۇرلارغا سەلبىي گىرۋەكلەر بىلەن قارشىلىشىپ ، ئىستوندىكى مەزمۇنلارنىڭ سول تەرەپكە كۆرۈنۈش بىلەن توغرىلىنىشىغا كاپالەتلىك قىلىدۇ. قۇرلار يەنە ئۆزگەرتىش سىنىپىنىڭ ئىستون چوڭلۇقى ۋە ئۆستەڭ سىنىپىنى بىردەك قوللاپ ، مەزمۇنلىرىڭىزنىڭ ئارىلىقىنى ئۆزگەرتىدۇ.
تۈۋرۈكلەر ئاجايىپ جانلىق. ھەر بىر قۇردا 12 خىل قېلىپ تۈۋرۈكى بار بولۇپ ، ھەر خىل ئىستونلارنى ئۆز ئىچىگە ئالغان ئوخشىمىغان ئېلېمېنتلارنىڭ بىرىكمىسىنى ھاسىل قىلالايسىز. ستون دەرسلىرى قېلىپلاشقان ئىستون سانىنى كۆرسىتىدۇ (مەسىلەن col-4تۆتنى ئۆز ئىچىگە ئالىدۇ). widths پىرسەنت بويىچە تەڭشەلگەن ، شۇڭا ھەمىشە ئوخشاش نىسپىي چوڭلۇقتا بولىسىز.
گۇتېرلارمۇ ئىنكاسچان ۋە خاسلاشتۇرغىلى بولىدۇ. گۇتېر دەرسلىرى بارلىق بۆسۈش نۇقتىلىرىدا بار ، بىزنىڭ چوڭ-كىچىكلىكىمىز ۋە تاختا ئارىلىقىمىز ئوخشاش . گورىزونتال ئۆستەڭنى .gx-*دەرسلەر ، تىك ئۆستەڭلەر .gy-*ياكى دەرسلەر بىلەن بارلىق ئۆستەڭلەرنى ئۆزگەرتىڭ .g-*. .g-0ئۆستەڭلەرنى ئېلىۋەتكىلى بولىدۇ.
Sass ئۆزگەرگۈچى مىقدار ، خەرىتە ۋە ئارىلاشما ئېلېكتر تورىنى قوزغىتىدۇ. ئەگەر Bootstrap دا ئالدىن بېكىتىلگەن تور تورىنى ئىشلىتىشنى خالىمىسىڭىز ، تورىمىزنىڭ مەنبەسى Sass نى ئىشلىتىپ تېخىمۇ كۆپ مەنىلىك بەلگە ئارقىلىق ئۆزىڭىزنى قۇرالايسىز. بىز يەنە بىر قىسىم CSS خاسلىقلىرىنى ئۆز ئىچىگە ئالىمىز ، بۇ Sass ئۆزگەرگۈچى مىقدارلىرىنى سىز ئۈچۈن تېخىمۇ جانلىق.

ئەۋرىشىم ساندۇق ئەتراپىدىكى چەكلىمىلەر ۋە كەمتۈكلۈكلەرگە دىققەت قىلىڭ ، مەسىلەن بەزى HTML ئېلېمېنتلىرىنى ئەۋرىشىم قاچا قىلىپ ئىشلىتەلمەسلىك .

كاتەكچە تاللاش

Bootstrap نىڭ تور سىستېمىسى ئالتە سۈكۈتتىكى بۆسۈش ئېغىزى ۋە سىز بەلگىلىگەن ھەر قانداق بۆسۈش ئېغىزىغا ماسلىشالايدۇ. ئالتە سۈكۈتتىكى تور دەرىجىسى تۆۋەندىكىچە:

قوشۇمچە كىچىك (xs)
كىچىك (sm)
ئوتتۇراھال (md)
چوڭ (lg)
قوشۇمچە چوڭ (xl)
ئارتۇقچە چوڭ (xxl)

يۇقىرىدا دەپ ئۆتكىنىمىزدەك ، بۇ بۆلەكلەرنىڭ ھەر بىرىنىڭ ئۆزىگە خاس قاچىسى ، ئۆزگىچە سىنىپ ئالدى قوشۇلغۇچىسى ۋە ئۆزگەرتكۈچلىرى بار. تورنىڭ بۇ بۆسۈش نۇقتىلىرىدا قانداق ئۆزگىرىشى بار:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
كونتېينېر`max-width`	None (auto)	540px	720px	960px	1140px	1320px
سىنىپ ئالدى قوشۇلغۇچىسى	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ئىستون	12
كەڭلىك كەڭلىكى	1.5rem (سول ۋە ئوڭ تەرەپتىكى .75rem)
ئىختىيارىي ئۆستەڭ	ھەئە
Nestable	ھەئە
ستون زاكاز قىلىش	ھەئە

ئاپتوماتىك ئورۇنلاشتۇرۇش ستونلىرى

ئېنىق نومۇر تۈرىگە ئوخشاش ئاسان ئىستون چوڭلۇقى ئۈچۈن بۆسۈش خاراكتېرلىك ستون دەرسلىكىدىن پايدىلىنىڭ .col-sm-6.

كەڭلىكى تەڭ

مەسىلەن ، بۇ يەردە ھەر بىر ئۈسكۈنى ۋە كۆرۈنۈش ئېغىزىغا ماس كېلىدىغان ئىككى خىل تور ئورۇنلاشتۇرۇشى xsبار xxl. سىز ئېھتىياجلىق بولغان ھەر بىر بۆسۈش ئېغىزىغا بىر قانچە سانسىز سىنىپ قوشۇڭ ، ھەر بىر ئىستون ئوخشاش كەڭلىكتە بولىدۇ.

1 of 2

2 of 2

1 of 3

2 of 3

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

بىر ئىستون كەڭلىكىنى تەڭشەش

ئەۋرىشىم كاتەكچە ستوننىڭ ئاپتوماتىك ئورۇنلاشتۇرۇلۇشى يەنە بىر ئىستوننىڭ كەڭلىكىنى تەڭشىيەلەيدىغانلىقىڭىزنى ۋە ئاكا-ئۇكا ئىستونلارنىڭ ئاپتوماتىك چوڭلۇقىنى تەڭشىيەلەيدىغانلىقىڭىزنى بىلدۈرىدۇ. سىز ئالدىن بېكىتىلگەن تور سىنىپى (تۆۋەندە كۆرسىتىلگەندەك) ، كاتەكچە ئارىلاشما ياكى سىزىق كەڭلىكىنى ئىشلىتەلەيسىز. شۇنىڭغا دىققەت قىلىڭكى ، باشقا ئىستونلارنىڭ مەركىزى ئىستوننىڭ كەڭلىكى قانداق بولۇشىدىن قەتئىينەزەر چوڭ-كىچىكلىكى چوڭ بولىدۇ.

1 of 3

2 دىن 3 (تېخىمۇ كەڭ)

3 of 3

1 of 3

2 دىن 3 (تېخىمۇ كەڭ)

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

ئۆزگىرىشچان كەڭلىك مەزمۇنى

3 of 3

1 of 3

ئۆزگىرىشچان كەڭلىك مەزمۇنى

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

مەسئۇلىيەتچان دەرسلەر

Bootstrap تورى مۇرەككەپ ئىنكاس لايىھىسى قۇرۇش ئۈچۈن ئالدىن بېكىتىلگەن ئالتە قاتلامنى ئۆز ئىچىگە ئالىدۇ. ئىستونلىرىڭىزنىڭ چوڭ-كىچىكلىكىنى كىچىك ، كىچىك ، ئوتتۇرا ، چوڭ ياكى قوشۇمچە چوڭ ئۈسكۈنىلەرگە ماسلاشتۇرۇڭ.

بارلىق بۆسۈش نۇقتىلىرى

كىچىك ئۈسكۈنىلەردىن تارتىپ چوڭلارغىچە ئوخشاش بولغان تورلارغا نىسبەتەن ، دەرس .colۋە .col-*دەرسلەرنى ئىشلىتىڭ. ئالاھىدە چوڭلۇقتىكى ئىستونغا ئېھتىياجلىق بولغاندا نومۇر قويۇلغان سىنىپنى بەلگىلەڭ. بولمىسا ، چىڭ تۇرۇڭ .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>

قوشۇمچە ساس ئارىلاشمىسىنى ئىشلەتسىڭىزمۇ بولىدۇ 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);
  }
}

Nesting

سۈكۈتتىكى تور بىلەن مەزمۇنلىرىڭىزنى ئۇۋىلاش ئۈچۈن ، بار بولغان ئىستونغا يېڭى .rowۋە بىر قاتار ستون قوشۇڭ . ئۇلانغان قۇرلار 12 ياكى ئۇنىڭدىن تۆۋەن بولغان بىر قاتار ئىستونلارنى ئۆز ئىچىگە ئېلىشى كېرەك (ئىشلەتكىلى بولىدىغان 12 ئىستوننىڭ ھەممىسىنى ئىشلىتىشىڭىز تەلەپ قىلىنمايدۇ)..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

Bootstrap نىڭ مەنبە 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
);

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

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

تورنى خاسلاشتۇرۇش

ئىچىگە ئورۇنلاشتۇرۇلغان تور 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 tiers

ستونلارنىڭ ئۆزىدىن ھالقىپ كەتسىڭىز ، تور دەرىجىسىنىڭ سانىنىمۇ تەڭشىيەلەيسىز. ئەگەر سىز پەقەت تۆت كاتەكچە دەرىجىگە ئېرىشمەكچى بولسىڭىز ، بۇنى $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ياكى %).