Source

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, manaʻo 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 hoʻonohonoho 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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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.

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

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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>.

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

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

Kekahi mea kaulana ma Source Title

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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.

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

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</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.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</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.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

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

Fusce dapibus, ha'i ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Papa kuhikuhi wehewehe: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

Ka nui o nā kikokikona pane

Nā moku Bootstrap v4.3 me ke koho e hiki ai i ka nui o nā font pane, e ʻae ana i nā kikokikona e hoʻonui maʻamau ma waena o nā hāmeʻa a me nā nui viewport. 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 .