Preskoči na glavno vsebino Preskoči na navigacijo po dokumentih
Check
in English

Zabojniki

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

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-{breakpoint}, ki je width: 100%do podane prelomne točke
  • .container-fluid, ki je width: 100%na vseh prelomnih točkah

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
Velik
≥992 slikovnih pik
X-Large
≥1200 slikovnih pik
XX-Velika
≥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 širok 100 % za začetek, dokler smni dosežena prelomna točka, 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, si oglejte razdelek Sass v dokumentaciji Grid .