in English

Sütünler

Flexbox grid ulgamymyzyň kömegi bilen tekizlemek, sargyt etmek we öçürmek üçin sanlyja wariant bilen sütünleri nädip üýtgetmelidigini öwreniň. Mundan başga-da, gözenek däl elementleriň giňligini dolandyrmak üçin sütün synplaryny nähili ulanmalydygyny görüň.

Bu sahypada

Başlar! Tor sütünleriňizi nädip üýtgetmeli we sazlamalydygyna göz aýlamazdan ozal gözenegiň sahypasyny hökman okaň .

Olaryň nähili işleýändigi

Sütünler gözenegiň flexbox arhitekturasynda gurulýar. Flexbox, aýratyn sütünleri üýtgetmek we hatar derejesinde sütün toparlaryny üýtgetmek üçin mümkinçiliklerimiziň bardygyny aňladýar . Sütünleriň nähili ösýändigini, kiçelmegini ýa-da başgaça üýtgemegini saýlaýarsyňyz.
Panel düzülişleri gurlanda, ähli mazmun sütünlere girýär. “Bootstrap” torunyň iýerarhiýasy konteýnerden hatara sütüne mazmunyňyza geçýär. Seýrek ýagdaýlarda mazmuny we sütüni birleşdirip bilersiňiz, ýöne garaşylmadyk netijeleriň bolup biljekdigine göz ýetiriň.
“Bootstrap” çalt, täsirli düzülişleri döretmek üçin öňünden kesgitlenen sapaklary öz içine alýar. Alty aralyk nokady we her gözenek derejesinde onlarça sütün bilen , islenýän tertipleriňizi döretmek üçin eýýäm onlarça synpymyz bar. Isleseňiz, Sass arkaly ýapylyp bilner.

Deňleşdirmek

Sütünleri dik we keseligine deňlemek üçin flexbox deňleşdiriş enjamlaryny ulanyň.

Dik tekizlemek

Üç sütüniň biri

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>

Üç sütüniň biri

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>

Gorizontal deňleşdirme

Iki sütüniň biri

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>

Sütün dolamak

Bir hatarda 12-den gowrak sütün ýerleşdirilse, goşmaça sütünleriň her topary bir birlik hökmünde täze setire girer.

.col-9

.col-4
9 + 4 = 13> 12-den bäri, 4 sütünli bu diw bir bitewi birlik hökmünde täze setire örtülýär.

.col-6
Soňky sütünler täze setir boýunça dowam edýär.

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>

Sütün arakesmesi

Sütünleri flexbox-da täze setire bölmek üçin kiçijik bir hack gerek: width: 100%sütünleriňizi täze setir bilen örtmek isleýän ýeriňize element goşuň. Adatça bu birnäçe .rows bilen ýerine ýetirilýär, ýöne her bir ýerine ýetiriş usuly munuň üçin hasap edip bilmeýär.

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

Şeýle hem, bu arakesmäni duýgur displeý hyzmatlarymyz bilen belli nokatlarda ulanyp bilersiňiz .

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

Tertibe salmak

Sargyt sapaklary

Mazmunyňyzyň wizual tertibine.order- gözegçilik etmek üçin sapaklary ulanyň . Bu synplar täsirli, şonuň üçin nokady kesgitläp bilersiňiz (mysal üçin ). Alty sany gözenek derejesindäki goldawy öz içine alýar .order.order-1.order-md-215

Ilki bilen DOM-da hiç hili sargyt ulanylmady

Has uly tertip bilen DOM-da ikinji

1-nji sargyt bilen DOM-da üçünji

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>

Şeýle hem , degişlilikde elementiň üýtgemegini üýtgedýän täsirli .order-firstwe .order-lastsynplar bar . Bu sapaklary zerur bolanda sanly synplar bilen birleşdirip bolýar.orderorder: -1order: 6.order-*

Ilki DOM-da, iň soňkusy zakaz edildi

DOM-da ikinji, tertipsiz

Üçünji, DOM-da, ilki zakaz edildi

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>

Sütünleri öçürmek

Tor sütünlerini iki ýol bilen öçürip bilersiňiz: jogap .offset-beriji gözenek synplarymyz we margin hyzmatlarymyz . Grid synplary sütünlere gabat gelýär, marşrutlar ofsetiň giňligi üýtgeýän çalt düzülişler üçin has peýdalydyr.

Ofset sapaklary

Sütünleri ulanyp sütünleri saga geçiriň .offset-md-*. Bu synplar sütüniň çep gyrasyny *sütünler bilen köpeldýär. Mysal üçin, dört sütüniň üstünden .offset-md-4geçýär ..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>

Duýgur nokatlarda sütün arassalamakdan başga-da, ofsetleri täzeden düzmeli bolmagyňyz mümkin. Muny gözenegiň mysalynda görüň .

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

V4-de flexbox-a geçmek bilen, .me-autodogan sütünlerini biri-birinden uzaklaşdyrmak ýaly margin hyzmatlaryny ulanyp bilersiňiz.

.col-md-4

.col-md-4 .ms-awto

.col-md-3 .ms-md-awto

.col-auto .me-awto

.col-awto

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>

Özbaşdak sütün synplary

Sapaklar belli bir giňlik bermek üçin .col-*a daşynda hem ulanylyp bilner . .rowHaçan-da sütün sapaklary yzygiderli däl çagalar hökmünde ulanylanda, paddingler goýulmaýar.

.col-3: ini 25%

.col-sm-9: sm aralykdan 75% ini

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>

Sapaklar täsirli ýüzýän şekilleri döretmek üçin kömekçi enjamlar bilen bilelikde ulanylyp bilner. .clearfixTekst gysga bolsa, ýüzüşi arassalamak üçin mazmuny örtük bilen örtüň .

Placeer eýesi tekstiniň abzasy. Clearfix synpynyň ulanylyşyny görkezmek üçin bu ýerde ulanýarys. Bu ýerde sütünleriň ýüzýän şekil bilen nähili täsirleşýändigini görkezmek üçin bu ýerde gaty manysyz sözlemleri goşýarys.

Abzaslary görşüňiz ýaly ýüzýän şekile owadanlyk bilen örtüň. Indi munuň dowam edýän we dowam edýän, ýöne aslynda hiç hili göze görnüp duran içgysgynç ýer eýesi teksti däl-de, bu ýerdäki käbir hakyky mazmun bilen nähili görünjekdigini göz öňüne getiriň. Diňe ýer tutýar we hakykatdanam okalmaly däl.

Şeýle-de bolsa, şu ýerde, has giňişleýin düşünjelere ýa-da mazmunyň gizlin pasha ýumurtgasyna umyt edip, bu ýer eýesiniň tekstini okamaga dowam edýärsiňiz. Bir degişme, belki. Gynansagam, bu ýerde hiç zat ýok.

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>