Konteineriai

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-fluid, kuris yra width: 100%visuose lūžio taškuose
• .container-{breakpoint}, kuri yra width: 100%iki nurodytos pertraukos taško

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 .

Numatytasis konteineris

Mūsų numatytoji .containerklasė yra interaktyvus, 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 .