Source

Tlhaloso ea litlhaku

Litokomane le mehlala ea Bootstrap typography, ho kenyeletsoa litlhophiso tsa lefats'e, lihlooho, mongolo oa 'mele, manane, le tse ling.

Litlhophiso tsa lefats'e

Bootstrap e beha ponts'o ea mantlha ea lefats'e, typography, le mekhoa ea lihokelo. Ha ho hlokahala taolo e eketsehileng, hlahloba lihlopha tsa tšebeliso ea mongolo .

Sebelisa pokello ea litlhaku tsa tlhaho tse khethang tse ntle font-familybakeng sa OS le sesebelisoa ka seng.
Bakeng sa sekala sa mofuta o kenyellelitsoeng le ho fihlelleha, re nka hore "browser" ea kamehla font-size(hangata e 16px) e le hore baeti ba ka khona ho etsa litlhophiso tsa sebatli sa bona kamoo ho hlokahalang.
Sebelisa $font-family-base, $font-size-base, le $line-height-baselitšoaneleho e le motheo oa typographic o sebelisoang ho <body>.
Beha 'mala oa lihokelo tsa lefats'e ka $link-colorho sebelisa mehala ea likhokahano feela ho :hover.
Sebelisa $body-bgho seta background-colorho <body>( #fffka kamehla).

Mekhoa ena e ka fumanoa ka hare _reboot.scss, 'me mefuta e fapaneng ea lefats'e e hlalosoa ka _variables.scss. Etsa bonnete ba hore u $font-size-basekene rem.

Lihlooho

Lihlooho tsohle tsa HTML, <h1>ho ea ho <h6>, li fumaneha.

Sehlooho	Mohlala
`<h1></h1>`	h1. Sehlooho sa Bootstrap
`<h2></h2>`	h2. Sehlooho sa Bootstrap
`<h3></h3>`	h3. Sehlooho sa Bootstrap
`<h4></h4>`	h4. Sehlooho sa Bootstrap
`<h5></h5>`	h5. Sehlooho sa Bootstrap
`<h6></h6>`	h6. Sehlooho sa 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>

.h1ka .h6litlelase le tsona lia fumaneha, hobane ha u batla ho bapisa mongolo oa mongolo oa sehlooho empa u sa khone ho sebelisa karolo ea HTML e amanang le eona.

h1. Sehlooho sa Bootstrap

h2. Sehlooho sa Bootstrap

h3. Sehlooho sa Bootstrap

h4. Sehlooho sa Bootstrap

h5. Sehlooho sa Bootstrap

h6. Sehlooho sa 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 iketsetsa lihlooho

Sebelisa litlelase tsa lisebelisoa tse kenyellelitsoeng ho etsa mongolo o monyane oa sehlooho ho tsoa ho Bootstrap 3.

Sehlooho sa ponts'o e majabajaba Ka mongolo oa bobeli o fifetseng

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

Hlahisa lihlooho

Lihlooho tsa lihlooho tse tloaelehileng li etselitsoe ho sebetsa hantle ka ho fetisisa nameng ea litaba tsa leqephe la hau. Ha u hloka sehlooho hore se hlahelle, nahana ka ho sebelisa sehlooho se bonts'itsoeng - setaele se seholoanyane, se nang le maikutlo a itseng.

Pontšo 1

Pontšo 2

Pontšo ea 3

Pontšo ea 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>

Ketapele

Etsa hore serapa se hlahelle ka ho eketsa .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Ke mollis, e seng commodo luctus.

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

Lintlha tsa mongolo tse ka har'a mela

Setaele bakeng sa lintlha tse tloaelehileng tsa inline HTML5.

U ka sebelisa letšoao la letšoao hototobatsamongolo.

~~Mola ona oa mongolo o reretsoe ho nkuoa e le mongolo o hlakotsoeng.~~

~~Mola ona oa mongolo o reretsoe ho nkuoa o se o sa nepahala.~~

Mola ona oa mongolo o reretsoe ho nkoa e le tlatsetso tokomaneng.

Mola ona oa mongolo o tla fana ka mokhoa o thaliloeng

Mola ona oa mongolo o reretsoe ho nkoa e le mongolo o motle.

Mola ona o ngotsoe joalo ka mongolo o motenya.

Mola ona o ngotsoe joalo ka mongolo o tšekaletseng.

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

.mark'me .smalllitlelase li fumaneha hape ho sebelisa mekhoa e ts'oanang <mark>le <small>ha u ntse u qoba litlamorao tse sa batleheng tsa semantic tseo li-tag li ka li tlisang.

Le hoja e sa bontšoa ka holimo, ikutloe u lokolohile ho sebelisa <b>le <i>ho HTML5. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng ha <i>boholo e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Lisebelisoa tsa mongolo

Fetola tatellano ea mongolo, fetola, setaele, boima le 'mala ka lisebelisoa tsa rona tsa mongolo le lisebelisoa tsa mebala .

Likgutsufatso

Ts'ebetsong e hlophisitsoeng ea HTML's <abbr>element bakeng sa khutsufatso le li-acronyms ho bonts'a mofuta o atolositsoeng ho hover. Likgutsufatso li na le mothalo oa kamehla 'me li fumana sekhechana sa thuso ho fana ka moelelo o eketsehileng mabapi le hover le ho basebelisi ba mahlale a thusang.

Eketsa .initialismho khutsufatso ea boholo ba fonte e nyane hanyane.

attr

HTML

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

Mantsoe a thibelang

Bakeng sa ho qotsa li-block tsa litaba tse tsoang mohloling o mong ka har'a tokomane ea hau. Qetella HTML<blockquote class="blockquote"> efe kapa efe joalo ka qotso.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

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

Ho reha mohloli

Kenya a <footer class="blockquote-footer">bakeng sa ho tseba mohloli. Qetella lebitso la mosebetsi oa mohloli ka <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli 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 tsamaisana

Sebelisa lisebelisoa tsa mongolo ha ho hlokahala ho fetola tekano ea blockquote ea hau.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli 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. Pokello e felletseng e na le palo e kholo.

Motho ea tummeng ho Mohloli 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>

Manane

Unstyled

Tlosa moeli oa kamehla list-stylele o ka ho le letšehali linthong tsa lenane (bana ba hona joale feela). Sena se sebetsa feela ho lenane la lintho tse fumanehang hanghang tsa bana , ho bolelang hore o tla hloka ho kenyelletsa sehlopha bakeng sa manane afe kapa afe a behiloeng.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem le massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Likokoana-hloko tsa Purus sodales
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit 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>

E mocheng

Tlosa likulo tsa lenane 'me u sebelise leseli marginle nang le motsoako oa lihlopha tse peli, .list-inlinele .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>

Tlhaloso ea lenane la tlhaloso

Lokisetsa mantsoe le litlhaloso ka mokhoa o otlolohileng ka ho sebelisa litlelase tse boletsoeng esale pele tsa sistimi ea rona (kapa metsoako ea semantic). Bakeng sa mantsoe a malelele, u ka khetha ho eketsa .text-truncatesehlopha ho fokotsa mongolo ka ellipsis.

Manane a tlhaloso

Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Lentsoe le khutsufalitsoeng le fokotsoe

Fusce dapibus, tellus ac cursus commodo, tor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Nesting

Lethathamo la litlhaloso tse fumanehang: 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>

typography e arabelang

Mothalo o arabelang o bolela ho phahamisa mongolo le likaroloana ka ho lokisa "rotso element" font-sizeka har'a letoto la lipotso tsa media. Bootstrap ha e u etsetse sena, empa ho bonolo ho e eketsa haeba u e hloka.

Mona ke mohlala oa eona ts'ebetsong. Khetha eng kapa eng eo font-sizeu e batlang le mecha ea litaba eo u e batlang.

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