Мамычалар

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ден ашык мамычалар жайгаштырылса, кошумча мамычалардын ар бир тобу бир бирдик катары жаңы сапка оролот.

.col-9

.col-4
9 + 4 = 13 > 12 болгондуктан, бул 4 тилкелүү кенен div жаңы сапка бир туташ бирдик катары оролот.

.col-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-lastorderorder: -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

.col-sm-6 .col-md-5 .col-lg-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>

Маржа утилиталары

V4'те flexbox'ка өтүү менен, .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-*а сыртында да колдонсо болот . .rowМамыча класстары саптын тике эмес балдары катары колдонулганда, толтургучтар алынып салынат.

.col-3: туурасы 25%

.col-sm-9: туурасы см үзүү чекитинен 75% жогору

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