Kontenituri

Kif jaħdmu

Il-kontenituri huma l-aktar element bażiku ta' tqassim f'Bootstrap u huma meħtieġa meta tuża s-sistema tal-grilja default tagħna . Kontenituri jintużaw biex ikun fihom, kuxxinett, u (xi kultant) iċċentra l-kontenut fihom. Filwaqt li l-kontenituri jistgħu jiġu mdaħħla, il-biċċa l-kbira tat-tqassim ma jeħtiġux kontenitur imdawwar.

Bootstrap jiġi bi tliet kontenituri differenti:

• .container, li jistabbilixxi a max-widthf'kull breakpoint reattiv
• .container-{breakpoint}, li huwa width: 100%sal-punt ta 'waqfien speċifikat
• .container-fluid, li huwa width: 100%f'kull breakpoints

It-tabella hawn taħt turi kif kull kontenitur max-widthiqabbel mal-oriġinal .containeru .container-fluidfuq kull breakpoint.

Arahom fl-azzjoni u qabbluhom fl- eżempju tal-Grid tagħna .

Kontenitur default

Il-klassi awtomatika tagħna .containerhija kontenitur reattiv u b'wisa 'fiss, jiġifieri l- max-widthbidliet tagħha f'kull breakpoint.

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

Kontenituri li jirrispondu

Kontenituri li jirrispondu jippermettulek tispeċifika klassi li hija wiesgħa 100% sakemm jintlaħaq il-punt ta 'waqfien speċifikat, u wara napplikaw max-widths għal kull wieħed mill-punti ta' waqfien ogħla. Pereżempju, .container-smhija wiesgħa 100% biex tibda sakemm smjintlaħaq il-punt ta 'waqfien, fejn se tiżdied b' md, lg, xl, u 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>

Kontenituri tal-fluwidu

Uża .container-fluidgħal kontenitur wisa 'sħiħ, li jkopri l-wisa' kollu tal-viewport.

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

Sass

Kif muri hawn fuq, Bootstrap jiġġenera serje ta 'klassijiet ta' kontenituri predefiniti biex jgħinuk tibni t-tqassim li tixtieq. Tista' tippersonalizza dawn il-klassijiet ta' kontenituri predefiniti billi timmodifika l-mappa ta' Sass (li tinsab f' _variables.scss) li tagħtihom is-setgħa:

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

Minbarra li tippersonalizza s-Sass, tista 'wkoll toħloq il-kontenituri tiegħek stess bil-mixin Sass tagħna.

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

Għal aktar informazzjoni u eżempji dwar kif timmodifika l-mapep u l-varjabbli Sass tagħna, jekk jogħġbok irreferi għat -taqsima Sass tad-dokumentazzjoni tal-Grid .