Nga ipu
Ko nga ipu he paraka hanga taketake o Bootstrap kei roto, te papa, me te whakahāngai i o ihirangi ki roto i tetahi taputapu, tauranga tirohanga ranei.
Pehea ta ratou mahi
Ko nga ipu te huānga tahora taketake rawa atu i Bootstrap me te hiahia ina whakamahi i ta maatau punaha matiti taunoa . Ka whakamahia nga ipu ki te whakauru, ki te papa, me te (i etahi wa) whakakotahi i nga ihirangi kei roto. Ahakoa ka taea te kohanga i nga ipu, ko te nuinga o nga whakatakotoranga kaore e hiahiatia he ipu kohanga.
Ka tae mai a Bootstrap me nga ipu rereke e toru:
.container
, e whakatakoto ana i temax-width
i ia waahi wehenga urupare.container-fluid
, keiwidth: 100%
nga waahi pakaru katoa.container-{breakpoint}
,width: 100%
tae noa ki te waahi pakaru kua tohua
Ko te ripanga i raro nei e whakaatu ana he pehea te max-width
whakataurite o ia ipu ki te mea taketake .container
, .container-fluid
puta noa i ia waahi pakaru.
Tirohia ratou e mahi ana ka whakataurite i a raatau i roto i ta maatau tauira Matiti .
He iti ake <576px |
Iti ≥576px |
Waenga ≥768px |
Nui ≥992px |
X-Nui ≥1200px |
XX-Nui ≥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% |
ipu taunoa
Ko ta maatau karaehe taunoa .container
he ipu aro, he whanui-whanui, ko te tikanga o ana max-width
huringa i ia waahi pakaru.
<div class="container">
<!-- Content here -->
</div>
Nga ipu urupare
Ko nga ipu urupare ka taea e koe te tautuhi i tetahi karaehe 100% te whanui kia tae ra ano ki te waahi pakaru kua tohua, muri iho ka tono max-width
s mo ia o nga wehenga teitei ake. Hei tauira, .container-sm
he 100% te whanui ki te timata kia tae ra ano te sm
waahi pakaru, ka piki ake ki te md
, lg
, xl
, me te 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>
Nga ipu wai
Whakamahia .container-fluid
mo te ipu whanui tonu, me te whanui katoa o te tauranga tirohanga.
<div class="container-fluid">
...
</div>
Sass
Ka rite ki te whakaaturanga i runga ake nei, ka hangaia e Bootstrap he raupapa o nga karaehe ipu kua tautuhia i mua hei awhina i a koe ki te hanga i nga whakatakotoranga e hiahia ana koe. Ka taea e koe te whakarite i enei karaehe ipu kua tautuhia kee ma te whakarereke i te mapi Sass (kei roto i _variables.scss
) e whakakaha ana i a raatau:
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
I tua atu i te whakarite i te Sass, ka taea hoki e koe te hanga i a koe ake ipu me to maatau Sass mixin.
// 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();
}
Mo etahi atu korero me nga tauira mo te whakarereke i o maatau mahere Sass me nga taurangi, tirohia te waahanga Sass o te tuhinga Matiti .