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

Me v5.1.1, ua hoʻohālikelike mākou i kā mākou mau @imports i koi ʻia ma kā mākou pūʻolo CSS āpau (me bootstrap.css, bootstrap-reboot.css, a me bootstrap-grid.css) e hoʻokomo i _root.scss. Hoʻohui kēia i :rootnā mea hoʻololi CSS pae i nā pūʻolo āpau, me ka nānā ʻole i ka nui o lākou i hoʻohana ʻia i kēlā pūʻulu. ʻO ka hope loa e hoʻomau ʻo Bootstrap 5 e ʻike i nā mea hoʻololi CSS hou aʻe i hoʻohui ʻia i ka manawa, i mea e hāʻawi ai i ka hana maʻamau 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 {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$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(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

ʻ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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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ā lula hoʻopololei

Ua <hr>maʻalahi ka mea. E like me nā mea pa'amau o ka polokalamu kele pūnaewele, <hr>ua kapa 'ia 'o s ma o border-top, loa'a kahi pa'amau opacity: .25, a ho'oili 'akomi i ko lākou border-colorma o color, me ka manawa colori ho'onoho 'ia ma o ka makua. Hiki ke hoʻololi ʻia me ka kikokikona, ka palena, a me nā pono opacity.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

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.

html

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>

html

<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

html

<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 + ,

html

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.

html

<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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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

Laʻana kaʻao

Laʻana hoʻokomo

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

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, i loaʻa i kā lākou cursorhoʻololi ponoʻī.

Pākuʻi ʻeleʻele ʻole

html

<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 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 ʻ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ā poʻomanaʻo a me nā paukū

Nā lula hoʻopololei

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