Багана

Манай flexbox сүлжээний системийн ачаар багануудыг зэрэгцүүлэх, эрэмбэлэх, солих цөөн хэдэн сонголттойгоор хэрхэн өөрчлөх талаар суралцаарай. Дээрээс нь сүлжээний бус элементүүдийн өргөнийг удирдахын тулд баганын ангиудыг хэрхэн ашиглахыг харна уу.

Энэ хуудсан дээр

Анхаар! Сүлжээний баганыг хэрхэн өөрчлөх, өөрчлөх талаар мэдэхийн өмнө эхлээд Grid хуудсыг уншина уу .

Тэд хэрхэн ажилладаг

Баганууд нь сүлжээний флексбокс архитектур дээр бүтээгддэг. Flexbox гэдэг нь мөрийн түвшинд тус тусад нь багануудыг өөрчлөх болон баганын бүлгийг өөрчлөх сонголттой гэсэн үг юм. Та багана хэрхэн ургах, багасах эсвэл өөр байдлаар өөрчлөгдөхийг сонгоно.
Сүлжээний бүдүүвчийг бүтээхэд бүх агуулга багана руу ордог. Bootstrap сүлжээний шатлал нь чингэлэгээс мөр, багана хүртэл таны контент руу шилждэг. Ховор тохиолдолд та агуулга, баганыг нэгтгэж болох боловч хүсээгүй үр дагавар гарч болзошгүйг анхаарна уу.
Bootstrap нь хурдан, хариу үйлдэл үзүүлэх байршил үүсгэхэд зориулагдсан урьдчилан тодорхойлсон ангиудыг агуулдаг. Зургаан завсарлагааны цэг , сүлжээ тус бүр дээр хэдэн арван баганатай тул бид танд хүссэн загвараа бүтээхэд зориулж хэдэн арван ангиллыг бий болгосон. Хэрэв та хүсвэл үүнийг Sass-ээр идэвхгүй болгож болно.

Тохируулга

Багануудыг босоо болон хэвтээ байдлаар зэрэгцүүлэхийн тулд flexbox alignment хэрэгслийг ашиглана уу.

Босоо зэрэгцүүлэх

Гурван баганын нэг

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%хүссэн газартаа элемент нэмнэ үү. Энэ нь ихэвчлэн олон секундын тусламжтайгаар хийгддэг .rowболовч хэрэгжүүлэх арга бүр үүнийг тооцоолж чаддаггүй.

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

Дахин эрэмбэлж байна

Ангиудыг захиалах

Агуулгынхаа харааны дарааллыг.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>

Элементийг мөн тус тусад нь өөрчилдөг responsive .order-firstболон ангиуд байдаг . Шаардлагатай бол эдгээр ангиудыг дугаарлагдсан ангиудтай хольж болно ..order-lastorderorder: -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-үзүүлэх сүлжээний ангиуд болон манай margin utilities . Сүлжээний ангиудын хэмжээ нь баганатай таарч байхын зэрэгцээ офсетийн өргөн нь хувьсах боломжтой хурдан зохион байгуулалтад захын зай илүү ашигтай байдаг.

Офсет ангиуд

Ангиудыг ашиглан багануудыг баруун тийш зөөнө үү .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 хэрэгслүүд

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>

Бие даасан баганын ангиуд

Элементэд тодорхой өргөнийг өгөхийн тулд ангиудыг a .col-*гадна ашиглаж болно . .rowБаганын ангиудыг эгнээний шууд бус хүүхэд болгон ашиглах үед дэвсгэрүүдийг орхигдуулдаг.

.col-3: өргөн 25%

.col-sm-9: sm таслах цэгээс дээш 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>