Pūnaha mātiti
Whakamahia ta maatau matiti pouaka-a-rorohiko tuatahi ki te hanga tahora o nga ahua me nga rahi katoa na te punaha pou tekau ma rua, e ono nga taumata whakautu taunoa, nga taurangi Sass me nga ranunga, me nga karaehe kua tautuhia.
Tauira
Ka whakamahia e te punaha matiti a Bootstrap he raupapa ipu, rarangi, me nga pou hei tahora me te whakatiaro i nga ihirangi. He mea hanga ki te flexbox me te tino aro. Kei raro nei he tauira me te whakamaarama hohonu mo te whakakotahitanga o te punaha tukutuku.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Ko te tauira i runga ake nei ka hanga e toru nga pou rite-whanui puta noa i nga taputapu katoa me nga tauranga tirohanga ma te whakamahi i o maatau karaehe matiti kua tautuhia. Ko aua pou kei waenganui i te wharangi me te matua .container
.
Pehea te mahi
Ka pakaru, koinei te whakakotahitanga o te punaha tukutuku:
-
Ka tautokohia e ta maatau matiti nga waahi pakaru e ono . Ko nga waahi pakaru kei runga i
min-width
nga patai pāpāho, ko te tikanga ka pa ki taua waahi pakaru me nga mea katoa kei runga ake (hei tauira,.col-sm-4
e pa ana kism
,md
,lg
,xl
, mexxl
). Ko te tikanga ka taea e koe te whakahaere i te rahinga o te ipu me te poupou me te whanonga ma ia waahi pakaru. -
Whakawaea nga ipu me te whakakii whakapae i o ihirangi. Whakamahia
.container
mo te whanui pika aro,.container-fluid
mowidth: 100%
nga tauranga tirohanga me nga taputapu katoa, he ipu urupare ranei (hei tauira,.container-md
) mo te huinga o te wai me te whanui pika. -
He takai nga rarangi mo nga pou. Kei ia pou he whakapae
padding
(e kiia ana he awaawa) hei whakahaere i te mokowhiti i waenganui. Kapadding
whakaekea tenei i runga i nga rarangi me nga tawhē kino hei whakarite kia titiro titiro nga ihirangi o o pou ki te taha maui. Ka tautoko hoki nga rarangi i nga karaehe whakarereke kia rite te whakamahi i te rahi o nga pou me nga karaehe awaawa hei whakarereke i te mokowhiti o to ihirangi. -
He tino ngawari nga pou. He 12 nga pou tauira e waatea ana mo ia rarangi, ka taea e koe te hanga huinga rereke o nga huānga e awhi ana i te maha o nga pou. Ko nga karaehe o te pou e tohu ana i te maha o nga pou tauira hei whanganga (hei tauira, te
col-4
whaa).width
s kua whakaritea i roto i te ōrau kia rite tonu to rahinga whanaunga. -
He urupare, he whakarite hoki nga awaawa. Kei te watea nga karaehe wairere puta noa i nga waahi pakaru katoa, he rite nga rahi ki o taatau taha me te mokowhiti papa . Hurihia nga awaawa whakapae me
.gx-*
nga karaehe, nga awaawa poutū ki te.gy-*
, nga awaawa katoa me.g-*
nga karaehe..g-0
kei te waatea hoki hei tango i nga awaawa. -
Ko nga taurangi Sass, nga mapi, me nga whakaranu e whakakaha ana i te matiti. Ki te kore koe e hiahia ki te whakamahi i nga karaehe matiti kua tautuhia-mua i Bootstrap, ka taea e koe te whakamahi i te puna o ta maatau matiti Sass ki te hanga i a koe ake me etahi atu tohu tohu. Ka whakauruhia ano e matou etahi taonga ritenga CSS hei kai i enei taurangi Sass mo te ngawari ake mo koe.
Kia mohio koe ki nga herenga me nga pepeke huri noa i te flexbox , penei i te kore e kaha ki te whakamahi i etahi huānga HTML hei ipu ngawari .
Kōwhiringa mātiti
Ka taea e te punaha matiti a Bootstrap te urutau puta noa i nga waahi pakaru taunoa katoa e ono, me nga waahi pakaru ka whakaritea e koe. Ko nga taumata matiti taunoa e ono e whai ake nei:
- He iti rawa (xs)
- Iti (sm)
- Waenga (md)
- Nui (lg)
- Nui atu (xl)
- He nui rawa atu (xxl)
Ka rite ki te korero i runga ake nei, kei a ia o enei waahi pakaru tana ake ipu, tohu tohu karaehe ahurei, me nga whakarereke. Anei te huringa o te matiti puta noa i enei waahi wehenga:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
Ipumax-width |
Kore (aunoa) | 540px | 720px | 960px | 1140px | 1320px |
Pimua karaehe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# o nga pou | 12 | |||||
Te whanui o te awaawa | 1.5rem (.75rem kei te taha maui me te taha matau) | |||||
Awaawa ritenga | Ae | |||||
Nestable | Ae | |||||
Whakaraupapa tīwae | Ae |
Nga pou tahora-aunoa
Whakamahia nga karaehe pou-waahi-motuhake kia ngawari te rahi o nga pou me te kore he karaehe tau tino rite ki te .col-sm-6
.
Ōrite-whānui
Hei tauira, e rua nga whakatakotoranga matiti e pa ana ki ia taputapu me te tauranga tirohanga, mai i xs
te xxl
. Tāpirihia he maha o nga karaehe-iti ake mo ia wehenga e hiahia ana koe ka rite te whanui o ia pou.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Te whakatakoto i te whanui o te pou kotahi
Ko te whakatakotoranga-aunoa mo nga pou matiti flexbox ko te tikanga ka taea e koe te tautuhi i te whanui o te pou kotahi me te whakarereke aunoa i nga pou teina huri noa. Ka taea e koe te whakamahi i nga karaehe matiti kua tautuhia-a-mua (penei i te whakaaturanga i raro nei), nga whakauru matiti, nga whanui rarangi-roto ranei. Kia mahara ka huri te rahi o etahi atu pou ahakoa te whanui o te pouwaenga.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Ihirangi whanui taurangi
Whakamahia col-{breakpoint}-auto
nga karaehe ki te rahi o nga pou i runga i te whanui taiao o o raatau ihirangi.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Nga karaehe whakautu
Kei roto i te matiti a Bootstrap nga taumata e ono o nga karaehe kua tautuhia i mua mo te hanga i nga whakatakotoranga urupare uaua. Whakaritehia te rahi o ou pou ki runga i nga taputapu iti, iti, reo, rahi, rahi atu ranei ahakoa e pai ana koe.
Nga waahi pakaru katoa
Mo nga matiti e rite ana mai i te iti rawa o nga taputapu ki te rahi, whakamahia te .col
me .col-*
nga akomanga. Tauwhāitihia he karaehe kua tau ina hiahia koe i tetahi pou tino rahi; te kore, ite noa ki te piri ki .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Tāpae ki te whakapae
Ma te whakamahi i te huinga .col-sm-*
karaehe kotahi, ka taea e koe te hanga i tetahi punaha matiti taketake ka tiimata ka tiimata ka noho whakapae ki te waahi pakaru iti ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Whakaranuhia me te whakarite
Kare koe e hiahia kia tapae noa o pou ki etahi rarangi matiti? Whakamahia he huinga o nga karaehe rereke mo ia taumata ina hiahiatia. Tirohia te tauira i raro nei mo te whakaaro pai ake mo te mahi katoa.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
Ngā tīwae haupae
Whakamahia nga .row-cols-*
karaehe urupare ki te whakarite tere i te maha o nga pou e pai ake ai to korero me to tahora. I te mea .col-*
e pa ana nga karaehe noa ki nga pou takitahi (hei tauira, .col-md-4
), ka whakatauhia nga akomanga rarangi haupae ki te matua .row
hei pokatata. Ka .row-cols-auto
taea e koe te hoatu i nga pou i to raatau whanui.
Whakamahia enei akomanga pou haupae ki te hanga tere i nga tahora matiti taketake, ki te whakahaere ranei i o whakatakotoranga kaari.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Ka taea hoki e koe te whakamahi i te Sass mixin, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Kohanga
Hei whakakohanga i to ihirangi ki te matiti taunoa, taapirihia he huinga pou hou .row
me te huinga o .col-sm-*
nga pou ki roto i te tīwae tīariari .col-sm-*
. Ko nga rarangi kohanga me whakauru he huinga pou ka taapiri ake ki te 12, iti ake ranei (kaore e hiahiatia kia whakamahi koe i nga pou 12 e waatea ana).
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Sass
I te wa e whakamahi ana i nga konae Sass puna a Bootstrap, kei a koe te kowhiringa ki te whakamahi i nga taurangi Sass me nga whakaranu hei hanga i nga whakatakotoranga wharangi ritenga, tikanga, me te aro. Ka whakamahia e a maatau karaehe matiti kua tautuhia i mua i enei taurangi me nga whakaranu hei whakarato i te huinga katoa o nga karaehe rite-ki-te whakamahi mo nga whakatakotoranga tere tere.
Taurangi
Ko nga taurangi me nga mapi ka whakatau i te maha o nga pou, te whanui o te awaawa, me te waahi uiui pāpāho hei timata i nga pou maanu. Ka whakamahia e matou enei ki te whakaputa i nga karaehe matiti kua tautuhia i runga ake nei, tae atu ki nga ranunga ritenga kua whakarārangihia i raro nei.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
Whakaranu
Ka whakamahia nga Mixins i te taha o nga taurangi matiti hei whakaputa i te CSS tohu mo nga pou matiti takitahi.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);
Te whakamahi tauira
Ka taea e koe te whakarereke i nga taurangi ki o ake uara ritenga, ka whakamahi noa ranei i nga ranunga me o raatau uara taunoa. Anei he tauira mo te whakamahi i nga tautuhinga taunoa ki te hanga tahora pou-rua me te mokowhiti i waenga.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Te whakarite i te matiti
Ma te whakamahi i a maatau taurangi Sass me nga mapi i hangaia, ka taea te whakarite katoa i nga karaehe matiti kua tautuhia. Hurihia te maha o nga taumata, nga inenga patai pāpāho, me nga whanui ipu—ka whakahiato ano.
Nga pou me nga awaawa
Ko te maha o nga pou matiti ka taea te whakarereke ma nga taurangi Sass. $grid-columns
ka whakamahia ki te whakaputa i nga whanui (i roto i te ōrau) o ia tīwae takitahi i te wā $grid-gutter-width
e whakatakoto ana i te whānui mō ngā awaawa o te tīwae.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Ngā taumata mātiti
Ko te neke ki tua atu o nga pou, ka taea hoki e koe te whakarite i te maha o nga taumata matiti. Mena kei te pirangi koe kia wha noa nga taumata matiti, ka whakahou koe i te $grid-breakpoints
me $container-max-widths
tetahi mea penei:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ina huri koe ki nga taurangi Sass, mapi ranei, me tiaki e koe o huringa me te whakahiato ano. Ma te mahi pera ka puta he huinga hou o nga karaehe matiti kua tautuhia i mua mo te whanui o nga pou, nga taapiri, me te ota. Ka whakahouhia ano nga taputapu tirohanga urupare ki te whakamahi i nga waahanga wehenga ritenga. Me whakarite ki te tautuhi i nga uara matiti ki roto px
(kaore rem
, em
, ranei %
).