Ku thayipa

Matsalwa na swikombiso swa thayipografi ya Bootstrap, ku katsa na swiletelo swa misava hinkwayo, tinhlokomhaka, tsalwa ra miri, minxaxamelo, na swin’wana.

Eka tluka leri

Swiyimiso swa misava hinkwayo

Bootstrap yi veka nkombiso wa masungulo wa misava hinkwayo, thayipografi, na switayele swa vuhlanganisi. Loko ku laveka vulawuri lebyi engetelekeke, languta titlilasi ta vukorhokeri bya matsalwa .

Tirhisa xithaki xa fonto ya ntumbuluko lexi hlawulaka leswinene font-familyeka OS yin’wana ni yin’wana ni xitirhisiwa.
Ku kuma xikalo xa muxaka lexi katsaka hinkwavo ni lexi fikelelaka, hi tirhisa rimitsu ra xiviri ra xihlamusela-marito font-size(hi ntolovelo i 16px) leswaku vaendzi va ta kota ku cinca swilo swa vona swa xihlamusela-marito tanihilaha swi lavekaka hakona.
Tirhisa swihlawulekisi swa $font-family-base, $font-size-base, na $line-height-basetanihi xisekelo xa hina xa ku thayipa lexi tirhisiweke eka <body>.
Seta muvala wa xihlanganisi xa misava hinkwayo hi ku tirhisa $link-color.
Tirhisa $body-bgku veka a background-coloreka <body>( #fffhi ku tiyimisela).

Switayili leswi swi nga kumeka endzeni ka _reboot.scss, naswona swilo leswi cinca-cincaka swa misava hinkwayo swi hlamuseriwile eka _variables.scss. Tiyiseka leswaku u $font-size-basenghena eka rem.

Tinhloko-mhaka

Tinhlokomhaka hinkwato ta HTML, <h1>ku ya eka <h6>, ta kumeka.

Nhlokomhaka	Xikombiso
`<h1></h1>`	h1. Nhlokomhaka ya bootstrap
`<h2></h2>`	h2. Nhlokomhaka ya bootstrap
`<h3></h3>`	h3. Nhlokomhaka ya bootstrap
`<h4></h4>`	h4. Nhlokomhaka ya bootstrap
`<h5></h5>`	h5. Nhlokomhaka ya bootstrap
`<h6></h6>`	h6. Nhlokomhaka ya 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>

.h1hi ku tirhisa .h6titlilasi na tona ta kumeka, ta loko u lava ku fambisana na xitayili xa fonto ya nhlokomhaka kambe u nga swi koti ku tirhisa elemente ya HTML leyi fambelanaka na yona.

h1. Nhlokomhaka ya bootstrap

h2. Nhlokomhaka ya bootstrap

h3. Nhlokomhaka ya bootstrap

h4. Nhlokomhaka ya bootstrap

h5. Nhlokomhaka ya bootstrap

h6. Nhlokomhaka ya 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>

Ku endla leswaku tinhloko-mhaka ti va leti u ti lavaka

Tirhisa titlilasi ta vukorhokeri leti katsiweke ku tumbuluxa nakambe tsalwa leritsongo ra nhlokomhaka ya vumbirhi ku suka eka Bootstrap 3.

Nhlokomhaka ya nkombiso wo fanekisela Na tsalwa ra vumbirhi leri nga nyamalala

html

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

Kombisa tinhloko-mhaka

Swiaki swa nhlokomhaka ya ndhavuko swi endleriwe ku tirha kahle eka nyama ya nhundzu ya pheji ya wena. Loko u lava nhloko-mhaka leswaku yi humelela, anakanya hi ku tirhisa nhloko-mhaka leyi kombisaka —xitayili lexikulu xa nhloko-mhaka lexi nga ni mavonelonyana.

Nkombiso 1.1

Xikombiso xa 2

Xikombiso xa 3

Xikombiso xa 4

Xikombiso xa 5

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

Tinhlokomhaka ta nkombiso ti lulamisiwile hi ku tirhisa $display-font-sizesmepe wa Sass na swilo swimbirhi leswi cinca-cincaka, $display-font-weightna $display-line-height.

Tinhloko-mhaka ta nkombiso ti nga cinciwa hi ku tirhisa swilo swimbirhi leswi cinca-cincaka, $display-font-familyna $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;

Rhangela

Endla leswaku ndzimana yi va leyi hambaneke hi ku engetela .lead.

Leyi i ndzimana leyi rhangelaka. Yi hambanile ni tindzimana ta nkarhi na nkarhi.

html

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

Swiaki swa tsalwa ra le ndzeni ka layini

Ku endla switayili swa swiaki swa HTML5 leswi tolovelekeke swa le ndzeni ka layini.

U nga tirhisa thegi ya mfungho kuswa nkokatsalwa.

~~Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi tsalwa leri susiweke.~~

~~Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi leyi nga ha riki ntiyiso.~~

Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi ku engeteriwa eka tsalwa.

Layini leyi ya tsalwa yi ta hundzuluxela tanihi laha yi thaleriweke ha kona.

Layini leyi ya tsalwa yi endleriwe ku tekiwa tanihi matsalelo lamanene.

Layini leyi yi hundzuluxeriwe tanihi tsalwa ro dzwihala.

Layini leyi yi hundzuluxeriwe tanihi tsalwa leri tsariweke hi ku olova.

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>

Tivonele leswaku tithegi teto ti fanele ku tirhisiwa hi xikongomelo xa nhlamuselo:

yi yimela tsalwa leri funghiweke kumbe ku kombisiwa hi xikongomelo xo kongomisa kumbe ku tsala tinotsi.
yi yimela mavonelo ya le tlhelo na matsalwa lamatsongo, ku fana na mfanelo ya vutshila na tsalwa ra nawu.
<s>yi yimela elemente leyi nga ha riki ya nkoka kumbe leyi nga ha riki ntiyiso.
yi yimela span ya tsalwa ra le ndzeni ka layini leri faneleke ku hundzuluxeriwa hi ndlela leyi kombisaka leswaku ri na nhlamuselo leyi nga riki ya tsalwa.

Loko u lava ku endla xitayili xa tsalwa ra wena, u fanele u tirhisa titlilasi leti landzelaka ematshan’weni ya sweswo:

.markyi ta tirhisa switayele leswi fanaka ni swa .
.smallyi ta tirhisa switayele leswi fanaka ni swa .
.text-decoration-underlineyi ta tirhisa switayele leswi fanaka ni swa .
.text-decoration-line-throughyi ta tirhisa switayele leswi fanaka ni swa <s>.

Hambileswi swi nga kombisiwangiki laha henhla, titwe u ntshunxekile ku tirhisa ni hi HTML5. yi endleriwe ku kombisa marito kumbe swivulwa handle ko hundzisela nkoka lowu engetelekeke, kasi ngopfungopfu i ya rito, marito ya xithekiniki, na swin’wana.

Switirhisiwa swa matsalwa

Cinca ku ringanisa ka matsalwa, ku hundzula, xitayili, ntiko, ku tlakuka ka layini, ku khavisa na muvala hi switirhisiwa swa hina swa matsalwa na switirhisiwa swa mihlovo .

Swipfuxeto

Ku tirhisiwa ka xitayili ka <abbr>elemente ya HTML ya swipfuxeto na swihlamusela-marito ku kombisa vuhundzuluxeri lebyi andlariweke eka hover. Swipfuxeto swi na ku thalela ehansi ka xiviri naswona swi kuma xikombiso xa mpfuneto ku nyika mongo wo engetela eka hover na le ka vatirhisi va thekinoloji yo pfuneta.

Engetela .initialismeka xifunengeto xa font-size leyitsongonyana.

attr

HTML

html

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

Switlhokovetselo swa swibokisana

Ku tshaha swibokisana swa nhundzu ku suka eka xihlovo xin’wana endzeni ka tsalwa ra wena. Pfuxeta <blockquote class="blockquote">HTML yihi na yihi tanihi xitlhokovetselo.

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya blockquote.

html

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

Ku thya xihlovo vito

HTML spec yi lava leswaku xihlawulekisi xa blockquote xi vekiwa ehandle ka <blockquote>. Loko u nyika attribution, phutsela ya wena <blockquote>eka a <figure>ivi u tirhisa a <figcaption>kumbe elemente ya levele ya block (xikombiso, ) na .blockquote-footertlilasi. Tiyisisa leswaku u phutsela vito ra ntirho wa xihlovo na rona <cite>.

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya 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>

Ku ringanisa

Tirhisa switirhisiwa swa matsalwa tanihilaha swi lavekaka hakona ku cinca ku ringanana ka blockquote ya wena.

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya 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>

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya 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>

Minxaxamelo ya swilo

Ku nga ri na xitayili

Susa list-stylemargin ya ntolovelo na ya ximatsi eka swilo swa nxaxamelo (vana va xihatla ntsena). Leswi swi tirha ntsena eka swilo swa nxaxamelo wa vana va xihatla , leswi vulaka leswaku u ta lava ku engetela tlilasi ya minxaxamelo yihi na yihi leyi pfanganisiweke na yona.

Lowu i nxaxamelo.
Yi vonaka yi nga ri na xitayili hi ku helela.
Hi xivumbeko, ya ha ri nxaxamelo.
Kambe xitayili lexi xi tirha ntsena eka swiaki swa n’wana swa xihatla.
Minxaxamelo leyi pfanganisiweke:
- a va khumbeki hi xitayili lexi
- ta ha ta kombisa xibamu
- naswona va na margin ya ximatsi leyi faneleke
Leswi swi nga ha pfuna eka swiyimo swin’wana.

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>

Inline

Susa swibalesa swa nxaxamelo ivi u tirhisa ku vonakala ko karhi marginhi ku hlanganisiwa ka titlilasi timbirhi, .list-inlinenaswona .list-inline-item.

Lexi i nchumu wa nxaxamelo.
Naswona yin’wana.
Kambe ti kombisiwa eka layini.

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>

Nhlamuselo ya nxaxamelo wa ku ringanisiwa

Hlanganisa marito na tinhlamuselo hi ndlela yo rhendzeleka hi ku tirhisa titlilasi leti hlamuseriweke ka ha ri emahlweni ta sisiteme ya hina ya giridi (kumbe mixins ya semantiki). Eka nkarhi wo leha, u nga engetela .text-truncatetlilasi hi ku hlawula ku tsema tsalwa hi ellipsis.

Minxaxamelo ya tinhlamuselo

Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.

Thema

Nhlamuselo ya rito leri.

Na swin’wana swa tsalwa ra nhlamuselo ya xikhomela-ndhawu.

Rito rin’wana

Nhlamuselo leyi yi komile, hikwalaho ku hava tindzimana leti engetelekeke kumbe nchumu wun’wana.

Rito leri tsemiweke ri tsemiwile

Leswi swi nga pfuna loko ndhawu yi tele. Ku engetela ellipsis emakumu.

Ku endla swisaka

Nxaxamelo wa nhlamuselo leyi pfanganisiweke: Ndzi ku twile u tsakela minxaxamelo ya tinhlamuselo. Ndzi ta veka nxaxamelo wa tinhlamuselo endzeni ka nxaxamelo wa wena wa tinhlamuselo.

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>

Tisayizi ta tifonto leti hlamulaka

Eka Bootstrap 5, hi endle leswaku tisayizi ta fonto leti hlamulaka ti tirha hi ku tiyimisela, hi pfumelela tsalwa ku ringanisa hi ntumbuluko swinene eka vukulu bya xitirhisiwa na bya viewport. Languta eka tluka ra RFS ku kuma leswaku leswi swi tirha njhani.

Sass

Swilo leswi cinca-cincaka

Tinhlokomhaka ti na swin’wana leswi cinca-cincaka leswi tinyiketeleke swa ku pima mpimo na ku hambana.

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

Swiaki swo hambana swa thayipo leswi katsiweke laha na le ka Reboot na swona swi na swilo leswi cinca-cincaka leswi tinyiketeleke.

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

Ti- mixins

A ku na ti- mixin leti tinyiketeleke ta ku thayipa, kambe Bootstrap yi tirhisa Responsive Font Sizing (RFS) .