Source

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.

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ɛfa no sɛ browser default root font-size(taa yɛ 16px) sɛnea ɛbɛyɛ a nsrahwɛfo betumi ayɛ wɔn browser defaults 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>.
Set wiase nyinaa link kɔla via $link-colorna fa link underlines nkutoo di dwuma wɔ :hover.
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

<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

<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

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

Di kan

Ma nkyekyem bi da nsow denam .lead.

Vivamus sagittis lacus vel augue laoreet a ɛyɛ mmerɛw sɛ wobɛtɔ no. Duis mollis, est a ɛnyɛ ade a wɔde yɛ nneɛma.

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

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

.markna .smalladesua ahorow nso wɔ hɔ a wɔde bedi dwuma wɔ ɔkwan koro no ara so sɛnea ɛte <mark>ne <small>bere a wɔrekwati nkyerɛase mu nkyerɛkyerɛmu biara a wɔmpɛ a tag ahorow no de bɛba no.

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

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

Sesa nsɛm a wɔahyehyɛ no pɛpɛɛpɛ, dannan, ɔkwan a wɔfa so yɛ ade, emu duru, 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

<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 HTML<blockquote class="blockquote"> biara kyekyere ho sɛ nea wɔafa aka no.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ 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>

Fibea bi din a wɔbɛbɔ

Fa a <footer class="blockquote-footer">ma wohu baabi a wonya fi no ka ho. Fa fibea adwuma no din kyekyere <cite>.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

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

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.

Lorem ipsum dolor tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

<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 tena amet, consectetur adipiscing a ɛyɛ fɛ a ɛyɛ fɛ. Nkyekyɛm a edi mũ posuere erat a ante.

Obi a wagye din wɔ Source Title mu

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

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.

Lorem ipsum dolor tena ase amet
Consectetur adipiscing a ɛyɛ fɛ yiye
Integer molestie lorem wɔ massa no mu
Facilisis a ɛwɔ pretium nisl aliquet mu
Nulla volutpat a ɛyɛ aduru a wɔde yɛ aduru
- Phasellus iaculis a ɛwɔ nipadua no mu
- Purus sodales a ɛyɛ aduru a ɛma obi ho yɛ hyew
- Vestibulum laoreet hyɛn gyinabea sem
- Ac tristique libero a ɔyɛ ɔbarima a ɔpɛ sɛ ɔyɛ biribiara
Faucibus porta lacus a ɛyɛ fɛ a ɛyɛ fɛ
Aenean tena ase amet erat nunc
Eget porttitor a ɔyɛ ɔkyerɛkyerɛfo

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

Lorem ipsum a ɔyɛ ɔbarima
Phasellus a wɔfrɛ no iaculis a wɔfrɛ no iaculis
Nulla a ɔyɛ ɔkwasea

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

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.

Euismod ho asɛm

Vestibulum id ligula porta felis euismod awotwaa mu nsuo a ɛwɔ akyi berɛmo mu.

Donec id elit a ɛnyɛ mi porta gravida wɔ eget metus.

Malesuada a ɛwɔ porta

Etiam porta sem ɔbarima a ɔyɛ ɔbarima a ɔyɛ ɔbarima.

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

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut aduru a wɔde yɛ aduru a ɛma ɛyɛ mmerɛw sɛ wobɛtra ase amet risus.

Nesting a wɔde yɛ buw

Nested nkyerɛase list: Aenean posuere, tortor sed nnome feugiat, ɔbea a ɔyɛ ɔbea a ɔyɛ ɔbea a ɔyɛ ɔbea a ɔyɛ ɔbea a ɔyɛ ɔbea a ɔyɛ ɔbea.

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

Typography a ɛma mmuae

Responsive typography kyerɛ sɛ wobɛma nsɛm ne nneɛma a ɛwom no ayɛ kɛse denam ntini element no a wobɛsesa kɛkɛ font-sizewɔ media nsɛmmisa ahorow a ɛtoatoa so mu no so. Bootstrap nyɛ eyi mma wo, nanso ɛyɛ mmerɛw yiye sɛ wode bɛka ho sɛ wuhia a.

Nhwɛso bi a ɛfa ho wɔ nneyɛe mu ni. Paw font-sizes ne media nsɛmmisa biara a wopɛ.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}