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.

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.

Nā hoʻololi CSS

Hoʻohui ʻia ma v5.1.1

Me v5.1.1 , ua hoʻohālikelike mākou i @importkā mākou mau pūʻolo CSS a pau (me bootstrap.css, bootstrap-reboot.css, a bootstrap-grid.cssme _root.scss. :rootʻike hou aku i nā mea hoʻololi CSS i hoʻohui ʻia i ka manawa.

ʻ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: 1remHoʻohana ʻia ma ka <body>no ka maʻalahi o ka pane ʻ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ū ka font-family, font-weight, line-heighta me 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 "pūnaewele pūnaewele" no ka hoʻopuka kikokikona maikaʻi loa ma kēlā me kēia polokalamu a me ka OS. Ua hoʻolālā kūikawā ʻia kēia mau ʻōnaehana me ka noʻonoʻo ʻana i nā hāmeʻa o kēia 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ā hoʻololi CSS

Ke hoʻomau nei ʻo Bootstrap 5 i ke oʻo ʻana, e kūkulu ʻia nā ʻano hou aʻe me nā ʻano hoʻololi CSS i mea e hāʻawi ai i ka hoʻomaʻamaʻa manawa maoli me ka ʻole o ka pono e hoʻopili hou iā Sass. ʻO kā mākou ala ʻo ka lawe ʻana i kā mākou kumu kumu Sass a hoʻololi iā lākou i nā ʻano CSS. ʻO ia ala, ʻoiai inā ʻaʻole ʻoe e hoʻohana i nā ʻano CSS, loaʻa iā ʻoe ka mana āpau o Sass. Ke hoʻomau nei kēia i ka holomua a e lōʻihi ka manawa e hoʻokō pono ai.

No ka laʻana, e noʻonoʻo i kēia mau ʻano :rootCSS no nā ʻano maʻamau <body>:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

I ka hoʻomaʻamaʻa, hoʻohana ʻia kēlā mau ʻano i ka Reboot e like me:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

ʻO ia ka mea e hiki ai iā ʻoe ke hana i nā hoʻoponopono manawa maoli e like me kou makemake:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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 margin-bottom: .5remhoʻohui ʻia nā poʻo poʻo a me nā paukū margin-bottom: 1remno ka maʻalahi o ke kaawale.

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

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 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 aku 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 ho'āla 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 palena no laila 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ā kahua kahua, 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.

Laʻana kaʻao

Hoʻokomo laʻana

leka uila laʻana

Kelepona laʻana

URL laʻana

Helu laʻana

Huli laʻana

Laʻana laʻana

Hoʻokomo waihona laʻana

Laʻana koho

E nānā i kēia pahu pahu

ʻO ke koho hoʻokahi kēia a me kēlā ʻO ke koho ʻelua kekahi mea ʻē aʻe i lōʻihi loa e hōʻike i ke kāʻei ʻana o kēia mau mana mana. Ua pio ke koho ekolu

Laʻana textarea

lā laʻana

manawa laʻana

Laʻana password

Laʻana manawa-local

He pule laʻana

mahina laʻana

Laʻana kala

Laʻana hoʻopuka 100

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

Hoʻokomo hou ʻia 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, i 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ū.

ʻO ka mea HTML pōkole.

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

ʻO kekahi mau kikoʻī

ʻIke hou aku e pili ana i nā kikoʻī.

ʻO nā kikoʻī hou aku

Eia nā kikoʻī hou aku e pili ana i nā kikoʻī.

`[hidden]`ʻAno HTML5

Hoʻohui ʻo HTML5 i kahi hiʻohiʻona honua hou i kapa[hidden] ʻia ʻo , i kapa display: noneʻia ma ke ʻano maʻamau. Ke ʻaiʻē nei i kahi manaʻo mai PureCSS , hoʻomaikaʻi mākou i kēia paʻamau ma o ka hana ʻana i mea [hidden] { display: none !important; }e pale aku ai i kona 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 .

Hoʻomaka hou

Hoʻokokoke

Nā hoʻololi CSS

ʻAoʻao paʻamau

Pūʻulu kikokikona ʻōiwi

Nā hoʻololi CSS

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

Nā papa inoa

code inline

Nā poloka code

Nā mea hoʻololi

Hoʻokomo mea hoʻohana

Hoʻopuka laʻana

Nā papaʻaina

Nā palapala

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

Nā kuhikuhi ma nā pihi

Nā mea ʻokoʻa

Heluhelu

ʻōlelo poloka

Nā mea i laina laina

Hōʻuluʻulu manaʻo

[hidden]ʻAno HTML5

jQuery like ole

`[hidden]`ʻAno HTML5