Pūnaehana mānoanoa
E hoʻohana i kā mākou pahu flexbox mobile-first ikaika e kūkulu i nā hoʻolālā o nā ʻano a me nā nui āpau e mahalo i kahi ʻōnaehana kolamu ʻumikūmālua, ʻelima mau pae pane pane paʻamau, Sass variables and mixins, a me ka nui o nā papa i koho mua ʻia.
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 nānā hohonu i ke ʻano o ka hui ʻana o ka pā.
He mea hou a ʻike ʻole paha me ka flexbox? E heluhelu i kēia CSS Tricks flexbox alakaʻi no ka hope, terminology, alakaʻi, a me nā snippet code.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Hoʻokumu ka laʻana i luna i ʻekolu kolamu like-ākea ma nā mea liʻiliʻi, waena, nui, a ʻoi aku ka nui me ka hoʻohana ʻana i kā mākou papa kuhikuhi mua. Aia kēlā mau kolamu ma ka ʻaoʻao me ka makua .container
.
ʻO ka wehe ʻana i lalo, eia ke ʻano o ka hana ʻana:
- Hāʻawi nā pahu i kahi ala e hoʻokaʻawale a hoʻopaʻa i nā ʻike o kāu pūnaewele. E hoʻohana
.container
no ka laula pika pane a.container-fluid
i ʻolewidth: 100%
ma nā ʻaoʻao āpau a me ka nui o nā hāmeʻa. - ʻ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ā palena ʻino. Ma kēia ala, ʻike maka ʻia nā ʻike a pau o kāu mau kolamu ma ka ʻaoʻao hema. - Ma kahi hoʻolālā mānoanoa, pono e waiho ʻia ka ʻike ma loko o nā kolamu a ʻo nā kolamu wale nō paha nā keiki o nā lālani.
- Mahalo iā flexbox, e hoʻonohonoho ʻokoʻa nā kolamu me ka ʻole o kahi kikoʻī
width
e like me nā kolamu ākea like. No ka laʻana, ʻehā mau manawa o.col-sm
kēlā me kēia me 25% ākea mai ka wahi haʻi liʻiliʻi a piʻi. E ʻike i ka ʻāpana kolamu hoʻonohonoho ʻokoʻa no nā laʻana hou aku. - Hōʻike nā papa kolamu i ka helu o nā kolamu āu e makemake ai e hoʻohana mai ka 12 hiki i kēlā me kēia lālani. No laila, inā makemake ʻoe i ʻekolu kolamu like-ākea ma waena, hiki iā ʻoe ke hoʻohana
.col-4
. - Hoʻonohonoho
width
ʻia nā kolamu i nā pākēneka, no laila e maʻa mau lākou a me ka nui e pili ana i ko lākou ʻano makua. - Loaʻa i nā kolamu ka pae ākea
padding
e hana i nā auwai ma waena o kēlā me kēia kolamu, akā naʻe, hiki iā ʻoe ke wehe i kamargin
laina mai nā lālani apadding
mai nā kolamu me.no-gutters
ka.row
. - No ka pane ʻana i ka mānoanoa, ʻelima mau wahi haʻihaʻi, hoʻokahi no kēlā me kēia haʻihaʻi pane : nā haʻi āpau (ʻoi aku ka liʻiliʻi), liʻiliʻi, waena, nui, a ʻoi aku ka nui.
- Hoʻokumu ʻia nā wahi haʻihaʻi ma luna o nā nīnau media laula liʻiliʻi, ʻo ia hoʻi , pili lākou i kēlā wahi haʻihaʻi a me nā mea a pau ma luna o ia (e laʻa,
.col-sm-4
pili i nā mea liʻiliʻi, waena, nui, a me nā mea nui ʻē aʻe, ʻaʻole naʻe kaxs
haki mua). - Hiki iā ʻoe ke hoʻohana i nā papa mākia i koho mua ʻia (e like me
.col-4
) a i ʻole nā hui Sass no ka hōʻailona semantic hou aʻe.
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 .
ʻOiai e hoʻohana ana ʻo Bootstrap i nā em
s a i ʻole rem
s no ka wehewehe ʻana i ka nui o ka nui, px
hoʻohana ʻia ʻo s no nā wahi haki a me nā laula ipu. ʻO kēia no ka mea aia ka laulā viewport i nā pika a ʻaʻole loli me ka nui font .
E ʻike pehea e hana ai nā hiʻohiʻona o ka ʻōnaehana mākia Bootstrap ma nā ʻaoʻao he nui me kahi papaʻaina.
ʻOi aku ka liʻiliʻi <576px |
≥576px liʻiliʻi |
≥768 px |
Nui ≥992px |
Nui nui ≥1200px |
|
---|---|---|---|---|---|
Ka laula o ka ipu nui | ʻAʻohe (aunoa) | 540px | 720px | 960px | 1140px |
Prefix papa | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# o nā kolamu | 12 | ||||
Laulā ʻauwai | 30px (15px ma kēlā me kēia ʻaoʻao o kahi kolamu) | ||||
Nestable | ʻAe | ||||
Kakau ʻana o ke kolamu | ʻAe |
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
.
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 xl
. 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>
Hiki ke hoʻokaʻawale ʻia nā kolamu like-ākea i nā laina he nui, akā aia kahi pahu flexbox Safari i pale i kēia hana me ka ʻole o kahi kikoʻī a i flex-basis
ʻole border
. Aia nā hoʻoponopono no nā mana o ka polokalamu kele pūnaewele kahiko, akā ʻaʻole pono ia inā ʻoe i kēia manawa.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
'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>
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>
E hana i nā kolamu like-ākea e hohola i nā lālani he nui ma ka hoʻokomo ʻana i .w-100
kahi āu e makemake ai e haki nā kolamu i kahi laina hou. E hoʻololi i nā haʻihaʻi ma o ka hoʻohui .w-100
ʻana me kekahi mau pono hōʻike pane .
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Aia i loko o ka mākia ʻo Bootstrap nā ʻelima papa 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.
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="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>
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 ma mua o ka lilo ʻana i ke alo me ka wahi haʻi liʻiliʻi ( sm
).
<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>
ʻ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.
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .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>
E hoʻohana i nā pono hana hoʻopololei flexbox e hoʻopololei i nā kolamu ma ke kū pololei a me ke alo.
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Hiki ke hoʻoneʻe ʻia nā ʻauwaha ma waena o nā kolamu i kā mākou papa papa kuhikuhi mua me .no-gutters
. Hoʻopau kēia i nā margin
s maikaʻi ʻole mai .row
a me ka paepae padding
mai nā kolamu keiki āpau.
Eia ke kumu kumu no ka hana ʻana i kēia mau ʻano. E hoʻomanaʻo, ua hoʻopili ʻia nā kolamu i nā kolamu keiki mua wale nō a ua hoʻopaʻa ʻia e ka mea koho . ʻOiai e hoʻopuka ana kēia i kahi mea koho kikoʻī, hiki ke hoʻololi hou ʻia ka padding kolamu me nā pono spacing .
Pono i kahi hoʻolālā lihi-i-kaʻe? Hoʻokuʻu i ka makua a i .container
ʻole .container-fluid
.
Ma ka hana, eia ke ano. E hoʻomaopopo hiki iā ʻoe ke hoʻomau i ka hoʻohana ʻana i kēia me nā papa papa kuhikuhi ʻē aʻe (me ka laulā kolamu, nā pae pane, nā hoʻonohonoho hou, a me nā mea hou aku).
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Inā ʻoi aku ma mua o 12 kolamu i hoʻokomo ʻia i loko o ka lālani hoʻokahi, e hoʻopili ʻia kēlā me kēia hui o nā kolamu ʻē aʻe, ma ke ʻano he ʻāpana hoʻokahi, i kahi laina hou.
Mai ka 9 + 4 = 13 > 12, ua wili ʻia kēia div 4-kolani-ākea i kahi laina hou ma ke ʻano he ʻāpana pili.
Hoʻomau nā kolamu ma ka laina hou.
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
ʻO ka uhaki ʻana i nā kolamu i kahi laina hou i ka flexbox pono i kahi hack liʻiliʻi: e hoʻohui i kahi mea me width: 100%
nā wahi āu e makemake ai e hoʻopili i kāu mau kolamu i kahi laina hou. Hoʻokō maʻamau kēia me nā .row
s he nui, akā ʻaʻole hiki i kēlā me kēia ʻano hoʻokō ke helu i kēia.
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
Hiki iā ʻoe ke hoʻohana i kēia hoʻomaha ma nā wahi haʻihaʻi kikoʻī me kā mākou mau pono hōʻike pane .
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
E hoʻohana i nā.order-
papa no ka mālama ʻana i ke ʻano o kāu ʻike. Hoʻopili kēia mau papa, no laila hiki iā ʻoe ke hoʻonohonoho i ka by breakpoint (eg, ). Hoʻokomo pū ʻia ke kākoʻo no nā pae mānoanoa ʻelima.order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
Aia kekahi mau papa pane .order-first
a me .order-last
nā papa e hoʻololi i ke ʻano order
o kahi mea ma ka hoʻopili ʻana order: -1
a me order: 13
( order: $columns + 1
), kēlā me kēia. Hiki ke hui pū ʻia kēia mau .order-*
papa me nā papa helu e like me ka mea e pono ai.
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
Hiki iā ʻoe ke hoʻokaʻawale i nā kolamu mānoanoa ma nā ʻano ʻelua: kā mākou .offset-
papa hana pane pane a me kā mākou mau pono hana margin . Hoʻohālikelike ʻia nā papa Grid e hoʻohālikelike i nā kolamu a ʻoi aku ka maikaʻi o nā palena no nā hoʻolālā wikiwiki kahi e loli ai ka laulā o ka offset.
E hoʻoneʻe i nā kolamu i ka ʻākau me ka hoʻohana ʻana i .offset-md-*
nā papa. Hoʻonui kēia mau papa i ka palena hema o kahi kolamu ma *
nā kolamu. No ka laʻana, .offset-md-4
neʻe .col-md-4
ma luna o ʻehā kolamu.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
Ma waho aʻe o ka hoʻomaʻemaʻe kolamu ma nā wahi haʻi pane, pono paha ʻoe e hoʻonohonoho hou i nā offset. E ʻike i kēia ma ka hana ma ka laʻana grid .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
Me ka neʻe ʻana i ka flexbox ma v4, hiki iā ʻoe ke hoʻohana i nā pono hana e like me .mr-auto
ka hoʻoneʻe ʻana i nā kolamu kaikuaʻana mai kekahi i kekahi.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
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="row">
<div class="col-sm-9">
Level 1: .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>
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.
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.
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.
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.
<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>
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.
Hiki ke hoʻololi ʻia ka heluna o nā kolamu ma o nā ʻano hoʻololi Sass. $grid-columns
hoʻohana ʻia e hoʻohua i nā laula (ma ka pākēneka) o kēlā me kēia kolamu me ka $grid-gutter-width
ʻae ʻana i nā laula kikoʻī kikoʻī i puʻunaue like ʻia ma waena padding-left
a padding-right
no nā auwai kolamu.
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:
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 %
).