Sistem grid
Gunakake kothak flexbox pisanan seluler sing kuat kanggo nggawe tata letak kabeh wangun lan ukuran amarga sistem rolas kolom, enem tingkat responsif standar, variabel Sass lan campuran, lan puluhan kelas sing wis ditemtokake.
Tuladha
Sistem kothak Bootstrap nggunakake seri wadhah, larik, lan kolom kanggo ngatur lan nyelarasake isi. Dibangun nganggo flexbox lan responsif kanthi lengkap. Ing ngisor iki minangka conto lan panjelasan sing luwih jero babagan cara sistem kothak kasebut.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Conto ing ndhuwur nggawe telung kolom sing ambane padha ing kabeh piranti lan viewports nggunakake kelas kothak sing wis ditemtokake. Kolom kasebut dipusatake ing kaca karo wong tuwa .container
.
Cara kerjane
Mbusak mudhun, iki carane sistem kothak teka bebarengan:
-
Kothak kita ndhukung enem breakpoints responsif . Breakpoints adhedhasar
min-width
pitakon media, tegese padha mengaruhi breakpoint kasebut lan kabeh sing ana ing ndhuwur (contone,.col-sm-4
ditrapake kanggosm
,md
,lg
,xl
lanxxl
). Iki tegese sampeyan bisa ngontrol ukuran lan prilaku wadhah lan kolom kanthi saben breakpoint. -
Kontainer tengah lan isi horisontal isi sampeyan. Gunakake
.container
kanggo jembaré piksel responsif,.container-fluid
kanggowidth: 100%
kabeh viewports lan piranti, utawa wadhah responsif (contone,.container-md
) kanggo kombinasi jembaré adi lan piksel. -
Baris minangka bungkus kanggo kolom. Saben kolom nduweni horisontal
padding
(disebut talang) kanggo ngontrol spasi ing antarane. Ikipadding
banjur ditanggulangi ing larik kanthi wates negatif kanggo mesthekake isi ing kolom sampeyan didadekake visual ing sisih kiwa. Baris uga ndhukung kelas modifier supaya seragam ngetrapake ukuran kolom lan kelas talang kanggo ngganti jarak konten sampeyan. -
Kolom sing luar biasa fleksibel. Ana 12 kolom template kasedhiya saben baris, ngijini sampeyan kanggo nggawe kombinasi beda saka unsur sing jengkal nomer kolom. Kelas kolom nuduhake jumlah kolom cithakan kanggo span (contone,
col-4
span papat).width
s disetel ing persentasi supaya sampeyan tansah duwe ukuran relatif padha. -
Gutters uga responsif lan bisa disesuaikan. Kelas gutter kasedhiya ing kabeh breakpoints, kanthi ukuran sing padha karo jarak margin lan padding . Ganti talang horisontal nganggo
.gx-*
kelas, talang vertikal nganggo.gy-*
, utawa kabeh talang karo.g-*
kelas..g-0
uga kasedhiya kanggo mbusak talang. -
Variabel, peta, lan campuran Sass nguwasani kothak. Yen sampeyan ora pengin nggunakake kelas kothak sing wis ditemtokake ing Bootstrap, sampeyan bisa nggunakake sumber kothak kita Sass kanggo nggawe dhewe kanthi markup semantik liyane. Kita uga nyakup sawetara properti khusus CSS kanggo nggunakake variabel Sass iki kanggo keluwesan sing luwih gedhe kanggo sampeyan.
Waca watesan lan bug ing flexbox , kayata ora bisa nggunakake sawetara unsur HTML minangka wadhah fleksibel .
Pilihan kothak
Sistem kothak Bootstrap bisa adaptasi ing kabeh enem breakpoint standar, lan breakpoints apa wae sing sampeyan atur. Enem tingkatan kothak standar kaya ing ngisor iki:
- Ekstra cilik (xs)
- Cilik (sm)
- Sedheng (md)
- Gedhe (lg)
- Ekstra gedhe (xl)
- Ekstra gedhe (xxl)
Kaya sing kasebut ing ndhuwur, saben breakpoints iki duwe wadhah dhewe, awalan kelas unik, lan modifiers. Mangkene carane owah-owahan kothak ing breakpoints iki:
xs <576 piksel |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200 piksel |
xxl ≥1400 piksel |
|
---|---|---|---|---|---|---|
Wadhahmax-width |
Ora ana (otomatis) | 540px | 720px | 960px | 1140px | 1320px |
Ater-ater kelas | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# kolom | 12 | |||||
Jembaré talang | 1.5rem (.75rem ing kiwa lan tengen) | |||||
talang adat | ya wis | |||||
Nestable | ya wis | |||||
Urutan kolom | ya wis |
Kolom tata letak otomatis
Gunakake kelas kolom khusus breakpoint kanggo ukuran kolom sing gampang tanpa kelas nomer sing jelas kaya .col-sm-6
.
Wiyaripun padha
Contone, ing kene ana rong tata letak kothak sing ditrapake kanggo saben piranti lan viewport, saka xs
nganti xxl
. Tambah sawetara kelas unit-kurang kanggo saben breakpoint sampeyan perlu lan saben kolom bakal padha jembaré.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Nyetel siji jembar kolom
Tata letak otomatis kanggo kolom kothak flexbox uga tegese sampeyan bisa nyetel jembar siji kolom lan duwe kolom sadulur kanthi otomatis ngowahi ukurane. Sampeyan bisa nggunakake kelas kothak sing wis ditemtokake (kaya sing kapacak ing ngisor iki), campuran kothak, utawa jembar inline. Elinga yen kolom liyane bakal ngowahi ukuran ora ketompo jembar kolom tengah.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Isi jembaré variabel
Gunakake col-{breakpoint}-auto
kelas kanggo ukuran kolom adhedhasar jembar alami saka isi.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Kelas responsif
Kothak Bootstrap kalebu enem undakan kelas sing wis ditemtokake kanggo mbangun tata letak responsif sing kompleks. Kustomisasi ukuran kolom sampeyan ing piranti sing luwih cilik, cilik, medium, gedhe, utawa luwih gedhe, sanajan sampeyan cocog.
Kabeh breakpoints
Kanggo kothak sing padha saka piranti paling cilik nganti paling gedhe, gunakake kelas .col
lan .col-*
. Nemtokake kelas nomer nalika sampeyan mbutuhake kolom ukuran khusus; digunakake, aran gratis kanggo kelet kanggo .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Ditumpuk menyang horisontal
Nggunakake pesawat siji saka .col-sm-*
kelas, sampeyan bisa nggawe sistem kothak dhasar sing wiwit metu dibandhingke lan dadi horisontal ing breakpoint cilik ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Nyampur lan cocog
Ora pengin kolom sampeyan mung tumpukan ing sawetara undakan kothak? Gunakake kombinasi kelas sing beda kanggo saben undakan yen perlu. Deleng conto ing ngisor iki kanggo ide sing luwih apik babagan cara kerjane.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Kolom baris
Gunakake .row-cols-*
kelas responsif kanggo nyetel kanthi cepet jumlah kolom sing paling apik kanggo nggawe konten lan tata letak sampeyan. Dene .col-*
kelas normal ditrapake kanggo kolom individu (contone, .col-md-4
), kelas kolom baris disetel ing induk .row
minangka standar kanggo kolom sing ana. Kanthi .row-cols-auto
sampeyan bisa menehi kolom jembaré alam.
Gunakake kelas kolom baris iki kanggo nggawe tata letak kothak dhasar kanthi cepet utawa kanggo ngontrol tata letak kertu lan timpa yen perlu ing tingkat kolom.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
</div>
</div>
Sampeyan uga bisa nggunakake mixin Sass sing diiringi row-cols()
,:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
nyarang
Kanggo nyelehake konten sampeyan nganggo kothak gawan, tambahake kolom anyar .row
lan set .col-sm-*
ing .col-sm-*
kolom sing wis ana. Baris sing disusun kudu kalebu sakumpulan kolom sing nambah nganti 12 utawa kurang (ora perlu nggunakake kabeh 12 kolom sing kasedhiya).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
Nalika nggunakake file Sass sumber Bootstrap, sampeyan duwe pilihan nggunakake variabel Sass lan mixin kanggo nggawe tata letak kaca khusus, semantik, lan responsif. Kelas kothak sing wis ditemtokake nggunakake variabel lan campuran sing padha kanggo nyedhiyakake kabeh kelas sing siap digunakake kanggo tata letak responsif kanthi cepet.
Variabel
Variabel lan peta nemtokake jumlah kolom, jembaré talang, lan titik pitakon media kanggo miwiti kolom ngambang. Iki digunakake kanggo ngasilake kelas kothak sing wis ditemtokake sing didokumentasikake ing ndhuwur, uga kanggo campuran khusus sing kapacak ing ngisor iki.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Campuran
Mixin digunakake bebarengan karo variabel kothak kanggo ngasilake CSS semantik kanggo kolom kothak individu.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Conto panggunaan
Sampeyan bisa ngowahi variabel menyang nilai khusus, utawa mung nggunakake mixin kanthi nilai standar. Iki conto nggunakake setelan gawan kanggo nggawe tata letak loro-kolom karo longkangan antarane.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Ngatur kothak
Nggunakake variabel lan peta Sass kothak sing dibangun, sampeyan bisa ngatur kabeh kelas kothak sing wis ditemtokake. Ganti nomer undakan, dimensi query media, lan ambane wadah—banjur kompilasi maneh.
Kolom lan talang
Jumlah kolom kothak bisa diowahi liwat variabel Sass. $grid-columns
digunakake kanggo generate widths (ing persen) saben kolom individu nalika $grid-gutter-width
nyetel jembaré kanggo talang kolom.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Tiers kothak
Ngalih ngluwihi kolom dhewe, sampeyan uga bisa ngatur jumlah undakan kothak. Yen sampeyan pengin mung papat kothak kothak, sampeyan bakal nganyari $grid-breakpoints
lan $container-max-widths
kaya iki:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Nalika nggawe owah-owahan ing variabel utawa peta Sass, sampeyan kudu nyimpen pangowahan lan ngumpulake maneh. Mengkono bakal ngasilake set anyar saka kelas kothak sing wis ditemtokake kanggo jembar kolom, offset, lan pesenan. Utilitas visibilitas responsif uga bakal dianyari kanggo nggunakake breakpoints khusus. Priksa manawa kanggo nyetel nilai kothak ing px
(ora rem
, em
, utawa %
).