Tlhaloso ea litlhaku

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

Leqepheng lena

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

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

html

<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

Pontšo 5

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

Lihlooho tsa ponts'o li lokisoa ka $display-font-sizes'mapa oa Sass le mefuta e 'meli, $display-font-weightle $display-line-height.

Lihlooho tsa ponts'o li ka tloaeleha ka mefuta e 'meli, $display-font-familyle $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;

Ketapele

Etsa hore serapa se hlahelle ka ho eketsa .lead.

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

html

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

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>

Hlokomela hore li-tag tseo li lokela ho sebelisoa molemong oa semantic:

e emela mongolo o tšoailoeng kapa o totobalitsoeng molemong oa ho ngolla kapa oa ho ngola.
e emela maikutlo a mahlakoreng le mongolo o monyane, joalo ka litokelo tsa molao le mongolo oa molao.
<s>e emela ntho e seng e sa sebetsa kapa e seng e sa nepahale.
e emetse nako ya mongolo o ka hara melawana o lokelang ho fetolelwa ka mokgwa o bontshang hore o na le tlhaloso eo e seng ya mongolo.

Haeba u batla ho ngola mongolo oa hau, u lokela ho sebelisa lihlopha tse latelang ho e-na le hoo:

.marke tla sebelisa mekhoa e tšoanang le ea .
.smalle tla sebelisa mekhoa e tšoanang le ea .
.text-decoration-underlinee tla sebelisa mekhoa e tšoanang le ea .
.text-decoration-line-throughe tla sebelisa mekhoa e tšoanang le ea <s>.

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

Lisebelisoa tsa mongolo

Fetola tatellano ea mongolo, phetoho, setaele, boima, bophahamo ba mohala, mokhabiso 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

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 <blockquote class="blockquote">HTML efe kapa efe joalo ka qotso.

Qotsulo e tsebahalang, e fuperoeng ke karolo ea blockquote.

html

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

Ho reha mohloli

Tlhaloso ea HTML e hloka hore tlhaloso ea blockquote e behoe ka ntle ho <blockquote>. Ha u fana ka tlhaloso, thatela ea hau <blockquote>ka a <figure>'me u sebelise a <figcaption>kapa a block level element (mohlala, ) le .blockquote-footersehlopha. Etsa bonnete ba hore o thatela lebitso la mosebetsi oa mohloli <cite>hape.

Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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 tsamaisana

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

Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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>

Qotsulo e tsebahalang, e fuperoeng ke karolo ea 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>

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.

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>

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.

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>

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.

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>

Bongata ba litlhaku tse arabelang

Ho Bootstrap 5, re nolofalelitse boholo ba lifonti tse arabelang ka mokhoa o ikhethileng, ho lumella mongolo ho hola ka tlhaho ho feta lisebelisoa le boholo ba sebaka sa pono. Sheba leqephe la RFS ho fumana hore na sena se sebetsa joang.

Sass

Lintho tse fapaneng

Lihlooho li na le mefuta e fapaneng ea boholo le sebaka.

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

Likarolo tse fapaneng tsa typography tse koahetsoeng mona le ho Reboot le tsona li na le mefuta e fapaneng.

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

Metsoako

Ha ho na metsoako e inehetseng bakeng sa typography, empa Bootstrap e sebelisa Responsive Font Sizing (RFS) .