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