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 (кошумча кичинекей, бул класс инфикси колдонулбайт), sm (кичинекей), md (орто), lg (чоң), xl (x-large) жана 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
.кол-6 .кол-лг-4
.кол-6 .кол-см-4
.кол-6 .кол-см-4
.кол-6 .кол-см-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-xl
.container-xxl
.контейнер-суюктук