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

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

قانداق ئىشلەيدۇ

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

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

<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كېيىن مەنپىي پەرقى بىلەن قۇرلارغا قارشى تۇرىدۇ. بۇنداق بولغاندا ، ئىستوندىكى بارلىق مەزمۇنلار كۆرۈنۈشتە سول تەرەپكە توغرىلىنىدۇ.
• كاتەكچە ئورۇنلاشتۇرۇشىدا مەزمۇن چوقۇم ستون ئىچىگە قويۇلۇشى كېرەك ، پەقەت ستونلارلا قۇرلارنىڭ بالىلىرى بولۇشى مۇمكىن.
• ئەۋرىشىم ساندۇققا رەھمەت ، بەلگىلەنگەن كاتەكچە ستونلار widthئوخشاش كەڭلىكتىكى ئىستون سۈپىتىدە ئاپتوماتىك ئورۇنلاشتۇرۇلىدۇ. مەسىلەن ، تۆت خىل .col-smئەھۋالنىڭ ھەر بىرى كىچىك بۆلەكتىن يۇقىرىغا ئاپتوماتىك ھالدا% 25 بولىدۇ. تېخىمۇ كۆپ مىساللار ئۈچۈن ئاپتوماتىك ئورۇنلاشتۇرۇش ئىستون بۆلىكىنى كۆرۈڭ .
• ستون سىنىپلىرى سىز ئىشلەتمەكچى بولغان ئىستون سانىنى كۆرسىتىدۇ. شۇڭا ، ئەگەر سىز ئوخشاش كەڭلىكتىكى ئۈچ ئىستوننى ئىشلەتمەكچى بولسىڭىز ، ئىشلەتسىڭىز بولىدۇ .col-4.
• ستون widths پىرسەنتكە تەڭشەلگەن ، شۇڭا ئۇلار ئاتا-ئانىسىغا سېلىشتۇرغاندا ھەمىشە سۇيۇقلۇق ۋە چوڭلۇقتا بولىدۇ.
• ستونلارنىڭ توغرىسىغا توغرىسىغا ئايرىم ئىستونلار ئوتتۇرىسىدا ئۆستەڭ ھاسىل بولىدۇ ، ئەمما ، سىز قۇر ۋە قۇردىكى ئىستونلارنى paddingئۆچۈرەلەيسىز .marginpadding.no-gutters.row
• كاتەكچە ئىنكاس قايتۇرۇش ئۈچۈن ، بەش تور ئۈزۈش نۇقتىسى بار ، ھەر بىر ئىنكاس قايتۇرۇش نۇقتىسىدىن بىرى : بارلىق بۆسۈش نۇقتىلىرى (قوشۇمچە كىچىك) ، كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ.
• كاتەكچە بۆسۈش ئېغىزى ئەڭ تۆۋەن كەڭلىكتىكى مېدىيا سوئاللىرىنى ئاساس قىلىدۇ ، يەنى ئۇلار بۇ بىر بۆسۈش ئېغىزى ۋە ئۇنىڭ ئۈستىدىكى بارلىق نەرسىلەرگە ماس كېلىدۇ (مەسىلەن ، .col-sm-4كىچىك ، ئوتتۇرا ، چوڭ ۋە قوشۇمچە چوڭ ئۈسكۈنىلەرگە ماس كېلىدۇ ، ئەمما بىرىنچى xsبۆسۈش ئەمەس).
• تېخىمۇ كۆپ مەنىلىك بەلگە ئۈچۈن ئالدىن بېكىتىلگەن تور سىنىپى (مەسىلەن .col-4) ياكى Sass ئارىلاشمىسىنى ئىشلىتەلەيسىز.

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

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

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

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

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

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

كەڭلىكى تەڭ

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

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

ئوخشاش كەڭلىكتىكى كۆپ لىنىيىلىك

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

بۇ يەردە Safari flexbox خاتالىقىflex-basis بار بولۇپ ، بۇنى ئېنىق ياكى ئېنىق ئىشلىمەيتتى border. كونا توركۆرگۈ نۇسخىلىرىنىڭ خىزمەت چارىلىرى بار ، ئەمما نىشانلىق توركۆرگۈڭىز كەمتۈك نەشرىگە كىرمىسە ، ئۇلار لازىم ئەمەس.

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

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

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

<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دەرسلەرنىڭ مەزمۇنىنىڭ تەبىئىي كەڭلىكىگە ئاساسەن چوڭلۇقتىكى ئىستونلارنى ئىشلىتىڭ .

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

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

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

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

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

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

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

ئارىلاش ۋە ماسلاشتۇرۇش

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

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

Gutters

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

بۇ يەردە چوڭ ( lg) بۆسۈش ئېغىزى ۋە ئۈستىدىكى Bootstrap تورىنى خاسلاشتۇرۇشنىڭ بىر مىسالى بار. بىز تاختاينى كۆپەيتتۇق ، بۇنىڭغا ئاتا-ئانىلار .colبىلەن .px-lg-5تاقابىل تۇردۇق ، ئاندىن ئورالمىنى تەڭشىدۇق ..mx-lg-n5.row.container.px-lg-5

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

قۇر ئىستون

