Сутунҳо

Бо шарофати системаи шабакаи flexbox мо чӣ гуна тағир додани сутунҳоро бо як қатор имконоти ҳамоҳангсозӣ, фармоиш ва ҷуброн омӯзед. Илова бар ин, бубинед, ки чӣ тавр истифода бурдани синфҳои сутун барои идоракунии паҳнои унсурҳои ғайри шабакавӣ.

Дар ин саҳифа

Сарҳо боло! Итминон ҳосил кунед, ки пеш аз ғарқ шудан ба тарзи тағир додан ва танзим кардани сутунҳои шабакаи худ аввал саҳифаи Grid-ро хонед .

Чӣ тавр онҳо кор мекунанд

Сутунҳо дар меъмории flexbox-и шабака сохта мешаванд. Flexbox маънои онро дорад, ки мо имконоти тағир додани сутунҳои инфиродӣ ва тағир додани гурӯҳҳои сутунҳо дар сатҳи сатр дорем . Шумо интихоб мекунед, ки сутунҳо чӣ гуна калон мешаванд, кам мешаванд ё ба таври дигар тағир меёбанд.
Ҳангоми сохтани тарҳҳои шабака, ҳама мундариҷа дар сутунҳо ҷойгир мешаванд. Иерархияи шабакаи Bootstrap аз контейнер ба сатр ба сутун ба мундариҷаи шумо мегузарад. Дар ҳолатҳои нодир, шумо метавонед мундариҷа ва сутунро якҷоя кунед, аммо огоҳ бошед, ки оқибатҳои ғайричашмдошт метавонанд вуҷуд дошта бошанд.
Bootstrap синфҳои пешакӣ муайяншударо барои эҷоди тарҳҳои зуд ва ҷавобгӯ дар бар мегирад. Бо шаш нуқтаи кандашавӣ ва даҳҳо сутун дар ҳар як сатҳи шабака, мо даҳҳо синфҳо дорем, ки аллакай барои шумо тарҳҳои дилхоҳатон сохта шудаанд. Агар хоҳед, онро тавассути Sass ғайрифаъол кардан мумкин аст.

Ҳамоҳангсозӣ

Барои ба таври амудӣ ва уфуқӣ мувофиқ кардани сутунҳо аз утилитаҳои ҳамоҳангсозии 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 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 сутун дар як сатр ҷойгир карда шуда бошад, ҳар як гурӯҳи сутунҳои иловагӣ ҳамчун як воҳид ба хати нав печонида мешаванд.

.кол-9

.col-4
Азбаски 9 + 4 = 13 > 12, ин div-и 4-сутуни васеъ ба хати нав ҳамчун як воҳиди ҳамсоя печонида мешавад.

.кол-6 Сутунхои
минбаъда бо хатти нав давом мекунанд.

<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%ҳар ҷое, ки мехоҳед сутунҳои худро ба хати нав печонед, як элемент илова кунед. Одатан, ин бо якчанд .rowс анҷом дода мешавад, аммо на ҳама усули татбиқ инро ҳисоб карда метавонад.

.кол-6 .кол-см-3

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

Шумо инчунин метавонед ин танаффусро дар нуқтаҳои мушаххас бо утилитаҳои намоишии ҷавобгӯи мо татбиқ кунед .

.кол-6 .кол-см-4

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

Тартиби дубора

Тартиб додани синфҳо

Барои назорат кардани тартиби визуалии мундариҷаи худ .order-дарсҳоро истифода баред . Ин синфҳо ҷавобгӯ мебошанд, аз ин рӯ шумо метавонед нуқтаи танаффусро муқаррар кунед (масалан, ). Дастгирии тамоми шаш қабати шабакаро дар бар мегирад.order.order-1.order-md-215

Аввалан дар DOM, ягон фармоиш истифода намешавад

Дуюм дар DOM, бо фармоиши калонтар

Сеюм дар DOM, бо фармоиши 1

<div class="container">
  <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синфҳо мавҷуданд, ки мувофиқан ва orderистифода бурдани унсурро тағир медиҳанд. Агар лозим бошад, ин синфҳоро бо синфҳои рақамдор омехта кардан мумкин аст.order: -1order: 6.order-*

Аввал дар DOM, охирин фармоиш дода шуд

Дуюм дар DOM, бетартиб

Сеюм дар DOM, аввал фармоиш дода мешавад

<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

.col-md-4

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

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

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

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

Илова ба тозакунии сутун дар нуқтаҳои ҷавоб, шояд ба шумо лозим меояд, ки ҷубронҳоро аз нав танзим кунед. Инро дар мисоли шабака бубинед .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.кол-см-6 .кол-мд-5 .кол-лг-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

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

Утилитҳои маржа

Бо гузаштан ба flexbox дар v4, шумо метавонед утилитаҳои маржаро истифода баред, ба монанди .me-autoмаҷбур кардани сутунҳои бародар аз ҳамдигар.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

<div class="container">
  <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-*инчунин берун аз a истифода бурдан мумкин аст, .rowто ба элемент паҳнои мушаххас диҳад. Ҳар вақте, ки синфҳои сутун ҳамчун кӯдакони ғайримустақими як сатр истифода мешаванд, пӯшишҳо партофта мешаванд.

.col-3: паҳнои 25%

.col-sm-9: паҳнои 75% боло sm нуқтаи шикаст

<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 истифода мебарем. Мо дар ин ҷо чанд ибораи бемаънӣ илова мекунем, то нишон диҳем, ки сутунҳо дар ин ҷо бо тасвири шинокунанда чӣ гуна ҳамкорӣ мекунанд.

Тавре ки шумо мебинед, параграфҳо дар атрофи тасвири шинокунанда ба таври зебо печонида мешаванд. Акнун тасаввур кунед, ки ин бо мундариҷаи воқеии ин ҷо чӣ гуна ба назар мерасад, на танҳо ин матни ҷойнишини дилгиркунанда, ки идома дорад, аммо дар асл ҳеҷ гуна иттилооти воқеӣ намерасонад. Он танҳо ҷой мегирад ва набояд дар ҳақиқат хонда шавад.

Ва аммо, дар ин ҷо шумо ҳоло ҳам дар хондани ин матни ҷойнишин истодагарӣ мекунед ва умедворед, ки фаҳмиши бештар ё тухми пасхавии пинҳонии мундариҷаро интизор шавед. Шӯхӣ, шояд. Мутаассифона, дар ин ҷо ҳеҷ яке аз инҳо нест.

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