Tuladha kothak bootstrap

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

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 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 3 duwe papat kelas kelas: xs (telpon), sm (tablet), md (desktop), lan lg (desktop luwih 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 xs lan sm, sampeyan mung kudu nemtokake xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Campuran: seluler, tablet, lan desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Mbusak kolom

Clear floats ing breakpoints tartamtu kanggo nyegah pambungkus kikuk karo isi ora rata.

.col-xs-6 .col-sm-3
Owahi ukuran viewport utawa priksa ing telpon kanggo conto.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push, lan pull reset

Reset offset, push, lan narik ing breakpoints tartamtu.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0