Tuladha kothak bootstrap

Tata letak kothak dhasar supaya sampeyan ngerti babagan bangunan ing sistem kothak Bootstrap.

Ing conto iki, .themed-grid-colkelas ditambahake menyang kolom kanggo nambah sawetara tema. Iki dudu kelas sing kasedhiya ing Bootstrap kanthi standar.

Limang undakan kothak

Ana limang undakan kanggo sistem kothak Bootstrap, siji kanggo saben sawetara piranti sing didhukung. Saben undakan diwiwiti kanthi ukuran viewport minimal lan otomatis ditrapake ing piranti sing luwih gedhe kajaba ditimpa.

.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

Telung kolom sing padha

Entuk telung kolom sing padha karo ambane diwiwiti ing desktop lan skala menyang desktop gedhe . Ing piranti seluler, tablet lan ing ngisor iki, kolom bakal ditumpuk kanthi otomatis.

.col-md-4
.col-md-4
.col-md-4

Telung kolom alternatif sing padha

Kanthi nggunakake .row-cols-*kelas, sampeyan bisa nggawe kothak kanthi kolom sing padha.

.colanak saka .row-cols-md-3
.colanak saka .row-cols-md-3
.colanak saka .row-cols-md-3

Telung kolom sing ora padha

Entuk telung kolom wiwit ing desktop lan skala menyang desktop gedhe saka macem-macem jembar. Elinga, kolom kothak kudu ditambahake nganti rolas kanggo blok horisontal siji. Luwih saka iku, lan kolom wiwit numpuk ora ketompo viewport.

.col-md-3
.col-md-6
.col-md-3

Loro kolom

Entuk rong kolom wiwit ing desktop lan skala menyang desktop gedhe .

.col-md-8
.col-md-4

Jembar lengkap, kolom siji

Ora ana kelas kothak sing dibutuhake kanggo unsur jembar lengkap.

Loro kolom karo rong kolom nested

Miturut dokumentasi, nesting gampang - mung sijine baris kolom ing kolom sing wis ana. Iki menehi sampeyan rong kolom wiwit ing desktop lan scaling menyang desktop gedhe , karo loro liyane (jembaré padha) ing kolom luwih gedhe.

Ing ukuran piranti seluler, tablet lan mudhun, kolom kasebut lan kolom bersarang bakal ditumpuk.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Campuran: seluler lan desktop

Sistem kothak Bootstrap v5 nduweni enem tingkat kelas: xs (ekstra cilik, infix kelas iki ora digunakake), sm (cilik), md (sedheng), lg (gedhe), xl (x-gedhe), lan xxl (xx). -gedhe). Sampeyan bisa nggunakake meh kabeh kombinasi kelas kasebut kanggo nggawe tata letak sing luwih dinamis lan fleksibel.

Saben undakan kelas timbangan munggah, tegese yen sampeyan rencana nyetel jembaré padha kanggo md, lg, xl lan xxl, sampeyan mung kudu nemtokake 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

Campuran: seluler, tablet, lan desktop

.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

talang

Kanthi .gx-*kelas, talang horisontal bisa diatur.

.colkaro .gx-4talang
.colkaro .gx-4talang
.colkaro .gx-4talang
.colkaro .gx-4talang
.colkaro .gx-4talang
.colkaro .gx-4talang

Gunakake .gy-*kelas kanggo ngontrol talang vertikal.

.colkaro .gy-4talang
.colkaro .gy-4talang
.colkaro .gy-4talang
.colkaro .gy-4talang
.colkaro .gy-4talang
.colkaro .gy-4talang

Kanthi .g-*kelas, talang ing loro arah bisa diatur.

.colkaro .g-3talang
.colkaro .g-3talang
.colkaro .g-3talang
.colkaro .g-3talang
.colkaro .g-3talang
.colkaro .g-3talang

Wadhah

Kelas tambahan sing ditambahake ing Bootstrap v4.4 ngidini wadhah sing ambane 100% nganti breakpoint tartamtu. v5 nambah xxlbreakpoint anyar.

.wadhah
.wadhah-sm
.wadhah-md
.wadhah-lg
.wadhah-xl
.wadhah-xxl
.wadhah-cairan