Continentes
Vasa fundamentalia sunt clausurae structurae Bootstrap quae continent, caudex et contentus intra datam machinam seu prospectum ponunt.
Quam ad operandum
Continentes in Bootstrap principales sunt layout elementi et requiruntur cum usura systematis nostri default gridis . Vasa continent, caudex et interdum contentus in se continet. Dum continentia nidificari potest , plurimae tabulae receptaculum nidum non requirunt.
Bootstrap venit cum tribus vasis diversis;
.container
, quod ponitmax-width
ad utrumque responsurum breakpoint.container-fluid
quae estwidth: 100%
omnino breakpoints.container-{breakpoint}
quae estwidth: 100%
usque ad certum breakpoint
Mensa infra illustrat quomodo singula continentis max-width
comparat cum originali .container
et .container-fluid
per quamlibet rupturam.
In actione vide et confer in exemplo nostro Grid .
Extra parva <576px |
Parvus ≥576px |
Medium ≥768px |
Magnae ≥992px |
X-Large ≥1200px |
XX-Large ≥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% |
Default continens
Classis default noster .container
est continens fixum-latum et responsivum, significationes suas max-width
in unoquovis fracturae loco mutationes.
<div class="container">
<!-- Content here -->
</div>
Responsiva continentia
Vasa responsava permittunt te genus C% latum denotare usque dum certum confractionis punctum attingitur, postquam max-width
s pro singulis punctionibus superiorum applicamus. Exempli gratia: .container-sm
C% lata est incipere usque ad sm
punctum ad ventum, ubi ascendet cum md
, lg
, xl
, et 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>
Liquor vasa
Utere .container-fluid
latitudine plena continente, totam latitudinem prospectus enucleando.
<div class="container-fluid">
...
</div>
Sass
Ut supra ostensum est, Bootstrap seriem praedefinitam continentis classes generat, ut tibi propositas quas desideras aedificandas adiuvet. Possis domicilii has praefinitas classes continens modificatio Sassae map (inventa _variables.scss
) quae eas potentias;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Praeter Sass customising, etiam vasa tua cum Sass mixin nostro creare potes.
// 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();
}
Pro pluribus informationibus et exemplis in quomodo ad mappas nostras Sass et variabiles modificare, placere ad sectionem in Grid documentorum Sass referre .