Source

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 tinofungidzira iyo browser default midzi 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>( #fffnekusagadzika).

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 zvakare aripo, nekuti kana iwe uchida kufananidza font styling yemusoro 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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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 unoshandurwa 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 nema tag.

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

Chinja kurongeka kwemavara, shandura, chimiro, uremu, uye ruvara nezvinyorwa zvedu zvekushandisa 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

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

Kudoma kwakabva

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

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

Alignment

Shandisa zvinyorwa zvinoshandiswa sezvinodiwa kuti uchinje kurongeka kwe blockquote yako.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.

Mumwe ane mukurumbira muna Source 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. Integer posuere erat ante.

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

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis mu pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- 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>

Inline

Bvisa mabara erondedzero uye shandisa mwenje marginune musanganiswa wemakirasi maviri, .list-inlineuye .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>

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

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.

Izwi rakadimburirwa rakadimburwa

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

Nesting

Nested tsanangudzo list: 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>

Inopindura typography

Responsive typography inoreva kuyera zvinyorwa uye zvikamu nekungogadzirisa iyo mudzi element font-sizemukati meakatevedzana emibvunzo midhiya. Bootstrap haikuitire izvi, asi zviri nyore kuwedzera kana uchiida.

Heino muenzaniso wazvo mukuita. Sarudza chero font-sizes uye midhiya mibvunzo yaunoda.

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