Typography a wɔde kyerɛw nsɛm

Nwoma ne nhwɛsoɔ a ɛfa Bootstrap typography ho, a wiase nyinaa nhyehyɛɛ, nsɛmti, nipadua mu nsɛm, nsɛm a wɔahyehyɛ, ne nea ɛkeka ho ka ho.

Wɔ kratafa yi so

Wiase nyinaa tebea horow

Bootstrap hyehyɛ wiase nyinaa nkyerɛkyerɛmu titiriw, typography, ne link styles. Sɛ ɛho hia sɛ wodi so pii a, hwɛ textual utility classes no .

Fa native font stack a ɛpaw nea eye sen biara font-familyma OS ne mfiri biara di dwuma.
Sɛ wopɛ sɛ wonya type scale a ɛka ho na ɛyɛ mmerɛw a, yɛde browser no default root font-size(taa yɛ 16px) di dwuma sɛnea ɛbɛyɛ a nsrahwɛfo betumi ayɛ wɔn browser defaults no sɛnea ɛho hia.
Fa $font-family-base, $font-size-base, ne $line-height-basesu ahorow no di dwuma sɛ yɛn nkyerɛwee nnyinaso a yɛde dii dwuma wɔ <body>.
Fa wiase nyinaa link kɔla no si hɔ denam $link-color.
Fa di dwuma $body-bgde hyehyɛ a background-colorwɔ <body>( #fffdefault so).

Wobetumi ahu saa akwan yi wɔ mu _reboot.scss, na wɔakyerɛkyerɛ wiase nyinaa nsakrae ahorow no mu wɔ _variables.scss. Hwɛ hu sɛ wode besi $font-size-basehɔ rem.

Nsɛmti ahorow

HTML asɛmti nyinaa, <h1>kosi <h6>, wɔ hɔ.

Asɛmti	Nhwɛsoɔ
`<h1></h1>`	h1. Bootstrap asɛmti no
`<h2></h2>`	h2. Bootstrap asɛmti no
`<h3></h3>`	h3. Bootstrap asɛmti no
`<h4></h4>`	h4. Bootstrap asɛmti no
`<h5></h5>`	h5. Bootstrap asɛmti no
`<h6></h6>`	h6. Bootstrap asɛmti no

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

.h1through .h6classes nso wɔ hɔ, ma bere a wopɛ sɛ wo ne font styling a ɛwɔ asɛmti bi mu no hyia nanso wuntumi mfa HTML element a ɛbata ho no nni dwuma.

h1. Bootstrap asɛmti no

h2. Bootstrap asɛmti no

h3. Bootstrap asɛmti no

h4. Bootstrap asɛmti no

h5. Bootstrap asɛmti no

h6. Bootstrap asɛmti no

html na ɛwɔ hɔ

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

Nsɛmti ahorow a wɔreyɛ no sɛnea wopɛ

Fa utility classes a ɛka ho no di dwuma fa san yɛ secondary heading text nketewa no fi Bootstrap 3 mu.

Fancy display heading Ne nsɛm a ɛto so abien a ayera

html na ɛwɔ hɔ

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

Kyerɛ nsɛmti ahorow

Wɔayɛ atetesɛm asɛmti nneɛma no sɛnea ɛbɛyɛ a ɛbɛyɛ adwuma yiye wɔ wo krataafa no mu nsɛm no nam mu. Sɛ wuhia asɛmti bi na ama woada nsow a, susuw ho sɛ wode asɛmti a wɔde bɛkyerɛ —asɛmti kwan a ɛsõ a ɛwɔ adwene kakra bedi dwuma.

Nkyerɛkyerɛmu 1

Nkyerɛkyerɛmu 2

Nkyerɛkyerɛmu 3

Nkyerɛkyerɛmu 4

Nkyerɛkyerɛmu 5

Nkyerɛkyerɛmu 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>

$display-font-sizesWɔnam Sass map ne nsakraeɛ mmienu so na ɛhyehyɛ nsɛmti a wɔde bɛkyerɛ, $display-font-weightne $display-line-height.

Wɔnam nsakrae abien so sesa nsɛmti a wɔde kyerɛ no, $display-font-familyne $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;

Di kan

Ma nkyekyem bi da nsow denam .lead.

Eyi yɛ nkyekyem a edi kan. Ɛda nsow wɔ nkyekyem ahorow a wɔyɛ no daa no ho.

html na ɛwɔ hɔ

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

Nsɛm a ɛwɔ nkyerɛwde mu no mu nneɛma

Styling ma inline HTML5 nneɛma a wɔtaa de di dwuma.

Wubetumi de agyiraehyɛde tag no adi dwuma deda no adiatwerɛ.

~~Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ nsɛm a wɔapopa.~~

~~Wɔayɛ sɛ wɔbɛfa saa nkyerɛwee yi sɛ ɛnyɛ nokware bio.~~

Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔahyehyɛ yi sɛ ade a wɔde aka krataa no ho.

Saa nsɛm yi bɛkyerɛ ase sɛnea wɔatwe adwene asi so no.

Wɔayɛ sɛ wɔbɛfa saa nsɛm a wɔakyerɛw no sɛ nkyerɛwde a ɛyɛ fɛ.

Wɔakyerɛ saa nkyerɛwde yi ase sɛ nsɛm a ɛyɛ tuntum.

Saa nkyerɛwde yi a wɔakyerɛ ase sɛ nsɛm a wɔakyerɛw no italics.

html na ɛwɔ hɔ

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

Hwɛ yiye sɛ ɛsɛ sɛ wode saa tag ahorow no di dwuma de kyerɛ ntease:

gyina hɔ ma nsɛm a wɔahyɛ no agyirae anaasɛ wɔasi so dua de ahwɛ anaa wɔde nkyerɛwde ahyɛ mu.
gyina hɔ ma nsɛm a wɔka wɔ nkyɛnkyɛn ne nkyerɛwee nketewa, te sɛ hokwan a wɔde yɛ adwuma ne mmara kwan so nsɛm.
<s>gyina hɔ ma element a ɛnyɛ nea ɛfata bio anaasɛ ɛnyɛ pɛpɛɛpɛ bio.
gyina hɔ ma span a ɛwɔ inline text a ɛsɛ sɛ wɔkyerɛ ase wɔ ɔkwan bi so a ɛkyerɛ sɛ ɛwɔ nkyerɛkyerɛmu a ɛnyɛ nkyerɛwee mu.

Sɛ wopɛ sɛ woyɛ wo nsɛm no sɛnea wopɛ a, ɛsɛ sɛ wode adesua ahorow a edidi so yi di dwuma mmom:

.markde ntadehyɛ ahorow koro no ara bedi dwuma sɛnea .
.smallde ntadehyɛ ahorow koro no ara bedi dwuma sɛnea .
.text-decoration-underlinede ntadehyɛ ahorow koro no ara bedi dwuma sɛnea .
.text-decoration-line-throughde ntadehyɛ ahorow koro no ara bedi dwuma sɛnea <s>.

Bere a wɔankyerɛ wɔ atifi hɔ no, ntwentwɛn wo nan ase sɛ wode bedi dwuma na wode ahyɛ HTML5 mu. no kyerɛ sɛ ɛbɛtwe adwene asi nsɛmfua anaa nsɛmfua so a ɛrenkyerɛ hia foforo, bere a ɛyɛ nea ɛfa nne, mfiridwuma ho nsɛm, ne nea ɛkeka ho ho titiriw.

Nsɛm a wɔde kyerɛw nsɛm

Sesa nsɛm a wɔahyehyɛ, dannan, ɔkwan a wɔfa so yɛ ade, emu duru, line-height, ahosiesie ne kɔla denam yɛn nkyerɛwee mfaso ne kɔla mfaso horow so .

Nsɛmfua a wɔatwa no tiaa

Stylized implementation of HTML's <abbr>element ma abbreviations ne acronyms de kyerɛ nkyerɛase a wɔatrɛw mu no wɔ hover so. Abbreviations wɔ default underline na wonya mmoa cursor de ma nsɛm foforo wɔ hover ne wɔn a wɔde mmoa mfiridwuma di dwuma.

Fa ka .initialismasɛmfua tiawa bi ho ma font-size a ɛyɛ ketewaa bi.

attr

HTML a wɔde di dwuma

html na ɛwɔ hɔ

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

Nsɛm a wɔde siw ano

Sɛ wopɛ sɛ wofa nsɛm a wɔabɔ no mua a efi baabi foforo a ɛwɔ wo krataa no mu a. Fa <blockquote class="blockquote">HTML biara kyekyere ho sɛ asɛm a wɔafa aka no.

Asɛm a wɔafa aka a wonim no yiye, a ɛwɔ blockquote element bi mu.

html na ɛwɔ hɔ

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

Fibea bi din a wɔbɛbɔ

HTML spec no hwehwɛ sɛ wɔde blockquote attribution no bɛto <blockquote>. Sɛ wode attribution rema a, kyekyere wo <blockquote>wɔ a mu <figure>na fa a <figcaption>anaa block level element (sɛ nhwɛso no, ) di dwuma ne .blockquote-footeradesuakuw no. Hwɛ hu sɛ wobɛkyekyere source adwuma no din <cite>nso mu.

Asɛm a wɔafa aka a wonim no yiye, a ɛwɔ blockquote element bi mu.

html na ɛwɔ hɔ

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

Nneɛma a Wɔde Di Dwuma

Fa text utilities di dwuma sɛnea ɛho hia na sesa alignment a ɛwɔ wo blockquote no mu.

Asɛm a wɔafa aka a wonim no yiye, a ɛwɔ blockquote element bi mu.

html na ɛwɔ hɔ

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

Asɛm a wɔafa aka a wonim no yiye, a ɛwɔ blockquote element bi mu.

html na ɛwɔ hɔ

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

Nsɛm a wɔahyehyɛ

Wɔannwene no

Yi default list-stylene benkum margin wɔ list nneɛma (mmofra ntɛm ara nkutoo). Eyi fa mmofra a wɔakyerɛw wɔn din ntɛm ara nneɛma nkutoo ho , a ɛkyerɛ sɛ ɛho behia sɛ wode adesuakuw no ka ho ma nkyerɛwde biara a wɔde ahyɛ mu nso.

Eyi yɛ nsɛm a wɔahyehyɛ.
Ɛte sɛ nea wɔankyerɛw no koraa.
Structurally, ɛda so ara yɛ list.
Nanso, saa ɔkwan yi fa abofra nneɛma a ɛwɔ hɔ ntɛm ara nkutoo ho.
Nsɛm a wɔahyehyɛ a wɔde ahyɛ mu:
- no nnya saa ɔkwan yi so nkɛntɛnso
- bɛda so ara akyerɛ tuo bi
- na wɔwɔ benkum so fã a ɛfata
Ebia eyi da so ara yɛ nea mfaso wɔ so wɔ tebea horow bi mu.

html na ɛwɔ hɔ

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

Yi list bi mu atuo no na fa kanea bi gu so margindenam adesuakuw abien a wɔaka abom so, .list-inlinene .list-inline-item.

Eyi yɛ ade a wɔahyehyɛ.
Na ɔfoforo nso.
Nanso wɔda no adi wɔ inline mu.

html na ɛwɔ hɔ

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

Nkyerɛkyerɛmu list alignment

Fa nsɛmfua ne nkyerɛkyerɛmu ahorow no hyia wɔ ɔkwan a ɛkɔ soro so denam yɛn grid nhyehyɛe no adesua ahorow a wɔadi kan akyerɛkyerɛ mu (anaasɛ nkyerɛase mixins) a wode bedi dwuma no so. Sɛ wopɛ nsɛm tenten a, wubetumi de .text-truncateadesuakuw bi aka ho a wode ellipsis atwa nkyerɛwee no mu.

Nkyerɛkyerɛmu a wɔahyehyɛ

Nkyerɛkyerɛmu a wɔahyehyɛ no yɛ pɛpɛɛpɛ ma nsɛmfua nkyerɛase.

Asɛmfua

Nkyerɛase a wɔde ma asɛmfua no.

Na ebinom foforo nso placeholder nkyerɛase nkyerɛwee.

Asɛmfua foforo

Saa nkyerɛase yi yɛ tiawa, enti nkyekyɛm foforo anaa biribiara nni hɔ.

Wɔatwa asɛmfua a wɔatwa no tiaa no mu

Eyi betumi ayɛ nea mfaso wɔ so bere a baabi a ɛwɔ hɔ no yɛ den no. Ɔde ellipsis bi ka ho wɔ awiei.

Nesting a wɔde yɛ buw

Nested nkyerɛase list: Metee sɛ wopɛ definition lists. Ma memfa nkyerɛaseɛ list bi nhyɛ wo nkyerɛaseɛ list no mu.

html na ɛwɔ hɔ

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

Font akɛse a ɛyɛ mmuae

Wɔ Bootstrap 5 mu no, yɛama font akɛseɛ a ɛyɛ mmuaeɛ no ayɛ adwuma default so, ama nsɛm no atumi ayɛ kɛseɛ wɔ abɔdeɛ mu wɔ mfiri ne viewport akɛseɛ mu. Hwɛ RFS krataafa no so na woahu sɛnea eyi yɛ adwuma.

Sass

Nneɛma a Ɛsakra

Nsɛmti wɔ nsakrae ahorow bi a wɔatu ho ama a wɔde bɛyɛ kɛse ne ntam kwan.

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

Typography element ahorow a wɔaka ho asɛm wɔ ha ne Reboot mu no nso wɔ nsakrae ahorow a wɔatu ho ama.

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

Nneɛma a wɔde frafra

Mixins biara nni hɔ a wɔatu wɔn ho ama ama typography, nanso Bootstrap de Responsive Font Sizing (RFS) di dwuma ampa .