Bootstrap сүлжээний жишээнүүд

Bootstrap сүлжээний систем доторх барилга байгууламжийг таниулах үндсэн сүлжээний схемүүд.

Эдгээр жишээн .themed-grid-colдээр зарим сэдэв нэмэхийн тулд ангиудыг баганууд дээр нэмсэн. Энэ нь анхдагчаар Bootstrap дээр байдаг анги биш юм.

Таван сүлжээ шат

Bootstrap сүлжээний систем нь бидний дэмждэг төхөөрөмжүүдийн төрөл бүрийн нэг шатлалтай таван шатлалтай. Түвшин бүр нь хамгийн бага харах цонхны хэмжээнээс эхэлдэг бөгөөд хэрэв дарагдаагүй бол илүү том төхөөрөмжүүдэд автоматаар хэрэгжинэ.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

Гурван тэнцүү багана

Ширээний компьютерээс эхлээд том хэмжээтэй ширээний компьютер болгон өргөжүүлэх гурван тэнцүү өргөнтэй багана аваарай . Хөдөлгөөнт төхөөрөмж, таблетууд болон доор нь баганууд автоматаар давхарлана.

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

Гурван тэгш бус багана

Ширээний компьютерээс эхлээд янз бүрийн өргөнтэй том ширээний компьютер болгон өргөжүүлэх гурван багана аваарай . Нэг хэвтээ блокийн хувьд сүлжээ багана нь арван хоёр хүртэл нэмэгдэх ёстой гэдгийг санаарай. Үүнээс илүү бөгөөд баганууд нь харах цонхноос үл хамааран давхарлаж эхэлдэг.

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

Хоёр багана

Ширээний компьютерээс эхлээд том ширээний компьютер болгон өргөжүүлэх хоёр багана аваарай .

.col-md-8
.col-md-4

Бүтэн өргөн, нэг багана

Бүрэн өргөнтэй элементүүдэд торны анги шаардлагагүй.


Хоёр багана бүхий хоёр багана

Баримт бичгийн дагуу үүрлэх нь хялбар байдаг - одоо байгаа баганын дотор баганын эгнээ тавихад л хангалттай. Энэ нь танд ширээний компьютерээс эхлээд том ширээний компьютер болгон өргөтгөх хоёр багана өгөх ба том баганад өөр хоёр (тэнцүү өргөн) багана өгнө.

Хөдөлгөөнт төхөөрөмжийн хэмжээ, таблет болон түүнээс доош хэмжээтэй үед эдгээр баганууд болон тэдгээрийн үүрлэсэн баганууд овоолно.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Холимог: гар утас болон ширээний компьютер

Bootstrap v4 сүлжээний систем нь xs (нэмэлт жижиг, энэ ангийн infix ашиглагддаггүй), sm (жижиг), md (дунд), lg (том) болон xl (маш том) гэсэн таван шатлалтай. Та илүү динамик, уян хатан зураглал үүсгэхийн тулд эдгээр ангиудын бараг ямар ч хослолыг ашиглаж болно.

Ангиудын шат бүр өргөжиж, хэрэв та md, lg болон xl-ийн өргөнийг ижил болгохоор төлөвлөж байгаа бол зөвхөн md-ийг зааж өгөх хэрэгтэй гэсэн үг юм.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Холимог: гар утас, таблет, ширээний компьютер

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Контейнер

Bootstrap v4.4-д нэмсэн нэмэлт ангиуд нь тодорхой таслах цэг хүртэл 100% өргөнтэй савыг зөвшөөрдөг.

.контейнер
.container-sm
.container-md
.container-lg
.container-xl
.контейнер-шингэн