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

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 (нэмэлт жижиг), sm (жижиг), md (дунд), lg (том), xl (хэт том) гэсэн таван шатлалтай. Та илүү динамик, уян хатан зураглал үүсгэхийн тулд эдгээр ангиудын бараг ямар ч хослолыг ашиглаж болно.

Ангиудын шатлал бүр томордог бөгөөд хэрэв та xs болон sm-ийн өргөнийг ижил болгохоор төлөвлөж байгаа бол зөвхөн xs-г зааж өгөх хэрэгтэй.

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