in English

ستونلار

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

بۇ بەتتە

Heads up! كاتەكچە ئىستوننى قانداق ئۆزگەرتىش ۋە خاسلاشتۇرۇشقا شۇڭغۇشتىن بۇرۇن ئالدى بىلەن كاتەكچە بېتىنى ئوقۇشقا كاپالەتلىك قىلىڭ .

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

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

توغرىلاش

تۈۋرۈكنى توغرىلاش ۋە توغرىسىغا توغرىلاش ئۈچۈن flexbox توغرىلاش قوراللىرىنى ئىشلىتىڭ.

تىك توغرىلاش

ئۈچ ئىستوننىڭ بىرى

html

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

ئۈچ ئىستوننىڭ بىرى

html

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

توغرىسىغا توغرىلاش

ئىككى ئىستوننىڭ بىرى

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

تۈۋرۈك ئوراش

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

.col-9

.col-4
9 + 4 = 13> 12 دىن باشلاپ ، بۇ 4 ئىستون كەڭلىكتىكى div بىر تۇتاش ئورۇن سۈپىتىدە يېڭى قۇرغا ئورالغان.

.col-6
كېيىنكى ئىستونلار يېڭى لىنىيىدە داۋاملاشتى.

html

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

.col-6 .col-sm-3

html

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

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

.col-6 .col-sm-4

html

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

ئالدى بىلەن DOM دا ھېچقانداق بۇيرۇق قوللىنىلمىدى

تېخىمۇ چوڭ زاكاز بىلەن DOM دا ئىككىنچى

DOM دا ئۈچىنچىسى ، زاكاز 1

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6.order-*

ئالدى بىلەن DOM دا ، ئاخىرقى قېتىم زاكاز قىلىندى

DOM دا ئىككىنچى ، تەرتىپسىز

ئۈچىنچىسى DOM ، ئالدى بىلەن زاكاز قىلىندى

html

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

.col-md-4

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

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

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

html

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

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

.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

html

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

V4 دىكى flexbox غا يۆتكىلىش ئارقىلىق ، .me-autoئاكا-ئۇكا ئىستونلارنى بىر-بىرىدىن يىراقلاشتۇرۇشقا ئوخشاش ئەۋزەللىكلەرنى ئىشلىتەلەيسىز.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

مۇستەقىل ئىستون دەرسلىرى

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

.col-3: كەڭلىكى% 25

.col-sm-9: كەڭلىكى% 75 تىن يۇقىرى

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

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

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

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

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

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>