in English

Palapala kiʻi

Nā palapala a me nā laʻana no Bootstrap typography, me nā hoʻonohonoho honua, nā poʻo, nā kikokikona kino, nā papa inoa, a me nā mea hou aku.

Nā hoʻonohonoho honua

Hoʻonohonoho ʻo Bootstrap i ka hōʻike honua maʻamau, typography, a me nā ʻano loulou. Ke koi ʻia ka mana hou aku, e nānā i nā papa hana kikokikona .

E hoʻohana i kahi waihona kikokikona maoli e koho i ka mea maikaʻi loa font-familyno kēlā me kēia OS a me nā mea hana.
No ka ʻano pālākiō hou aʻe a hiki ke loaʻa, hoʻohana mākou i ke kumu paʻamau o ka polokalamu kele pūnaewele font-size(maʻamau 16px) no laila hiki i nā malihini ke hana i kā lākou polokalamu paʻamau e like me ka mea e pono ai.
E hoʻohana i ka $font-family-base, $font-size-base, a me $line-height-basenā ʻano e like me kā mākou kumu kikokikona i pili i ka <body>.
E hoʻonoho i ka waihoʻoluʻu loulou honua ma o $link-colora hoʻopili i nā kaha lalo ma :hover.
E hoʻohana $body-bgno ka hoʻonoho ʻana background-colori ka <body>( #fffma ka paʻamau).

Hiki ke loaʻa kēia mau ʻano i loko o _reboot.scss, a ua wehewehe ʻia nā ʻano hoʻololi honua ma _variables.scss. E hōʻoia e hoʻokomo i $font-size-baseloko rem.

Nā poʻomanaʻo

Loaʻa nā poʻomanaʻo HTML āpau, <h1>ma o <h6>,.

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

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

.h1ma o .h6nā papa, no ka mea, inā makemake ʻoe e hoʻohālikelike i ke ʻano o ka font styling o kahi poʻomanaʻo akā ʻaʻole hiki ke hoʻohana i ka mea HTML pili.

h1. Poʻomanaʻo Bootstrap

h2. Poʻomanaʻo Bootstrap

h3. Poʻomanaʻo Bootstrap

h4. Poʻomanaʻo Bootstrap

h5. Poʻomanaʻo Bootstrap

h6. Poʻomanaʻo Bootstrap

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

Hoʻopilikino i nā poʻomanaʻo

E hoʻohana i nā papa hana pono e hana hou i ka kikokikona poʻomanaʻo liʻiliʻi mai Bootstrap 3.

Poʻomanaʻo hōʻike nani me nā kikokikona lua pele

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

Hōʻike poʻomanaʻo

Hoʻolālā ʻia nā mea poʻomanaʻo kuʻuna e hana maikaʻi loa i ka ʻiʻo o kāu ʻaoʻao ʻaoʻao. Ke makemake ʻoe i kahi poʻomanaʻo e kū i waho, e noʻonoʻo e hoʻohana i kahi poʻomanaʻo hōʻike - kahi ʻano poʻomanaʻo nui a ʻoi aku ka manaʻo. E hoʻomanaʻo ʻaʻole pane ʻia kēia mau poʻomanaʻo ma ke ʻano paʻamau, akā hiki ke hiki ke hoʻololi i ka nui o nā font pane .

Hōʻike 1

Hōʻike 2

Hōʻike 3

Hōʻike 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Ke alakaʻi

E hoʻokaʻawale i kahi paukū ma ka hoʻohui ʻana i .lead.

He paukū alakaʻi kēia. Kūʻokoʻa ia mai nā paukū maʻamau.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Nā mea kikokikona laina

Hoʻolima ʻana no nā mea maʻamau HTML5 inline.

Hiki iā ʻoe ke hoʻohana i ka mark mark ihōʻailonakikokikona.

~~Hoʻohana ʻia kēia laina kikokikona ma ke ʻano he kikokikona holoi ʻia.~~

~~Manaʻo ʻia kēia laina o ka kikokikona me he mea lā ʻaʻole pololei.~~

Hoʻohana ʻia kēia laina kikokikona ma ke ʻano he mea hoʻohui i ka palapala.

E hāʻawi ʻia kēia laina kikokikona e like me ke kaha ʻia

ʻO kēia laina kikokikona i manaʻo ʻia e mālama ʻia ma ke ʻano he paʻi maikaʻi.

Ua unuhi ʻia kēia laina ma ke ʻano he kikokikona wiwo ʻole.

Ua unuhi ʻia kēia laina ma ke ʻano he kikokikona italicized.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

.marka .smallloaʻa nō hoʻi nā papa no ka hoʻohana ʻana i nā ʻano like <mark>a me <small>ka pale ʻana i nā hopena semantic i makemake ʻole ʻia e lawe ʻia e nā hōʻailona.

ʻOiai ʻaʻole i hōʻike ʻia ma luna, e ʻoluʻolu e hoʻohana <b>a <i>ma HTML5. <b>ʻO ka manaʻo e hōʻike i nā huaʻōlelo a i ʻole nā huaʻōlelo me ka ʻole o ka lawe ʻana i nā mea koʻikoʻi aʻo <i>ka hapa nui no ka leo, nā ʻōlelo loea, etc.

Nā pono kikokikona

E hoʻololi i ka alignment kikokikona, hoʻololi, kaila, kaumaha, a me ka waihoʻoluʻu me kā mākou mau pono kikokikona a me nā pono kala .

Nā pōkole

Hoʻohana ʻia i ka mea HTML <abbr>no nā pōkole a me nā acronyms e hōʻike i ka mana i hoʻonui ʻia ma ka hover. Loaʻa i nā pōkole kahi kaha lalo a loaʻa kahi ʻōkuhi kōkua e hāʻawi i ka pōʻaiapili hou ma ka hover a me nā mea hoʻohana i nā ʻenehana kōkua.

Hoʻohui .initialismi kahi pōkole no ka liʻiliʻi liʻiliʻi.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

No ka ʻōlelo ʻana i nā poloka maʻiʻo mai kahi kumu ʻē aʻe i loko o kāu palapala. E <blockquote class="blockquote">kāʻei i kekahi HTML e like me ka ʻōlelo.

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

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
</blockquote>

Kapa inoa i kumu

Hoʻohui i kahi <footer class="blockquote-footer">no ka ʻike ʻana i ke kumu. E kāʻei i ka inoa o ka hana kumu ma <cite>.

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Hoʻopololei

E hoʻohana i nā pono kikokikona e like me ka mea e pono ai e hoʻololi i ka alignment o kāu blockquote.

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Nā papa inoa

Kaulana ʻole

Wehe i ka palena paʻamau list-stylea me ka ʻaoʻao hema ma ka papa inoa o nā mea (nā keiki koke wale nō). Pili wale kēia i nā mea papa inoa o nā keiki , ʻo ia hoʻi, pono ʻoe e hoʻohui i ka papa no nā papa inoa pū kekahi.

He papa inoa kēia.
ʻIke ʻia ʻaʻole ia he ʻano like ʻole.
Ma ke kahua, he papa inoa mau.
Eia naʻe, pili wale kēia ʻano i nā mea keiki koke.
Nā papa inoa i hoʻopaʻa ʻia:
- ʻaʻole pili i kēia ʻano
- e hōʻike mau ana i kahi pōkā
- a loaʻa ka palena hema kūpono
Hiki ke hoʻohana ʻia kēia i kekahi mau kūlana.

<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

Inline

Wehe i nā pōkā o kahi papa inoa a hoʻopili i kahi māmā marginme ka hui pū ʻana o nā papa ʻelua, .list-inlinea .list-inline-item.

He mea papa inoa kēia.
A ʻo kekahi.
Akā, hōʻike ʻia lākou ma ka laina.

<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

Hoʻoponopono papa inoa wehewehe

E hoʻolālikelike i nā huaʻōlelo a me nā wehewehe ʻana ma ka hoʻohana ʻana i nā papa i koho mua ʻia (a i ʻole nā hui semantic). No nā huaʻōlelo lōʻihi, hiki iā ʻoe ke hoʻohui i kahi .text-truncatepapa e ʻoki i ka kikokikona me kahi ellipsis.

Nā papa inoa wehewehe

Kūpono ka papa inoa wehewehe no ka wehewehe ʻana i nā huaʻōlelo.

Kau

Wehewehe no ka hua'ōlelo.

A ʻo kekahi mau kikokikona wehewehe wahi.

ʻO kekahi huaʻōlelo

He pōkole kēia wehewehe, no laila ʻaʻohe pauku hou a i ʻole kekahi mea.

ʻoki ʻia ka huaʻōlelo i ʻoki ʻia

Hiki ke hoʻohana i kēia i ka wā paʻa ka hakahaka. Hoʻohui i kahi ellipsis ma ka hope.

Nesting

Papa kuhikuhi wehewehe: Ua lohe au makemake ʻoe i nā papa wehewehe wehewehe. E ʻae mai iaʻu e hoʻokomo i kahi papa inoa wehewehe i loko o kāu papa kuhikuhi wehewehe.

<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

Ka nui o nā kikokikona pane

E like me v4.3.0, hoʻouna ʻia ʻo Bootstrap me ke koho e hiki ai i ka nui o nā font pane, e ʻae ana i nā kikokikona e hoʻonui maoli i ke ʻano ma waena o nā hāmeʻa a me ka nui o ka nānā. Hiki ke hoʻohana ʻia ʻo RFS ma o ka hoʻololi ʻana i ka hoʻololi $enable-responsive-font-sizesSass a trueme ka hoʻopili hou ʻana iā Bootstrap.

No ke kākoʻo ʻana iā RFS , hoʻohana mākou i kahi mixin Sass e pani i kā mākou mau font-sizewaiwai maʻamau. E hōʻuluʻulu ʻia nā nui font pane i loko o calc()nā hana me ka hui ʻana o remnā ʻāpana viewport e hiki ai i ke ʻano hoʻohālikelike pane. Hiki ke loaʻa nā mea hou aʻe e pili ana iā RFS a me kāna hoʻonohonoho ma kāna waihona GitHub .