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

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

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

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

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

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

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

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

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

Багана цэвэрлэх

Тэгш бус агуулгаар эвгүй ороохоос сэргийлэхийн тулд тодорхой завсарлагаан дээр хөвөгчийг цэвэрлэ .

.col-xs-6 .col-sm-3
Харах цонхны хэмжээг өөрчлөх юм уу утсан дээрээ шалгаарай.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Офсет, түлхэх, татах тохиргоог дахин тохируулна

Тодорхой таслах цэгүүдэд офсет, түлхэх, татах үйлдлийг дахин тохируулна уу.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0