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 mefuta e mengata e kenyeletsang le e fumanehang, re sebelisa motso oa kamehla oa font-sizesebatli (ka tloaelo 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. Hopola hore lihlooho tsena ha li arabele ka mokhoa o ikhethileng, empa hoa khoneha ho etsa hore boholo ba fonte bo arabele .

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.

Ena ke serapa sa pele. E hlahella lirapeng tse tloaelehileng.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

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

Ho reha mohloli

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

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

Motho ea tummeng ho Mohloli Title

<blockquote class="blockquote">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

Motho ea tummeng ho Mohloli Title

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

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

Motho ea tummeng ho Mohloli Title

<blockquote class="blockquote text-right">
  <p class="mb-0">A well-known quote, contained in a blockquote element.</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.

Lena ke lethathamo.
E bonahala e sa ngoloa ka mokhoa o felletseng.
Ka sebopeho, e ntse e le lethathamo.
Leha ho le joalo, mokhoa ona o sebetsa feela ho likarolo tsa hang-hang tsa bana.
Mathathamo a behiloeng:
- ha ba amehe ka mokhoa ona
- e ntse e tla hlahisa kulo
- 'me u be le moeli o nepahetseng oa leqele
Sena se ntse se ka thusa maemong a mang.

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

E mocheng

Tlosa likulo tsa lenane 'me u sebelise leseli marginle nang le motsoako oa lihlopha tse peli, .list-inlinele .list-inline-item.

Ena ke lethathamo la lintlha.
Le e 'ngoe.
Empa li hlahisoa ka har'a naha.

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

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.

Nako

Tlhaloso ea lentsoe.

Le mongolo o mong oa tlhaloso ea setšoantšisi.

Lereho le leng

Tlhaloso ena e khuts'oane, kahoo ha ho lirapa tse eketsehileng kapa eng kapa eng.

Lentsoe le khutsufalitsoeng le fokotsoe

Sena se ka ba molemo ha sebaka se le thata. E eketsa ellipsis qetellong.

Nesting

Lethathamo la litlhaloso tse fumanehang: Ke utloile u rata manane a litlhaloso. E-re ke behe lethathamo la litlhaloso ka har'a lethathamo la litlhaloso tsa hau.

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

Bongata ba litlhaku tse arabelang

Ho tloha ka v4.3.0, likepe tsa Bootstrap tse nang le khetho ea ho etsa hore boholo ba fonte bo arabele, bo lumellang mongolo hore o fetele ka tlhaho ho feta lisebelisoa le boholo ba pono. RFS e ka nolofalloa ka ho fetola mofuta oa $enable-responsive-font-sizesSass truele ho khutlisa Bootstrap.

Ho tšehetsa RFS , re sebelisa motsoako oa Sass ho nkela font-sizethepa ea rona e tloaelehileng sebaka. Bophahamo ba mengolo e arabelang bo tla hlophisoa hore e be calc()lits'ebetso tse kopantsoeng remle likarolo tsa pono ho etsa hore boitšoaro bo arabele. Tse ling mabapi le RFS le tlhophiso ea eona li ka fumanoa polokelong ea eona ea GitHub .