Tuladha kothak bootstrap
Tata letak kothak dhasar supaya sampeyan ngerti babagan bangunan ing sistem kothak Bootstrap.
Ing conto iki, .themed-grid-col
kelas 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.
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.
Telung kolom alternatif sing padha
Kanthi nggunakake .row-cols-*
kelas, sampeyan bisa nggawe kothak kanthi kolom sing padha.
.col
anak saka
.row-cols-md-3
.col
anak saka
.row-cols-md-3
.col
anak 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.
Loro kolom
Entuk rong kolom wiwit ing desktop lan skala menyang desktop gedhe .
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.
Campuran: seluler lan desktop
Sistem kothak Bootstrap v4 nduweni limang undakan kelas: xs (ekstra cilik, infix kelas iki ora digunakake), sm (cilik), md (sedheng), lg (gedhe), lan xl (ekstra 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 lan xl, sampeyan mung kudu nemtokake md.
Campuran: seluler, tablet, lan desktop
talang
Kanthi .gx-*
kelas, talang horisontal bisa diatur.
.col
karo
.gx-4
talang
.col
karo
.gx-4
talang
.col
karo
.gx-4
talang
.col
karo
.gx-4
talang
.col
karo
.gx-4
talang
.col
karo
.gx-4
talang
Gunakake .gy-*
kelas kanggo ngontrol talang vertikal.
.col
karo
.gy-4
talang
.col
karo
.gy-4
talang
.col
karo
.gy-4
talang
.col
karo
.gy-4
talang
.col
karo
.gy-4
talang
.col
karo
.gy-4
talang
Kanthi .g-*
kelas, talang ing loro arah bisa diatur.
.col
karo
.g-3
talang
.col
karo
.g-3
talang
.col
karo
.g-3
talang
.col
karo
.g-3
talang
.col
karo
.g-3
talang
.col
karo
.g-3
talang
Wadhah
Kelas tambahan sing ditambahake ing Bootstrap v4.4 ngidini wadhah sing ambane 100% nganti breakpoint tartamtu. v5 nambah xxl
breakpoint anyar.