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
.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-md
.контейнер-lg
.container-xl
.container-xxl
.контейнер-сұйықтық