Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

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

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.

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

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .