Zabojniki

Vsebniki so temeljni gradnik Bootstrapa, ki vsebujejo, oblagajo in poravnajo vašo vsebino znotraj dane naprave ali vidnega polja.

Na tej strani

Kako delujejo

Vsebniki so najosnovnejši element postavitve v Bootstrapu in so potrebni pri uporabi našega privzetega mrežnega sistema . Vsebniki se uporabljajo za shranjevanje, oblaganje in (včasih) središče vsebine v njih. Medtem ko so vsebniki lahko ugnezdeni, večina postavitev ne zahteva ugnezdenega vsebnika.

Bootstrap ima tri različne vsebnike:

.container, ki nastavi a max-widthna vsaki odzivni prekinitveni točki
.container-fluid, ki je width: 100%na vseh prelomnih točkah
.container-{breakpoint}, ki je width: 100%do podane prelomne točke

Spodnja tabela prikazuje max-widthprimerjavo posameznega vsebnika z izvirnikom .containerin .container-fluidna vsaki prelomni točki.

Oglejte si jih v akciji in jih primerjajte v našem primeru mreže .

	Zelo majhen <576 slikovnih pik	Majhna ≥576 slikovnih pik	Srednje ≥768 slikovnih pik	Velika ≥992 slikovnih pik	X-Large ≥1200 slikovnih pik	XX-veliko ≥1400 slikovnih pik
`.container`	100 %	540 slikovnih pik	720 slikovnih pik	960 slikovnih pik	1140 slikovnih pik	1320 slikovnih pik
`.container-sm`	100 %	540 slikovnih pik	720 slikovnih pik	960 slikovnih pik	1140 slikovnih pik	1320 slikovnih pik
`.container-md`	100 %	100 %	720 slikovnih pik	960 slikovnih pik	1140 slikovnih pik	1320 slikovnih pik
`.container-lg`	100 %	100 %	100 %	960 slikovnih pik	1140 slikovnih pik	1320 slikovnih pik
`.container-xl`	100 %	100 %	100 %	100 %	1140 slikovnih pik	1320 slikovnih pik
`.container-xxl`	100 %	100 %	100 %	100 %	100 %	1320 slikovnih pik
`.container-fluid`	100 %	100 %	100 %	100 %	100 %	100 %

Privzeti vsebnik

Naš privzeti .containerrazred je odziven vsebnik s fiksno širino, kar pomeni, da max-widthse spremeni ob vsaki prelomni točki.

<div class="container">
  <!-- Content here -->
</div>

Odzivni vsebniki

Odzivni vsebniki vam omogočajo, da določite razred, ki je 100 % širok, dokler ni dosežena podana prelomna točka, po kateri uporabimo max-widths za vsako od višjih prelomnih točk. Na primer, .container-smje 100-odstotno širok za začetek, dokler smni dosežena točka prekinitve, kjer se poveča z md, lg, xlin 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>

Posode za tekočino

Uporabite .container-fluidza vsebnik polne širine, ki zajema celotno širino vidnega polja.

<div class="container-fluid">
  ...
</div>

Sass

Kot je prikazano zgoraj, Bootstrap generira niz vnaprej določenih razredov vsebnikov, ki vam pomagajo zgraditi želene postavitve. Te vnaprej določene razrede vsebnikov lahko prilagodite tako, da spremenite zemljevid Sass (najdete ga v _variables.scss), ki jih poganja:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Poleg prilagajanja Sass lahko ustvarite tudi lastne vsebnike z našim Sass mixinom.

// 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();
}

Za več informacij in primere o tem, kako spremeniti naše zemljevide in spremenljivke Sass, glejte razdelek Sass v dokumentaciji Grid .