Kontejnerët

Si funksionojnë

Kontejnerët janë elementi më bazë i paraqitjes në Bootstrap dhe kërkohen kur përdorni sistemin tonë të paracaktuar të rrjetit . Kontejnerët përdoren për të përmbajtur, mbushur dhe (ndonjëherë) qendër përmbajtjen brenda tyre. Ndërsa kontejnerët mund të vendosen me fole, shumica e paraqitjeve nuk kërkojnë një enë të mbivendosur.

Bootstrap vjen me tre kontejnerë të ndryshëm:

• .container, i cili vendos një max-widthnë çdo pikë ndërprerjeje të përgjegjshme
• .container-{breakpoint}, që është width: 100%deri në pikën e caktuar të ndërprerjes
• .container-fluid, e cila është width: 100%në të gjitha pikat e ndërprerjes

Tabela më poshtë ilustron se si çdo kontejner max-widthkrahasohet me origjinalin .containerdhe .container-fluidnë çdo pikë ndërprerjeje.

Shihni ato në veprim dhe krahasojini ato në shembullin tonë Grid .

Kontejneri i parazgjedhur

Klasa jonë e paracaktuar .containerështë një kontejner i përgjegjshëm, me gjerësi fikse, që do të thotë max-widthndryshimet e tij në çdo pikë ndërprerjeje.

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

Kontejnerë të përgjegjshëm

Kontejnerët reagues ju lejojnë të specifikoni një klasë që është 100% e gjerë derisa të arrihet pika e caktuar e ndërprerjes, pas së cilës ne aplikojmë max-widths për secilën nga pikat më të larta të ndërprerjes. Për shembull, .container-smështë 100% e gjerë për të filluar derisa të smarrihet pika e ndërprerjes, ku do të rritet me md, lg, xl, dhe 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>

Kontejnerët e lëngjeve

Përdoreni .container-fluidpër një kontejner me gjerësi të plotë, që përfshin të gjithë gjerësinë e portës së shikimit.

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

Sass

Siç tregohet më lart, Bootstrap gjeneron një seri klasash të paracaktuara të kontejnerëve për t'ju ndihmuar të ndërtoni paraqitjet që dëshironi. Ju mund t'i personalizoni këto klasa të paracaktuara të kontejnerëve duke modifikuar hartën Sass (që gjendet në _variables.scss) që i fuqizon ato:

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

Përveç personalizimit të Sass, ju gjithashtu mund të krijoni kontejnerët tuaj me përzierjen tonë 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();
}

Për më shumë informacion dhe shembuj se si të modifikojmë hartat dhe variablat tona Sass, ju lutemi referojuni seksionit Sass të dokumentacionit Grid .