Hoʻomaka hou

Reboot, he hōʻiliʻili o nā mea hoʻololi CSS kikoʻī i loko o kahi faila hoʻokahi, kickstart Bootstrap e hāʻawi i kahi papa kuhikuhi nani, kūlike, a maʻalahi hoʻi e kūkulu ai.

Ma kēia ʻaoʻao

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. Hiki ke hoʻopau ʻia kēia polokalamu paʻamau ma ka hoʻololi ʻana i ka $font-size-rootloli.
Hoʻonohonoho <body>pū ʻia ka honua font-family, font-weight, line-height, a color. 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

Hoʻohana ʻo Bootstrap i kahi "pūnaewele font maoli" a i ʻole "system font stack" no ka unuhi ʻana i nā kikokikona maikaʻi loa ma kēlā me kēia hāmeʻa a me OS. Ua hoʻolālā kikoʻī ʻia kēia mau ʻōnaehana me nā mea hana o kēia mau lā, me ka hoʻomaikaʻi ʻana i ka hoʻololi ʻana ma nā pale, ke kākoʻo ʻana i nā font loli, a me nā mea hou aku. E heluhelu hou aʻe e pili ana i nā pūʻulu kikokikona maoli ma kēia ʻatikala Smashing Magazine .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // 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 hoʻonohonoho hou mākou i ka padding-lefton <ul>a me <ol>nā mea.

Ua wehe ʻia nā papa inoa a pau
A ua maʻamau ko lākou palena lalo
ʻAʻohe ʻaoʻao lalo o nā papa inoa pūnana
- Ma keia ano, ua oi aku ko lakou helehelena
- ʻOiaʻiʻo 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 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.

code inline

E kāʻei i nā ʻāpana code inline me <code>. E hōʻoia e pakele i nā bracket kihi HTML.

No ka laʻana, <section>pono e ʻōwili ʻia e like me ka inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Nā poloka code

E hoʻohana <pre>i ka s no nā laina helu he nui. Eia hou, e hōʻoia e pakele i nā bracket angle i loko o ke code no ka hoʻolilo kūpono. Hoʻonohonoho <pre>hou ʻia ka mea e wehe margin-topa hoʻohana i remnā ʻāpana no kāna margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Nā mea hoʻololi

No ka hōʻike ʻana i nā mea hoʻololi e hoʻohana i ka <var>tag.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Hoʻokomo mea hoʻohana

E hoʻohana i ka mea <kbd>e hōʻike i ka hoʻokomo maʻamau i hoʻokomo ʻia ma o ka keyboard.

No ka hoʻololi ʻana i nā papa kuhikuhi, cde kākau i ka inoa o ka papa kuhikuhi.
No ka hoʻoponopono ʻana i nā hoʻonohonoho, kaomi ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Hoʻopuka laʻana

No ka hōʻike ʻana i ka hoʻopuka hoʻohālike mai kahi papahana e hoʻohana i ka <samp>tag.

Hana ʻia kēia kikokikona ma ke ʻano he laʻana puka mai kahi polokalamu kamepiula.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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 s, <select>s, <textarea>s, a me <button>s ka hapa nui e ʻōlelo ʻia e Normalize, akā wehe ʻo Reboot i kā lākou margina hoʻonohonoho line-height: inheritpū 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 ʻ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.

Kākoʻo hoʻokomo lā a me nā kala

E hoʻomanaʻo ʻaʻole kākoʻo piha ʻia nā mea hoʻokomo lā e nā polokalamu kele a pau, ʻo ia hoʻi ʻo Safari.

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.

<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 .