Swikhomela-ndhawu
Swikhomela-ndhawu i xiaki xa xisekelo xa Bootstrap lexi nga na, xi pad, na ku ringanisa swilo swa wena endzeni ka xitirhisiwa lexi nyikiweke kumbe xivono.
Ndlela leyi ti tirhaka ha yona
Tikhontheyina i xiphemu xa xisekelo xa layout eka Bootstrap naswona swa laveka loko u tirhisa sisiteme ya hina ya gridi ya ntolovelo . Swibye swi tirhisiwa ku khoma, ku pad, na (minkarhi yin’wana) ku hlanganisa leswi nga endzeni ka swona. Hambi leswi swikhomela-ndhawu swi nga ha pfaleriwaka, swivumbeko swo tala a swi lavi xikhomela-ndhawu lexi pfanganisiweke.
Bootstrap yi ta na swibye swinharhu swo hambana:
.container
, leyi vekaka amax-width
eka ndhawu yin’wana ni yin’wana yo wisa leyi hlamulaka.container-fluid
, leyi ngawidth: 100%
eka tindhawu hinkwato to tshoveka.container-{breakpoint}
, ku nga kuwidth: 100%
fikela eka ndhawu leyi boxiweke yo tshoveka
Tafula leri nga laha hansi ri kombisa hilaha container yin’wana na yin’wana yi max-width
pimanisiwaka hakona na ya masungulo .container
na .container-fluid
ku tsemakanya breakpoint yin’wana na yin’wana.
Va vona va ri karhi va tirha u va pimanisa eka xikombiso xa hina xa Gridi .
Switsongo swinene < 576px |
Switsongo ≥576px |
Xikarhi xa ≥768px |
Lexikulu ≥992px |
X- Xikulu ≥1200px |
XX- Xikulu ≥1400px |
|
---|---|---|---|---|---|---|
.container |
100% . | 540px | 720px hi ku | 960px | 1140px hi ndlela leyi | 1320px hi ku |
.container-sm |
100% . | 540px | 720px hi ku | 960px | 1140px hi ndlela leyi | 1320px hi ku |
.container-md |
100% . | 100% . | 720px hi ku | 960px | 1140px hi ndlela leyi | 1320px hi ku |
.container-lg |
100% . | 100% . | 100% . | 960px | 1140px hi ndlela leyi | 1320px hi ku |
.container-xl |
100% . | 100% . | 100% . | 100% . | 1140px hi ndlela leyi | 1320px hi ku |
.container-xxl |
100% . | 100% . | 100% . | 100% . | 100% . | 1320px hi ku |
.container-fluid |
100% . | 100% . | 100% . | 100% . | 100% . | 100% . |
Xikhomela-ndhawu xa xiviri
Tlilasi ya hina ya ntolovelo .container
i xikhomela-ndhawu lexi hlamulaka, xa ku anama loku nga cinciki, leswi vulaka ku max-width
cinca ka xona eka ndhawu yin’wana ni yin’wana yo tshoveka.
<div class="container">
<!-- Content here -->
</div>
Swibye leswi hlamulaka
Swikhomela-ndhawu leswi hlamulaka swi ku pfumelela ku boxa tlilasi leyi nga anama hi 100% ku kondza ku fika ndhawu yo tshoveka leyi boxiweke, endzhaku ka sweswo hi tirhisa max-width
s eka yin’wana ni yin’wana ya tindhawu to tshoveka ta le henhla. Xikombiso, .container-sm
yi anama hi 100% ku sungula ku kondza ku fika laha ku sm
tshovekaka kona, laha yi nga ta ringanisa hi md
, lg
, xl
, na 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>
Swibye swa mati
Tirhisa .container-fluid
eka xigwitsirisi xa ku anama loku heleleke, lexi hlanganisaka ku anama hinkwako ka xivono.
<div class="container-fluid">
...
</div>
Sass
Hilaha swi kombisiweke hakona laha henhla, Bootstrap yi tumbuluxa nxaxamelo wa titlilasi ta swikhomela-ndhawu leti hlamuseriweke ka ha ri emahlweni ku ku pfuna ku aka swivumbeko leswi u swi navelaka. U nga ha cinca titlilasi leti ta swikhomela-ndhawu leti hlamuseriweke ka ha ri emahlweni hi ku cinca mepe wa Sass (lowu kumekaka eka _variables.scss
) lowu ti nyikaka matimba:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Ku engetela eka ku endla leswaku Sass yi va leyi u yi lavaka, u nga ha tlhela u tiendlela swikhomela-ndhawu swa wena hi mixin ya hina ya 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();
}
Ku kuma vuxokoxoko byo tala na swikombiso swa ndlela yo cinca mimepe ya hina ya Sass na swilo leswi cinca-cincaka, hi kombela u languta eka xiyenge xa Sass xa matsalwa ya Gridi .