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

كۈچلۈك كۆچمە بىرىنچى ئەۋرىشىم ئېلېكتر تورىدىن پايدىلىنىپ ، ئون ئىككى ئىستون سىستېمىسى ، بەش سۈكۈتتىكى ئىنكاس قايتۇرۇش دەرىجىسى ، 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>

ئوخشاش كەڭلىكتىكى ئىستونلارنى بىر نەچچە قۇرغا بۆلۈشكە بولىدۇ ، ئەمما 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>

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

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

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

ئوخشاش كەڭلىكتىكى كۆپ قۇر

ئوخشاش كەڭلىكتىكى ئىستونلارنى قۇرۇپ .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>

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

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

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

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

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

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

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

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

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

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

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

<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 بىلەن ئەمەلگە ئاشىدۇ ، ئەمما ھەر بىر يولغا قويۇش ئۇسۇلى بۇنىڭ ھېسابىنى بېرەلمەيدۇ.

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

Reordering

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

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

<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دەرسلەرمۇ بار . بۇ دەرسلەرنى ئېھتىياجغا ئاساسەن نومۇر قويۇلغان دەرسلەر بىلەن ئارىلاشتۇرغىلى بولىدۇ .orderorder: -1order: 13order: $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

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

Margin utilities

V4 دىكى flexbox غا يۆتكىلىش ئارقىلىق ، .mr-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>

Nesting

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

<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 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ياكى %).