ئىنكاسچان .row-cols-*دەرسلەرنى ئىشلىتىپ ، مەزمۇن ۋە ئورۇنلاشتۇرۇشىڭىزنى ئەڭ ياخشى تەمىنلەيدىغان ئىستون سانىنى تېز بەلگىلەڭ. نورمال .col-*دەرسلەر ئايرىم ئىستونلارغا (مەسىلەن ، .col-md-4) قوللىنىلسا ، قۇر ئىستون دەرسلىرى ئاتا-ئانىغا .rowتېزلەتمە قىلىپ بېكىتىلىدۇ.

بۇ قۇر ئىستون دەرسلىرىنى ئىشلىتىپ ئاساسىي تور ئورۇنلاشتۇرۇشىنى تېزدىن ھاسىل قىلىڭ ياكى كارتا ئورۇنلاشتۇرۇشىڭىزنى كونترول قىلىڭ.

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

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

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

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

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

توغرىلاش

تۈۋرۈكنى توغرىلاش ۋە توغرىسىغا توغرىلاش ئۈچۈن flexbox توغرىلاش قوراللىرىنى ئىشلىتىڭ. Internet Explorer 10-11 ئەۋرىشىم قاچىنىڭ تۆۋەندە كۆرسىتىلگەندەك ئەۋرىشىم تۈرلەرنىڭ تىك توغرىلىنىشىنى قوللىمايدۇ . min-height تېخىمۇ كۆپ تەپسىلاتلارنى Flexbugs # 3 دىن كۆرۈڭ.

تىك توغرىلاش

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

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

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

تۈۋرۈك ئوراش

ئەگەر بىر قۇرغا 12 دىن ئارتۇق ئىستون قويۇلسا ، ھەر بىر گۇرۇپپا قوشۇمچە ئىستونلار بىر گەۋدە سۈپىتىدە يېڭى قۇرغا ئورۇلىدۇ.

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

ستون بۇزۇلدى

Flexbox دىكى يېڭى قۇرغا ئىستونلارنى پارچىلاش كىچىك خاككېرنى تەلەپ قىلىدۇ: width: 100%ئىستوننى يېڭى قۇرغا چاپلىماقچى بولغان ئورۇنغا ئېلېمېنت قوشۇڭ. ئادەتتە بۇ بىر نەچچە .rows بىلەن ئەمەلگە ئاشىدۇ ، ئەمما ھەر بىر يولغا قويۇش ئۇسۇلى بۇنىڭ ھېسابىنى بېرەلمەيدۇ.

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

سىز بۇ بۆسۈشنى بىزنىڭ ئىنكاسچان كۆرسىتىش قوراللىرىمىز بىلەن ئالاھىدە بۆسۈش نۇقتىلىرىدا قوللانسىڭىز بولىدۇ .

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

Reordering

دەرسلەرنى زاكاز قىلىڭ

مەزمۇنلىرىڭىزنى كۆرۈش تەرتىپىنى.order- كونترول قىلىش ئۈچۈن دەرسلەرنى ئىشلىتىڭ . بۇ دەرسلەر ئىنكاسى كۈچلۈك ، شۇڭا بۆسۈش نۇقتىسى ئارقىلىق تەڭشىيەلەيسىز (مەسىلەن ، ). بەش تورنىڭ ھەممىسىدە قوللاشنى ئۆز ئىچىگە ئالىدۇ .order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

بۇ يەردە يەنە ئىنكاس قايتۇرۇش .order-firstۋە ( ) ئايرىم-ئايرىم ھالدا ئېلېمېنتنىڭ ئۆزگىرىشىنى .order-lastئۆزگەرتىدىغان دەرسلەر بار . بۇ دەرسلەرنى ئېھتىياجغا ئاساسەن نومۇر قويۇلغان دەرسلەر بىلەن ئارىلاشتۇرغىلى بولىدۇ .orderorder: -1order: 13order: $columns + 1.order-*

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

تۈۋرۈكلەرنى ئۆچۈرۈش

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

دەرسلەرنى ئۆچۈرۈڭ

.offset-md-*دەرسلەرنى ئىشلىتىپ ئىستوننى ئوڭغا يۆتكەڭ . بۇ دەرسلەر ئىستوننىڭ سول گىرۋىكىنى ئىستون ئارقىلىق ئۆستۈرىدۇ *. مەسىلەن ، تۆت ئىستوندىن .offset-md-4يۆتكىلىدۇ ..col-md-4

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

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

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

Margin utilities

.mr-autoV4 دىكى flexbox غا كۆچۈش ئارقىلىق ، ئاكا-ئۇكا ئىستونلارنى بىر-بىرىدىن يىراقلاشتۇرۇشقا ئوخشاش كىچىك قوراللارنى ئىشلىتەلەيسىز .

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

Nesting

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

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

Sass mixins

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

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

مىسال ئىشلىتىش

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

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

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

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

تۈۋرۈك ۋە ئۆستەڭ

كاتەكچە ستون سانىنى Sass ئۆزگەرگۈچى مىقدار ئارقىلىق ئۆزگەرتىشكە بولىدۇ. $grid-columnsھەر بىر يەككە ئىستوننىڭ كەڭلىكىنى (پىرسەنت) ھاسىل قىلىشقا ئىشلىتىلىدۇ ، شۇنىڭ بىلەن بىر ۋاقىتتا $grid-gutter-widthستون ئۆستەڭنىڭ كەڭلىكىنى بەلگىلەيدۇ.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !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ياكى %).