Pūnaehana mānoanoa
E hoʻohana i kā mākou pahu flexbox paʻa paʻa paʻa mua e kūkulu i nā hoʻolālā o nā ʻano a me nā nui a pau me ka ʻōnaehana kolamu ʻumikūmālua, ʻeono mau pae pane paʻamau, nā ʻano Sass a me nā mixins, a me nā papa he nui i koho mua ʻia.
Laʻana
Hoʻohana ka ʻōnaehana mākia ʻo Bootstrap i kahi pūʻulu o nā ipu, nā lālani, a me nā kolamu e hoʻonohonoho a hoʻopololei i ka ʻike. Ua kūkulu ʻia me ka flexbox a pane piha. Aia ma lalo kahi laʻana a me kahi wehewehe hohonu no ka hui ʻana o ka ʻōnaehana grid.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Hoʻokumu ka laʻana i luna i ʻekolu kolamu like-ākea ma nā ʻaoʻao āpau a me nā viewports me ka hoʻohana ʻana i kā mākou papa grid i koho mua ʻia. Aia kēlā mau kolamu ma ka ʻaoʻao me ka makua .container
.
Pehea e hana ai
I ka wehe ʻana i lalo, eia ke ʻano o ka hui ʻana o ka ʻōnaehana grid:
-
Kākoʻo kā mākou mānoanoa i ʻeono wahi haʻihaʻi pane . Hoʻokumu ʻia nā breakpoints ma
min-width
nā nīnau media, ʻo ia hoʻi, pili lākou i kēlā haʻihaʻi a me nā mea a pau ma luna o ia (e laʻa,.col-sm-4
pili iāsm
,md
,lg
,xl
, a mexxl
). ʻO ia ke ʻano hiki iā ʻoe ke hoʻomalu i ka nui o ka pahu a me ke kolamu a me ka hana e kēlā me kēia breakpoint. -
E hoʻokomo i loko o nā pahu a hoʻopaʻa i kāu ʻike. E hoʻohana
.container
no ka laula pika pane,.container-fluid
nowidth: 100%
nā puka ʻike a me nā hāmeʻa a pau, a i ʻole kahi pahu pane (e laʻa,.container-md
) no ka hui pū ʻana o ka wai a me nā laula pika. -
ʻO nā lālani nā mea ʻōwili no nā kolamu. He paepae ko kēlā me kēia kolamu
padding
(i kapa ʻia he auwai) no ka mālama ʻana i ka hakahaka ma waena o lākou. Hoʻopaʻa ʻia kēiapadding
ma nā lālani me nā ʻaoʻao maikaʻi ʻole e hōʻoia i ka ʻike ʻia o ka ʻike o kāu kolamu ma ka ʻaoʻao hema. Kākoʻo pū ʻia nā lālani i nā papa hoʻololi e hoʻopili like i ka nui o ke kolamu a me nā papa auwai e hoʻololi i ke kaawale o kāu ʻike. -
Hiki ke maʻalahi nā kolamu. Aia he 12 kolamu mamana i loaʻa i kēlā me kēia lālani, e ʻae iā ʻoe e hana i nā hui like ʻole o nā mea e pili ana i nā helu o nā kolamu. Hōʻike nā papa kolamu i ka helu o nā kolamu maʻamau e kau ai (e laʻa,
col-4
nā ʻehā).width
Ua hoʻonoho ʻia nā s i nā pākēneka no laila e loaʻa iā ʻoe ka nui pili like. -
Hiki ke hoʻopili ʻia nā auwai. Loaʻa nā papa aʻa ma nā wahi haʻihaʻi āpau, me nā nui like me kā mākou palena a me ka spacing padding . E hoʻololi i nā ʻauwai ākea me
.gx-*
nā papa, nā ʻauwai kūpaʻa me.gy-*
, a i ʻole nā auwai āpau me.g-*
nā papa..g-0
loaʻa nō hoʻi e wehe i nā auwai. -
Hiki i nā ʻano hoʻololi Sass, nā palapala ʻāina, a me nā hui ʻana ke hoʻoikaika i ka pā. Inā ʻaʻole ʻoe makemake e hoʻohana i nā papa papa kuhikuhi i koho mua ʻia ma Bootstrap, hiki iā ʻoe ke hoʻohana i kā mākou kumu puna ʻo Sass e hana i kāu iho me ka hōʻailona semantic hou aʻe. Hoʻokomo pū mākou i kekahi mau waiwai maʻamau CSS e hoʻopau i kēia mau ʻano Sass no ka ʻoi aku ka maʻalahi o kāu.
E makaʻala i nā palena a me nā ʻino e pili ana i ka flexbox , e like me ka hiki ʻole ke hoʻohana i kekahi mau mea HTML ma ke ʻano he pahu flex .
Nā koho koho
Hiki i ka ʻōnaehana mākia o Bootstrap ke hoʻololi i nā wahi haʻihaʻi ʻeono a pau, a me nā wahi haʻihaʻi āu e hana ai. ʻO nā pae mānoanoa ʻeono e like me kēia:
- Liʻiliʻi liʻiliʻi (xs)
- liʻiliʻi (sm)
- Kauwaena (md)
- Nui (lg)
- Nui loa (xl)
- Nui keu (xxl)
E like me ka mea i hōʻike ʻia ma luna, loaʻa i kēlā me kēia o kēia mau breakpoints ko lākou pahu ponoʻī, prefix papa kūʻokoʻa, a me nā mea hoʻololi. Eia ke ʻano o ka hoʻololi ʻana o ka mākia ma kēia mau wahi haʻihaʻi:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
---|---|---|---|---|---|---|
pahu pahumax-width |
ʻAʻohe (aunoa) | 540px | 720px | 960px | 1140px | 1320px |
Prefix papa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# o nā kolamu | 12 | |||||
Laulā ʻauwai | 1.5rem (.75rem ma ka hema a me ka ʻākau) | |||||
ʻAuwai maʻamau | ʻAe | |||||
Nestable | ʻAe | |||||
Kakau ʻana o ke kolamu | ʻAe |
Nā kolamu hoʻonohonoho ʻakomi
E hoʻohana i nā papa kolamu breakpoint-specific no ka maʻalahi o ka nui kolamu me ka ʻole o ka papa helu kikoʻī e like me .col-sm-6
.
Kaulike-ākea
Eia kekahi laʻana, eia nā papa kuhikuhi ʻelua e pili ana i kēlā me kēia hāmeʻa a me ka viewport, mai xs
ka xxl
. E hoʻohui i kekahi helu o nā papa ʻāpana liʻiliʻi no kēlā me kēia haʻihaʻi āu e pono ai a ʻo kēlā me kēia kolamu e like ka laulā.
<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>
Hoʻonohonoho i hoʻokahi laulā kolamu
'O ka ho'onohonoho 'akomi no nā kolamu flexbox grid 'o ia ho'i, hiki iā 'oe ke ho'onohonoho i ka laula o ho'okahi kolamu a ho'ololi 'akomi i nā kolamu kaikua'ana a puni. Hiki iā ʻoe ke hoʻohana i nā papa mākia i koho mua ʻia (e like me ka mea i hōʻike ʻia ma lalo nei), nā hui pūlima, a i ʻole nā lau ākea. E hoʻomaopopo e hoʻololi ʻia nā kolamu ʻē aʻe me ka ʻole o ka laulā o ke kolamu waena.
<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>
Maʻiʻo laula ʻokoʻa
E hoʻohana col-{breakpoint}-auto
i nā papa e hoʻonui i nā kolamu ma muli o ka laulā maoli o kā lākou ʻike.
<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>
Nā papa pane
Aia i loko o ka mākia ʻo Bootstrap nā papa ʻeono o nā papa i koho mua ʻia no ke kūkulu ʻana i nā hoʻolālā pane paʻakikī. Hoʻopilikino i ka nui o kāu mau kolamu ma nā mea liʻiliʻi liʻiliʻi, liʻiliʻi, waena, nui, a i ʻole nā mea nui ʻē aʻe e like me kou manaʻo he kūpono.
ʻO nā wahi haʻi a pau
No nā mākia like ʻole mai ka mea liʻiliʻi a hiki i ka mea nui, e hoʻohana i ka .col
a me .col-*
nā papa. E wehewehe i kahi papa helu inā makemake ʻoe i kahi kolamu nui; a i ʻole, e ʻoluʻolu e pili i .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>
Hoʻopaʻa ʻia i ka paepae
Me ka hoʻohana ʻana i hoʻokahi pūʻulu o .col-sm-*
nā papa, hiki iā ʻoe ke hana i kahi ʻōnaehana mākia maʻamau e hoʻomaka i ka hoʻopaʻa ʻia a lilo i paepae ma ka wahi haʻi liʻiliʻi ( 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>
Hoʻohui a hoʻohālikelike
ʻAʻole makemake ʻoe e hoʻopaʻa wale i kāu mau kolamu i kekahi mau pae mānoanoa? E hoʻohana i ka hui ʻana o nā papa like ʻole no kēlā me kēia pae e like me ka mea e pono ai. E ʻike i ka laʻana ma lalo no ka manaʻo maikaʻi aʻe o ka hana ʻana.
<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>
Nā kolamu lālani
E hoʻohana i nā .row-cols-*
papa pane e hoʻonohonoho koke i ka helu o nā kolamu e hāʻawi maikaʻi i kāu ʻike a me ka hoʻolālā. ʻOiai .col-*
pili nā papa maʻamau i nā kolamu pākahi (e laʻa, .col-md-4
), ua hoʻonoho ʻia nā papa kolamu lālani ma ka makua .row
ma ke ʻano he ala pōkole. Hiki .row-cols-auto
iā ʻoe ke hāʻawi i nā kolamu i ko lākou laulā maoli.
E hoʻohana i kēia mau papa kolamu lālani no ka hana wikiwiki ʻana i nā hoʻolālā maʻamau maʻamau a i ʻole e kāohi i kāu hoʻonohonoho kāleka.
<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>
Hiki iā ʻoe ke hoʻohana i ka hui Sass hui pū ʻia 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);
}
}
Nesting
No ka hoʻopili ʻana i kāu ʻike me ka mākia paʻamau, e hoʻohui i kahi kolamu hou .row
a me .col-sm-*
nā kolamu i loko o kahi .col-sm-*
kolamu e kū nei. Pono nā lālani i hoʻopaʻa ʻia he pūʻulu kolamu e hoʻonui i ka 12 a ʻoi aʻe paha (ʻaʻole pono ʻoe e hoʻohana i nā kolamu he 12 i loaʻa).
<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
Ke hoʻohana nei i nā faila Sass kumu o Bootstrap, loaʻa iā ʻoe ke koho o ka hoʻohana ʻana i nā ʻano Sass a me nā mixins e hana i nā ʻaoʻao maʻamau, semantic, a me ka pane pane. Ke hoʻohana nei kā mākou papa papa kuhikuhi i kēia mau ʻano like ʻole a me nā mixins e hāʻawi i kahi papa holoʻokoʻa o nā papa mākaukau no ka hoʻolālā pane wikiwiki.
Nā mea hoʻololi
Ho'oholo nā mea ho'ololi a me nā palapala 'āina i ka heluna o nā kolamu, ka laula o ka 'auwaha, a me ka wahi nīnau media kahi e ho'omaka ai nā kolamu lana. Hoʻohana mākou i kēia no ka hoʻopuka ʻana i nā papa papa kuhikuhi i hoʻopaʻa ʻia ma luna, a me nā mixins maʻamau i helu ʻia ma lalo 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
);
Mea huikau
Hoʻohana pū ʻia nā mixins me nā mea hoʻololi grid e hoʻohua i ka CSS semantic no nā kolamu pahu pākahi.
// 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);
Laʻana hoʻohana
Hiki iā ʻoe ke hoʻololi i nā mea hoʻololi i kāu mau waiwai maʻamau, a i ʻole e hoʻohana wale i nā mixins me kā lākou mau waiwai paʻamau. Eia kekahi laʻana o ka hoʻohana ʻana i nā hoʻonohonoho paʻamau no ka hana ʻana i kahi hoʻolālā ʻelua kolamu me kahi kaawale ma waena.
.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>
Hoʻopilikino i ka mānoanoa
Me ka hoʻohana ʻana i kā mākou mākia i kūkulu ʻia i nā ʻano Sass a me nā palapala ʻāina, hiki ke hoʻopilikino piha i nā papa grid i koho mua ʻia. E hoʻololi i ka helu o nā pae, ka nui o ka nīnau noiʻi media, a me ka laula ipu—a laila e hoʻohui hou.
Nā kolamu a me nā auwai
Hiki ke hoʻololi ʻia ka heluna o nā kolamu ma o nā ʻano hoʻololi Sass. $grid-columns
hoʻohana ʻia e hana i nā laula (ma ka pākēneka) o kēlā me kēia kolamu ʻoiai$grid-gutter-width
hoʻonohonoho ʻana i ka laula no nā auwai kolamu.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
Nā pae mānoanoa
Ke neʻe nei ma waho o nā kolamu ponoʻī, hiki iā ʻoe ke hoʻopilikino i ka helu o nā pae mānoanoa. Inā makemake ʻoe i ʻehā mau pae mānoanoa, e hoʻonui ʻoe i ka $grid-breakpoints
a $container-max-widths
i kekahi mea e like me kēia:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Ke hoʻololi nei i nā ʻano hoʻololi Sass a i ʻole palapala ʻāina, pono ʻoe e mālama i kāu mau hoʻololi a hoʻohui hou. Ma ka hana ʻana pēlā e hoʻopuka ai i kahi pūʻulu hou o nā papa mākia i koho mua ʻia no ka laulā kolamu, offset, a me ke kauoha. E hoʻonui hou ʻia nā pono hana ʻike pane no ka hoʻohana ʻana i nā wahi haʻi maʻamau. E hōʻoia i ka hoʻonohonoho ʻana i nā waiwai mākia i px
(ʻaʻole rem
, em
, a i ʻole %
).