in English

Konteineriai

Sudėtiniai rodiniai yra pagrindinė „Bootstrap“ sudedamoji dalis, kurioje yra, užpildomas ir suderinamas jūsų turinys nurodytame įrenginyje arba peržiūros srityje.

Šiame puslapyje

Kaip jie veikia

Sudėtiniai rodiniai yra pagrindinis „Bootstrap“ išdėstymo elementas ir būtini naudojant numatytąją tinklelio sistemą . Konteineriai naudojami turiniui juose laikyti, paduoti ir (kartais) centruoti. Nors sudėtinius rodinius galima įdėti, daugeliui maketų nereikia įdėti įdėto sudėtinio rodinio.

„Bootstrap“ yra su trimis skirtingais konteineriais:

.containermax-width, kuris kiekviename reaguojančiame taške nustato a
.container-{breakpoint}, kuri yra width: 100%iki nurodytos pertraukos taško
.container-fluid, kuris yra width: 100%visuose lūžio taškuose

Toliau pateiktoje lentelėje parodyta, kaip kiekvienas sudėtinis rodinys max-widthlyginamas su originalu .containerir .container-fluidkiekvienu pertraukos tašku.

Pamatykite juos veikiant ir palyginkite juos mūsų tinklelio pavyzdyje .

	Labai mažas <576 piks	Mažas ≥576 piks	Vidutinis ≥768 piks	Didelis ≥ 992 piks	X-didelis ≥ 1200 piks	XX-didelis ≥ 1400 piks
`.container`	100 %	540 pikselių	720 taškų	960 taškų	1140 taškų	1320 taškų
`.container-sm`	100 %	540 pikselių	720 taškų	960 taškų	1140 taškų	1320 taškų
`.container-md`	100 %	100 %	720 taškų	960 taškų	1140 taškų	1320 taškų
`.container-lg`	100 %	100 %	100 %	960 taškų	1140 taškų	1320 taškų
`.container-xl`	100 %	100 %	100 %	100 %	1140 taškų	1320 taškų
`.container-xxl`	100 %	100 %	100 %	100 %	100 %	1320 taškų
`.container-fluid`	100 %	100 %	100 %	100 %	100 %	100 %

Numatytasis konteineris

Mūsų numatytoji .containerklasė yra jautrus, fiksuoto pločio konteineris, o tai reiškia, kad jis max-widthkeičiasi kiekviename pertraukos taške.

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

Reaguojantys konteineriai

Interaktyvūs konteineriai leidžia nurodyti klasę, kurios plotis yra 100 %, kol pasiekiamas nurodytas lūžio taškas, o po to mes taikome max-widths kiekvienam aukštesniam taškui. Pavyzdžiui, .container-smyra 100 % pločio, kad pradėtumėte, kol smbus pasiektas lūžio taškas, kur jis padidės naudojant md, lg, xl, ir 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>

Skysčių talpyklos

Naudokite .container-fluidviso pločio konteineriui, apimančiam visą peržiūros srities plotį.

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

Sass

Kaip parodyta aukščiau, „Bootstrap“ generuoja iš anksto nustatytų konteinerių klases, kad padėtų jums sukurti norimus išdėstymus. Galite tinkinti šias iš anksto nustatytas sudėtinių rodinių klases pakeisdami jas teikiantį Sass žemėlapį (randamą _variables.scss):

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

Be „Sass“ tinkinimo, taip pat galite sukurti savo konteinerius naudodami „Sass“ mišinį.

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

Daugiau informacijos ir pavyzdžių, kaip modifikuoti Sass žemėlapius ir kintamuosius, rasite tinklelio dokumentacijos Sass skyriuje .