in English

Wadhah

Wadah minangka blok bangunan dhasar Bootstrap sing ngemot, ngemot, lan nyelarasake konten sampeyan ing piranti utawa viewport tartamtu.

Ing kaca iki

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 nyetel max-widthing saben breakpoint responsif
.container-{breakpoint}, sing width: 100%nganti breakpoint sing ditemtokake
.container-fluid, width: 100%kang ing kabeh breakpoints

Tabel ing ngisor iki nggambarake carane saben wadhah max-widthmbandhingake karo asline .containerlan .container-fluiding saben breakpoint.

Deleng ing tumindak lan mbandhingake ing conto Grid kita .

	Ekstra cilik <576px	Cilik ≥576 piksel	Sedheng ≥768 piksel	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 .containerminangka wadhah sing responsif, ambane tetep, tegese owah- max-widthowahan 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-widths kanggo saben breakpoints sing luwih dhuwur. Contone, .container-smiku 100% amba kanggo miwiti nganti smbreakpoint 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-fluidkanggo 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 .