in English

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ʻokokoke

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 remka s ma kahi o emka 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 o marginkahi 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 rems no margins.
E mālama i nā ʻōlelo hoʻolaha o fontnā waiwai pili i ka liʻiliʻi, me ka hoʻohana ʻana i ka inheritwā hiki.

ʻAoʻao paʻamau

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 *::beforea me *::after, i border-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-sizei haʻi ʻia ma ka <html>, akā 16pxua manaʻo ʻia (ka polokalamu kele pūnaewele). font-size: 1remua 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.
Hoʻonohonoho <body>pū ka font-family, line-height, a me text-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 ka background-color, defaulting to #fff.

Pūʻulu kikokikona ʻōiwi

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 .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

E hoʻomanaʻo, no ka loaʻa ʻana o ka emoji font i loko o ka waihona font, nui nā hōʻailona maʻamau/dingbat Unicode e unuhi ʻia ma ke ʻano he kiʻi kiʻi ʻoniʻoni. E ʻokoʻa ko lākou hiʻohiʻona, ma muli o ke ʻano i hoʻohana ʻia i loko o ka polokalamu kele pūnaewele/platform's native emoji font, a ʻaʻole lākou e hoʻopilikia ʻia e kekahi ʻano CSS color.

Hoʻohana ʻia kēia font-familyi 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-basea hoʻohui hou iā Bootstrap.

Nā poʻomanaʻo a me nā paukū

ʻO nā mea poʻomanaʻo āpau—eg, <h1>—a <p>ua hoʻonohonoho hou ʻia e margin-topwehe ʻia. Ua hoʻohui ʻia nā poʻomanaʻo margin-bottom: .5rema me nā paukū margin-bottom: 1remno ka maʻalahi o ke kaʻawale.

Poʻomanaʻo	Laʻana
`<h1></h1>`	h1. Poʻomanaʻo Bootstrap
`<h2></h2>`	h2. Poʻomanaʻo Bootstrap
`<h3></h3>`	h3. Poʻomanaʻo Bootstrap
`<h4></h4>`	h4. Poʻomanaʻo Bootstrap
`<h5></h5>`	h5. Poʻomanaʻo Bootstrap
`<h6></h6>`	h6. Poʻomanaʻo Bootstrap

Nā papa inoa

ʻO nā papa inoa a pau— <ul>, <ol>, a <dl>— margin-topua wehe ʻia a he margin-bottom: 1rem. ʻAʻohe margin-bottom.

Ua wehe ʻia nā papa inoa a pau
A ua maʻamau ko lākou palena lalo
ʻAʻohe palena lalo o nā papa inoa pūnana
- Ma keia ano, ua oi aku ko lakou helehelena
- ʻOi loa ke hahai ʻia e nā mea papa inoa hou aʻe
Ua hoʻonohonoho hou ʻia ka padding hema

Eia kahi papa inoa kauoha
Me kekahi mau mea papa inoa
Loaʻa iā ia ka nānā holoʻokoʻa like
E like me ka papa inoa mua ʻole

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ā margins. <dd>s reset margin-lefta 0hoʻ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.
Kau: Wehewehe no ka hua'ōlelo.; He wehewehe ʻelua no ka huaʻōlelo like.
ʻO kekahi huaʻōlelo: Wehewehe no kēia huaʻōlelo ʻē aʻe.

kikokikona i hoʻonohonoho mua ʻia

Hoʻonohonoho <pre>hou ʻia ka mea e wehe margin-topa hoʻohana i remnā ʻāpana no kāna margin-bottom.

.mea hoʻohālike {
  palena-lalo: 1rem;
}

Nā papaʻaina

Hoʻololi iki ʻia nā papa i ke ʻano <caption>s, hāʻule nā palena, a hōʻoia i ka paʻa ʻana text-aligna puni. ʻO nā hoʻololi hou no nā palena, padding, a me nā mea hou aʻe e hele mai me ka .tablepapa .

He papa laʻana kēia, a ʻo ia kāna caption e wehewehe i nā mea i loko.
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

Nā palapala

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 ʻia display: inline-blocke ʻae margine 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ākou margina me nā hoʻonohonoho line-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.
<button>s a me <input>nā mea pihi i ka cursor: pointerwā :not(:disabled).

Hōʻike ʻia kēia mau hoʻololi, a me nā mea hou aʻe ma lalo nei.

Nā kuhikuhi ma nā pihi

Loaʻa i ka reboot kahi hoʻonui no role="button"ka hoʻololi ʻana i ka cursor paʻamau i pointer. E hoʻohui i kēia ʻano i nā mea e kōkua ai e hōʻike i ka pilina o nā mea. ʻAʻole pono kēia kuleana no <button>nā mea e loaʻa i kā lākou cursorhoʻololi ponoʻī.

Pākuʻi ʻeleʻele ʻole

<span role="button" tabindex="0">Non-button element button</span>

Nā mea ʻokoʻa

Heluhelu

Hoʻohou ʻia ka <address>mea e hoʻihoʻi hou i ka polokalamu kele pūnaewele font-stylemai italicka normal. line-heightua hoʻoili ʻia i kēia manawa, a margin-bottom: 1remua 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>.

Twitter, Inc.
1355 Market St, Suite 900
Kapalakiko, CA 94103
P: (123) 456-7890

Inoa piha
[email protected]

ʻōlelo poloka

ʻO ka paʻamau marginma nā blockquotes ʻo ia 1em 40px, no laila hoʻonohonoho mākou i kēlā 0 0 1remno kahi mea i kūlike me nā mea ʻē aʻe.

He ʻōlelo ʻōlelo kaulana, aia i loko o kahi mea blockquote.

Kekahi mea kaulana ma Source Title

Nā mea i laina laina

Loaʻa <abbr>ka ʻeleʻele i ke ʻano kumu e kū ai i waena o nā kikokikona paukū.

Nulla attr vitae elit libero, a pharetra augue.

Hōʻuluʻulu manaʻo

ʻO ka mea paʻamau cursorma ka hōʻuluʻulu ʻana ʻo ia text, no laila hoʻonohonoho mākou i kēlā e pointerhōʻ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ʻī.

`[hidden]`ʻAno HTML5

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.

<input type="text" hidden>

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 displaynā 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 .invisiblepapa .