Hoʻomaka hou
Reboot, he hōʻiliʻili o nā mea hoʻololi CSS kikoʻī i loko o ka faila hoʻokahi, kickstart Bootstrap e hāʻawi i kahi papa kuhikuhi nani, kūlike, a maʻalahi hoʻi e kūkulu ai.
Hoʻokumu hou ʻia ma luna o Normalize, e hāʻawi ana i nā mea HTML he nui me nā ʻano manaʻo like me ka hoʻohana ʻana i nā mea koho wale nō. Hana ʻia ke ʻano hana hou me nā papa. No ka laʻana, hoʻomaka hou mākou i kekahi mau <table>
kaila no ka papa kuhikuhi maʻalahi a ma hope e hāʻawi iā .table
, .table-bordered
, a me nā mea hou aku.
Eia kā mākou mau alakaʻi a me nā kumu no ke koho ʻana i ka mea e hoʻopau i ka Reboot:
- Hōʻano hou i kekahi mau waiwai paʻamau o ka polokalamu kele pūnaewele e hoʻohana i
rem
ka s ma kahi oem
ka s no ka hoʻonui ʻia ʻana o nā ʻāpana. - Hōʻalo
margin-top
. Hiki ke hāʻule nā palena kū pololei, e hāʻawi ana i nā hopena i manaʻo ʻole ʻia. ʻO ka mea nui aʻe, ʻo kahi kuhikuhi hoʻokahi omargin
kahi kumu noʻonoʻo maʻalahi. - No ka maʻalahi o ka hoʻonui ʻana i ka nui o ka hāmeʻa, pono e hoʻohana nā mea poloka i
rem
s nomargin
s. - E mālama i nā ʻōlelo hoʻolaha o
font
nā waiwai pili i ka liʻiliʻi, me ka hoʻohana ʻana i kainherit
wā hiki.
Hoʻonui ʻia nā mea <html>
a me <body>
nā mea e hāʻawi i nā paʻamau ʻaoʻao ākea ʻoi aku ka maikaʻi. ʻOi aku ka kikoʻī:
- Hoʻonohonoho
box-sizing
ʻia ka honua ma luna o kēlā me kēia mea—me*::before
a me*::after
, iborder-box
. E hōʻoia kēia ʻaʻole ʻoi aku ka laulā o ka mea i ʻōlelo ʻia ma muli o ka padding a i ʻole ka palena.- ʻAʻohe kumu
font-size
i haʻi ʻia ma ka<html>
, akā16px
ua manaʻo ʻia (ka polokalamu kele pūnaewele).font-size: 1rem
ua hoʻohana ʻia ma ka<body>
no ka maʻalahi o ka pane ʻana i ke ʻano-scaling ma o nā nīnau media ʻoiai e mahalo ana i nā makemake o ka mea hoʻohana a me ka hōʻoia ʻana i kahi ala maʻalahi.
- ʻAʻohe kumu
- Hoʻonohonoho
<body>
pū kafont-family
,line-height
, a metext-align
. Hoʻoili ʻia kēia ma hope e kekahi mau ʻano mea e pale ai i ka like ʻole o ka font. - No ka palekana,
<body>
ua haʻi ʻia kabackground-color
, defaulting to#fff
.
Ua hoʻokuʻu ʻia nā kikokikona pūnaewele paʻamau (Helvetica Neue, Helvetica, a me Arial) ma Bootstrap 4 a hoʻololi ʻia me kahi "pūnaewele font maoli" no ka hoʻopuka kikokikona maikaʻi loa ma kēlā me kēia mea hana a me OS. E heluhelu hou aʻe e pili ana i nā pūʻulu kikokikona maoli ma kēia ʻatikala Smashing Magazine .
Hoʻohana ʻia kēia font-family
i ka <body>
hoʻoilina a hoʻoilina ma ka honua holoʻokoʻa ma Bootstrap. No ka hoʻololi i ka honua font-family
, hoʻohou $font-family-base
a hoʻohui hou iā Bootstrap.
ʻO nā mea poʻomanaʻo āpau—eg, <h1>
—a <p>
ua hoʻonohonoho hou ʻia e margin-top
wehe ʻia. Ua hoʻohui ʻia nā poʻomanaʻo margin-bottom: .5rem
a me nā paukū margin-bottom: 1rem
no ka maʻalahi o ke kaʻawale.
Poʻomanaʻo | Laʻana |
---|---|
|
h1. Poʻomanaʻo Bootstrap |
|
h2. Poʻomanaʻo Bootstrap |
|
h3. Poʻomanaʻo Bootstrap |
|
h4. Poʻomanaʻo Bootstrap |
|
h5. Poʻomanaʻo Bootstrap |
|
h6. Poʻomanaʻo Bootstrap |
ʻO nā papa inoa a pau— <ul>
, <ol>
, a <dl>
— margin-top
ua wehe ʻia a he margin-bottom: 1rem
. ʻAʻohe margin-bottom
.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem and massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean noho amet erat nunc
- Eget porttitor lorem
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem and massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean noho amet erat nunc
- Eget porttitor lorem
No ke kaila maʻalahi, ka hierarchy akaka, a me ka spacing maikaʻi aʻe, ua hōʻano hou nā papa inoa wehewehe i nā margin
s. <dd>
s reset margin-left
a 0
hoʻohui margin-bottom: .5rem
. <dt>
s ua wiwo ole .
- Nā papa inoa wehewehe
- Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
- Donec id elit non mi porta gravida and eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
Hoʻonohonoho <pre>
hou ʻia ka mea e wehe margin-top
a hoʻohana i rem
nā ʻāpana no kāna margin-bottom
.
.mea hoʻohālike { palena-lalo: 1rem; }
Hoʻololi iki ʻia nā papa i ke ʻano <caption>
s, hāʻule nā palena, a hōʻoia i ka paʻa ʻana text-align
a puni. ʻO nā hoʻololi hou no nā palena, padding, a me nā mea hou aʻe e hele mai me ka .table
papa .
Poʻomanaʻo papa | Poʻomanaʻo papa | Poʻomanaʻo papa | Poʻomanaʻo papa |
---|---|---|---|
Pūlele papa | Pūlele papa | Pūlele papa | Pūlele papa |
Pūlele papa | Pūlele papa | Pūlele papa | Pūlele papa |
Pūlele papa | Pūlele papa | Pūlele papa | Pūlele papa |
Ua hōʻano hou ʻia nā ʻano mea like ʻole no nā ʻano kumu maʻalahi. Eia kekahi o nā hoʻololi kaulana loa:
<fieldset>
ʻAʻohe palena, padding, a i ʻole ka palena i hiki ke hoʻohana maʻalahi ʻia e like me nā wīwī no nā hoʻokomo pākahi a i ʻole nā hui o nā mea hoʻokomo.<legend>
s, e like me nā fieldsets, ua hoʻoponopono hou ʻia e hōʻike ʻia ma ke ʻano he poʻomanaʻo.<label>
s ua hoʻonohonoho ʻiadisplay: inline-block
e ʻaemargin
e hoʻopili ʻia.<input>
ʻO nā s,<select>
s,<textarea>
s, a me<button>
s ka hapa nui o ka Normalize, akā wehe ʻo Reboot i kā lākoumargin
a me nā hoʻonohonoholine-height: inherit
, pū kekahi.<textarea>
Hoʻololi ʻia nā s i hiki ke hoʻololi ʻia ma ke kū pololei e like me ka hoʻololi pinepine ʻana i ka hoʻololi ʻana i ka ʻaoʻao ʻaoʻao.
Hōʻike ʻia kēia mau hoʻololi, a me nā mea hou aʻe ma lalo nei.
Hoʻohou ʻia ka <address>
mea e hoʻihoʻi hou i ka polokalamu kele pūnaewele font-style
mai italic
ka normal
. line-height
ua hoʻoili ʻia i kēia manawa, a margin-bottom: 1rem
ua hoʻohui ʻia. <address>
s no ka hōʻike ʻana i ka ʻike pili no ke kupuna kokoke loa (a i ʻole kahi hana holoʻokoʻa). E mālama i ka hōpili ʻana ma ka hoʻopau ʻana i nā laina me <br>
.
1355 Market St, Suite 900
Kapalakiko, CA 94103
P: (123) 456-7890 Inoa piha
[email protected]
ʻO ka paʻamau margin
ma nā blockquotes ʻo ia 1em 40px
, no laila hoʻonohonoho mākou i kēlā 0 0 1rem
no kahi mea i kūlike me nā mea ʻē aʻe.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Loaʻa <abbr>
ka ʻeleʻele i ke ʻano kumu e kū ai i waena o nā kikokikona paukū.
ʻO ka mea paʻamau cursor
ma ka hōʻuluʻulu ʻana ʻo ia text
, no laila hoʻonohonoho mākou i kēlā e pointer
hōʻike i hiki ke hoʻopili ʻia ka mea ma ke kaomi ʻana ma luna.
ʻO kekahi mau kikoʻī
ʻIke hou aku e pili ana i nā kikoʻī.
ʻOi aku nā kikoʻī hou aku
Eia nā kikoʻī hou aku e pili ana i nā kikoʻī.
Hoʻohui ʻia ʻo HTML5 i kahi hiʻohiʻona honua hou i kapa[hidden]
ʻia , i kapa display: none
ʻia ma ke ʻano paʻamau. Ke ʻaiʻē nei i kahi manaʻo mai PureCSS , hoʻomaikaʻi mākou i kēia paʻamau ma ka hana ʻana i mea [hidden] { display: none !important; }
e pale ai i ka hoʻopau ʻia ʻana display
. ʻOiai [hidden]
ʻaʻole kākoʻo maoli ʻia e IE10, ʻo ka ʻōlelo kikoʻī i kā mākou CSS e hoʻopilikia i kēlā pilikia.
jQuery like ole
[hidden]
ʻAʻole kūpono me nā jQuery a $(...).hide()
me $(...).show()
nā ala. No laila, ʻaʻole mākou e kākoʻo nui [hidden]
i nā ʻenehana ʻē aʻe no ka mālama ʻana i display
nā mea.
No ka hoʻololi wale ʻana i ka ʻike ʻana o kahi mea, ʻo ia hoʻi display
ʻaʻole ia i hoʻololi ʻia a hiki i ka mea ke hoʻololi i ke kahe o ka palapala, e hoʻohana i ka .invisible
papa .