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.

Ma kēia ʻaoʻao

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

html

<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

html

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

Hōʻike 1

Hōʻike 2

Hōʻike 3

Hōʻike 4

Hōʻike 5

Hōʻike 6

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Hoʻonohonoho ʻia nā poʻomanaʻo hōʻike ma o ka $display-font-sizespalapala ʻāina Sass a me ʻelua mau hoʻololi, $display-font-weighta me $display-line-height.

Hiki ke hoʻololi ʻia nā poʻomanaʻo hōʻike ma o nā ʻano ʻelua, $display-font-familya me $display-font-style.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

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.

html

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

html

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

E makaʻala e hoʻohana ʻia kēlā mau hōʻailona no ke kumu semantic:

hōʻike i ka kikokikona i kaha ʻia a i hoʻokalaka ʻia no ka manaʻo kuhikuhi a i ʻole ka notation kumu.
hōʻike i nā manaʻo ʻaoʻao a me nā paʻi liʻiliʻi, e like me ke kope kope a me nā kikokikona kānāwai.
<s>hōʻike i ka mea pili ʻole a pololei ʻole.
hōʻike i ka lōʻihi o ka kikokikona inline pono e unuhi ʻia ma ke ʻano e hōʻike ana he hōʻailona kikokikona ʻole.

Inā makemake ʻoe e kāhiko i kāu kikokikona, pono ʻoe e hoʻohana i kēia mau papa:

.marke hoʻohana i nā ʻano like me .
.smalle hoʻohana i nā ʻano like me .
.text-decoration-underlinee hoʻohana i nā ʻano like me .
.text-decoration-line-throughe hoʻohana i nā ʻano like me <s>.

ʻOiai ʻaʻole i hōʻike ʻia ma luna, e ʻoluʻolu e hoʻohana a ma HTML5. ʻ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 ka mea nui, ʻoiai ka hapa nui no ka leo, nā ʻōlelo loea, etc.

Nā pono kikokikona

E hoʻololi i ka alignment kikokikona, hoʻololi, ke ʻano, ke kaumaha, ke kiʻekiʻe o ka laina, ka hoʻonaninani 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

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.

html

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

Kapa inoa i kumu

Pono ka HTML spec e hoʻokomo i ka ʻōlelo blockquote ma waho o ka <blockquote>. I ka hāʻawi ʻana i ka hoʻoili ʻana, e hoʻopili iā ʻoe <blockquote>i loko o kahi <figure>a hoʻohana i <figcaption>kahi ʻāpana pae ʻāpana a i ʻole (e laʻa, ) me ka .blockquote-footerpapa. E hoʻopili pono i ka inoa o ka hana kumu <cite>.

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

html

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

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.

html

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

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

html

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

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.

html

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

html

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

html

<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

Ma Bootstrap 5, ua hiki iā mākou ke hoʻololi i ka nui o nā font pane ma ke ʻano paʻamau, 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ā. E nānā i ka ʻaoʻao RFS e ʻike pehea e hana ai kēia.

Sass

Nā mea hoʻololi

Loaʻa i nā poʻomanaʻo kekahi mau ʻano like ʻole no ka nui a me ka spacing.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

Ua hoʻolaʻa ʻia nā ʻano ʻano typography like ʻole i uhi ʻia ma ʻaneʻi a i Reboot .

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$dt-font-weight:              $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-bg:                     $yellow-100;

Mea huikau

ʻAʻohe hui hoʻolaʻa no ka typography, akā hoʻohana ʻo Bootstrap i ka Responsive Font Sizing (RFS) .