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