Typography

Zvinyorwa uye mienzaniso yeBootstrap typography, inosanganisira zvigadziriso zvepasi rose, misoro, zvinyorwa zvemuviri, zvinyorwa, nezvimwe.

Global settings

Bootstrap inoseta kuratidzwa kwepasirese, kutaipa, uye mataira ekubatanidza. Kana kutonga kwakawanda kuchidikanwa, tarisa zvinyorwa zvekushandisa makirasi .

Shandisa yakasarudzika font stack inosarudza yakanakisa font-familykune yega yega OS uye mudziyo.
Kuti uwedzere kusanganisirwa uye kusvikika mhando chiyero, isu tinoshandisa browser's default root font-size(kazhinji 16px) kuitira kuti vashanyi vagone kugadzirisa yavo browser defaults sezvinodiwa.
Shandisa iyo $font-family-base, $font-size-base, uye $line-height-basehunhu seyedu typographic base inoshandiswa kune iyo <body>.
Seta iyo yepasi rose yekubatanidza ruvara kuburikidza $link-coloruye shandisa link underlines chete pa :hover.
Shandisa $body-bgkuseta a background-colorpane <body>( #fffnekusarudzika).

Aya masitayera anogona kuwanikwa mukati _reboot.scss, uye machinjiro epasi rose anotsanangurwa mu _variables.scss. Iva nechokwadi chekuisa $font-size-basemukati rem.

Misoro

Yese misoro yeHTML, <h1>kuburikidza ne <h6>, iripo.

Heading	Muenzaniso
`<h1></h1>`	h1. Bootstrap musoro
`<h2></h2>`	h2. Bootstrap musoro
`<h3></h3>`	h3. Bootstrap musoro
`<h4></h4>`	h4. Bootstrap musoro
`<h5></h5>`	h5. Bootstrap musoro
`<h6></h6>`	h6. Bootstrap musoro

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

.h1kuburikidza .h6nemakirasi anowanikwawo, nekuti kana iwe uchida kufananidza font yemusoro wenyaya asi usingakwanise kushandisa yakabatana HTML element.

h1. Bootstrap musoro

h2. Bootstrap musoro

h3. Bootstrap musoro

h4. Bootstrap musoro

h5. Bootstrap musoro

h6. Bootstrap musoro

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

Kugadzirisa misoro

Shandisa makirasi ekushandisa akasanganisirwa kugadzirazve diki diki musoro wemusoro kubva kuBootstrap 3.

Musoro wekuratidza mafancy Une mavara echipiri akadzima

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

Ratidza misoro

Zvinyorwa zvemusoro zvechinyakare zvakagadzirirwa kushanda zvakanyanya munyama yezvinyorwa zvepeji rako. Paunenge uchida musoro kuti uoneke, funga kushandisa musoro wekuratidza - muhombe, une maonero emusoro zvishoma. Ramba uchifunga kuti misoro iyi haipindure nekukasira, asi zvinogoneka kugonesa mafonti saizi anoteerera .

Ratidza 1

Ratidza 2

Ratidza 3

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

Tungamira

Ita kuti ndima ibude pachena nekuwedzera .lead.

Iyi indima inotungamira. Inomira pachena kubva mundima dzenguva dzose.

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

Inline zvinyorwa zvinyorwa

Kutaera kune zvakajairika inline HTML5 zvinhu.

Unogona kushandisa mamaki tag kuhighlighttext.

~~Mutsetse wemavara uyu unofanirwa kubatwa semavara akadzimwa.~~

~~Mutsara wechinyorwa uyu unoitirwa kuti utorerwe seusisina chokwadi.~~

Mutsara wechinyorwa uyu unofanirwa kubatwa sewedzero kugwaro.

Mutsara wemavara uyu unozopa sekunyorwa kwazvakaitwa

Mutsara wechinyorwa uyu unoitirwa kubatwa sechinyorwa chakanaka.

Mutsetse uyu wakashandurwa semavara matema.

Mutsetse uyu unoitwa semavara akatsveyamiswa.

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

.markuye .smallmakirasi anowanikwawo kuti ashandise zvitaera zvakafanana <mark>uye <small>uchidzivirira chero zvisingadiwe semantic zvinorehwa nematagi.

Kunyange zvisina kuratidzwa pamusoro, inzwa wakasununguka kushandisa <b>uye <i>muHTML5. <b>inoitirwa kuratidza mazwi kana mitsara pasina kuendesa kukosha kwekuwedzera asi <i>kazhinji iri yezwi, tekinoroji mazwi, nezvimwe.

Zvinyorwa zvekushandisa

Shandura kurongeka kwemavara, shandura, chimiro, uremu, uye ruvara nezvinyorwa zvedu zvinoshandiswa uye zvemavara zvinoshandiswa .

Madimburiko

Kuitwa kwakamisikidzwa kweHTML's <abbr>element yekupfupisa uye acronyms kuratidza yakawedzera vhezheni pane hover. Mapfupi ane default underline uye kuwana yekubatsira cursor yekupa mamwe mamiriro pane hover uye kune vashandisi veanobatsira matekinoroji.

Wedzera .initialismkuchidimbu chemavara madiki zvishoma.

attr

HTML

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

Blockquotes

Zvekutora zvivharo zvemukati kubva kune imwe sosi mukati megwaro rako. Putira <blockquote class="blockquote">kutenderedza chero HTML se quote.

Chirevo chinozivikanwa, chiri mu blockquote element.

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

Kudoma kwakabva

Wedzera a <footer class="blockquote-footer">yekuziva kwakabva. Peta zita rekwakabva basa mu <cite>.

Chirevo chinozivikanwa, chiri mu blockquote element.

Mumwe ane mukurumbira muna Source 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>

Alignment

Shandisa zvinyorwa zvinoshandiswa sezvinodiwa kuti uchinje kurongeka kwe blockquote yako.

Chirevo chinozivikanwa, chiri mu blockquote element.

Mumwe ane mukurumbira muna Source 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>

Chirevo chinozivikanwa, chiri mu blockquote element.

Mumwe ane mukurumbira muna Source 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>

Lists

Unstyled

Bvisa iyo yakasarudzika list-styleuye yekuruboshwe muganho pane rondedzero zvinhu (pakarepo vana chete). Izvi zvinongoshanda kune ipapo vana rondedzero zvinhu , zvichireva kuti iwe uchafanirwa kuwedzera kirasi kune chero rondedzero yakanyorwa zvakare.

Iri rondedzero.
Inoratidzika isina kunyorwa zvachose.
Nemaitiro, ichiri rondedzero.
Nekudaro, chimiro ichi chinoshanda chete kune izvo zvinokurumidza zvemwana zvinhu.
Nested lists:
- havana kukanganiswa nemaitiro aya
- icharamba ichiratidza bara
- uye uve neruboshwe rwakakodzera
Izvi zvinogona kunge zvichiri kubatsira mune mamwe mamiriro.

<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

Bvisa mabara erondedzero uye shandisa mwenje marginune musanganiswa wemakirasi maviri, .list-inlineuye .list-inline-item.

Ichi chinhu chakanyorwa.
Uye mumwe.
Asi anoratidzwa mukati memutsara.

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

Tsananguro rondedzero kurongeka

Gadzirisa mazwi uye tsananguro zvakachinjika nekushandisa grid system yedu yakafanotsanangurwa makirasi (kana semantic musanganiswa). Kwematemu marefu, unogona kusarudza kuwedzera .text-truncatekirasi kuderedza zvinyorwa ne ellipsis.

Tsanangudzo mazita

Rondedzero yerondedzero yakakwana pakutsanangura mazwi.

Term

Tsanangudzo yeshoko.

Uye mamwe mavara etsanangudzo yenzvimbo.

Imwe temu

Tsanangudzo iyi ipfupi, saka hapana mamwe ndima kana chero chinhu.

Izwi rakadimburirwa rakadimburwa

Izvi zvinogona kubatsira kana nzvimbo yakaoma. Inowedzera ellipsis kumagumo.

Nesting

Nested tsanangudzo list: Ndakanzwa iwe uchida tsanangudzo mazita. Rega ndiise rondedzero yerondedzero mukati merondedzero yako yerondedzero.

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

Anopindura masaizi efonti

Kubva pav4.3.0, ngarava dzeBootstrap dzine sarudzo yekugonesa saizi yefonti inopindura, ichibvumira mavara kuti akwire zvakajairika pamudziyo wese uye saizi yekutarisa. RFS inogona kugoneswa nekushandura iyo $enable-responsive-font-sizesSass kusiyanisa kune trueuye kudzorera Bootstrap.

Kutsigira RFS , isu tinoshandisa Sass musanganiswa kutsiva yedu yakajairika font-sizezvivakwa. Anopindura mafonti saizi anozounganidzwa kuita calc()mabasa ane musanganiswa remuye yekutarisa mayuniti kuti agone kuita inopindura kuyera maitiro. Zvakawanda nezve RFS uye kumisikidzwa kwayo inogona kuwanikwa pane yayo GitHub repository .