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-xxl-4
.col-xxl-4
.col-xxl-4

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

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

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

Гурван тэнцүү баганын хувилбар

Ангиудыг ашигласнаар .row-cols-*та ижил баганатай сүлжээг хялбархан үүсгэж болно.

.col-ийн хүүхэд .row-cols-md-3
.col-ийн хүүхэд .row-cols-md-3
.col-ийн хүүхэд .row-cols-md-3

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

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

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

Ангиудын шат бүр өргөжиж, хэрэв та md, lg, xl болон xxl-ийн өргөнийг ижил болгохоор төлөвлөж байгаа бол зөвхөн 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

Суваг

Ангиудын тусламжтайгаар .gx-*хэвтээ сувгийг тохируулах боломжтой.

.col.gx-4сувагтай _
.col.gx-4сувагтай _
.col.gx-4сувагтай _
.col.gx-4сувагтай _
.col.gx-4сувагтай _
.col.gx-4сувагтай _

Ангиудыг ашиглан .gy-*босоо суваг шуудууг удирдана.

.col.gy-4сувагтай _
.col.gy-4сувагтай _
.col.gy-4сувагтай _
.col.gy-4сувагтай _
.col.gy-4сувагтай _
.col.gy-4сувагтай _

Хичээлтэй .g-*бол хоёр талын суваг шуудууг тохируулах боломжтой.

.col.g-3сувагтай _
.col.g-3сувагтай _
.col.g-3сувагтай _
.col.g-3сувагтай _
.col.g-3сувагтай _
.col.g-3сувагтай _

Контейнер

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

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