Kontenituri
Il-kontenituri huma element fundamentali tal-Bootstrap li jkun fihom, jikkuttunaw u jallinjaw il-kontenut tiegħek f'apparat jew viewport partikolari.
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 amax-width
f'kull breakpoint reattiv.container-fluid
, li huwawidth: 100%
f'kull breakpoints.container-{breakpoint}
, li huwawidth: 100%
sal-punt ta 'waqfien speċifikat
It-tabella hawn taħt turi kif kull kontenitur max-width
iqabbel mal-oriġinal .container
u .container-fluid
fuq kull breakpoint.
Arahom fl-azzjoni u qabbluhom fl- eżempju tal-Grid tagħna .
Żgħir żejjed <576px |
Żgħar ≥576px |
Medju ≥768px |
Kbir ≥992px |
X-Kbir ≥1200px |
XX-Kbir ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-sm |
100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md |
100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg |
100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl |
100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl |
100% | 100% | 100% | 100% | 100% | 1320px |
.container-fluid |
100% | 100% | 100% | 100% | 100% | 100% |
Kontenitur default
Il-klassi awtomatika tagħna .container
hija kontenitur reattiv u b'wisa 'fiss, jiġifieri l- max-width
bidliet 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-width
s għal kull wieħed mill-punti ta' waqfien ogħla. Pereżempju, .container-sm
hija wiesgħa 100% biex tibda sakemm sm
jintlaħ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-fluid
għ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 Sass (li tinstab 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 .