Wadhah
Wadah minangka blok bangunan dhasar Bootstrap sing ngemot, ngemot, lan nyelarasake konten sampeyan ing piranti utawa viewport tartamtu.
Carane padha bisa
Wadah minangka unsur tata letak paling dhasar ing Bootstrap lan dibutuhake nalika nggunakake sistem kothak standar . Wadah digunakake kanggo ngemot, pad, lan (kadhangkala) pusat konten ing njero. Nalika kontaner bisa disarangke, umume tata letak ora mbutuhake wadhah bersarang.
Bootstrap dilengkapi telung wadhah sing beda:
.container
, sing nyetelmax-width
ing saben breakpoint responsif.container-fluid
,width: 100%
kang ing kabeh breakpoints.container-{breakpoint}
, singwidth: 100%
nganti breakpoint sing ditemtokake
Tabel ing ngisor iki nggambarake carane saben wadhah max-width
mbandhingake karo asline .container
lan .container-fluid
ing saben breakpoint.
Deleng ing tumindak lan mbandhingake ing conto Grid kita .
Ekstra cilik <576px |
Cilik ≥576px |
Sedheng ≥768px |
Gedhe ≥992px |
X-Gedhe ≥1200px |
XX-Gedhe ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Wadhah standar
Kelas standar kita .container
minangka wadhah sing responsif, ambane tetep, tegese owah- max-width
owahan ing saben breakpoint.
<div class="container">
<!-- Content here -->
</div>
Wadhah responsif
Wadhah responsif ngidini sampeyan nemtokake kelas sing ambane 100% nganti tekan breakpoint sing ditemtokake, banjur ditrapake max-width
s kanggo saben breakpoints sing luwih dhuwur. Contone, .container-sm
iku 100% amba kanggo miwiti nganti sm
breakpoint tekan, ngendi iku bakal ukuran munggah karo md
, lg
, xl
, lan xxl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>
Wadah cairan
Gunakake .container-fluid
kanggo wadhah ambane lengkap, ngecakup kabeh jembar viewport.
<div class="container-fluid">
...
</div>
Sass
Kaya sing dituduhake ing ndhuwur, Bootstrap ngasilake seri kelas wadhah sing wis ditemtokake kanggo mbantu sampeyan nggawe tata letak sing dikarepake. Sampeyan bisa ngatur kelas wadhah sing wis ditemtokake iki kanthi ngowahi peta Sass (ditemokake ing _variables.scss
) sing menehi daya:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Saliyane ngatur Sass, sampeyan uga bisa nggawe wadhah dhewe nganggo mixin Sass.
// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
width: 100%;
padding-right: $padding-x;
padding-left: $padding-x;
margin-right: auto;
margin-left: auto;
}
// Usage
.custom-container {
@include make-container();
}
Kanggo informasi luwih lengkap lan conto babagan carane ngowahi peta lan variabel Sass, waca bagean Sass saka dokumentasi Grid .