Svetuka kune chikuru content Svetuka kuenda kudocs navigation
Check
in English

Typography

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

Pa peji ino

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 global link color kuburikidza ne $link-color.
  • Shandisa $body-bgkuseta a background-colorpane <body>( #fffnekusarudzika).

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

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>

Kugadzirisa misoro

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

Musoro wekuratidza mafancy Une mavara echipiri akadzima

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

Ratidza misoro

Chinyakare musoro zvinhu zvakagadzirirwa kuti zvishande zvakanyanya munyama yezvinyorwa zvepeji rako. Paunenge uchida musoro kuti utaridzike, funga kushandisa musoro wekuratidzira - muhombe, une maonero emusoro zvishoma.

Ratidza 1
Ratidza 2
Ratidza 3
Ratidza 4
Ratidza 5
Ratidza 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>

Misoro yekuratidzira inogadziriswa kuburikidza $display-font-sizesnemepu yeSass uye maviri akasiyana, $display-font-weightuye $display-line-height.

Misoro yekuratidzira inogoneka kuburikidza nemhando mbiri, $display-font-familyuye $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;

Tungamira

Ita kuti ndima ibude pachena nekuwedzera .lead.

Iyi indima inotungamira. Inomira pachena kubva mundima dzenguva dzose.

html 
<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 kuti ubatwe seakadhinda zvakanaka.

Mutsetse uyu wakashandurwa semavara matema.

Mutsetse uyu unoshandurwa semavara akatsveyamiswa.

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>

Chenjerera kuti iwo ma tag anofanirwa kushandiswa semantic chinangwa:

  • <mark>inomiririra chinyorwa chakamakwa kana kujekeswa sezvinangwa kana zvibodzwa.
  • <small>inomiririra mativi-tsanangudzo uye zvinyorwa zvidiki, sekodzero uye zvinyorwa zvepamutemo.
  • <s>inomiririra chinhu chisisakoshese kana chisisakodzeri.
  • <u>inomiririra kureba kwemavara ari mukati memutsara anofanira kupihwa nenzira inoratidza kuti ane chirevo chisiri chezvinyorwa.

Kana iwe uchida kunyora mavara ako, iwe unofanirwa kushandisa anotevera makirasi pachinzvimbo:

  • .markichashandisa zvitayera zvakafanana ne <mark>.
  • .smallichashandisa zvitayera zvakafanana ne <small>.
  • .text-decoration-underlineichashandisa zvitayera zvakafanana ne <u>.
  • .text-decoration-line-throughichashandisa zvitayera zvakafanana ne <s>.

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

Zvinyorwa zvekushandisa

Shandura kurongeka kwemavara, shandura, chimiro, uremu, mutsara-kureba, kushongedzwa uye ruvara nezvishandiso zvedu zvemavara uye mavara ekushandisa .

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

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.

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

Kudoma kwakabva

Iyo HTML spec inoda kuti blockquote attribution iiswe kunze kwe <blockquote>. Paunenge uchipa chirevo, peta yako <blockquote>mu a <figure>uye shandisa a <figcaption>kana block level element (semuenzaniso, <p>) .blockquote-footernekirasi. Iva nechokwadi chekuputira zita rekwakabva basa mukati <cite>zvakare.

Chirevo chinozivikanwa, chiri mu blockquote element.

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

Alignment

Shandisa zvinyorwa zvinoshandiswa sezvinodiwa kuti uchinje kurongeka kwe blockquote yako.

Chirevo chinozivikanwa, chiri mu blockquote element.

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

Chirevo chinozivikanwa, chiri mu blockquote element.

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

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

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

  • Ichi chinhu chakanyorwa.
  • Uye mumwe.
  • Asi anoratidzwa mukati memutsara.
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>

Tsananguro rondedzero kurongeka

Gadzirisa mazwi uye tsananguro zvakachinjika nekushandisa grid system yedu yakafanotsanangurwa makirasi (kana semantic musanganiswa). Kwematemu marefu, unogona kuwedzera .text-truncatekirasi kuti uderedze 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.
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>

Anopindura masaizi efonti

MuBootstrap 5, takagonesa saizi yefonti inopindura nekumisikidza, zvichibvumira mavara kuti awedzere zvakajairwa pane mudziyo uye saizi yekuona. Tarisa pane iyo RFS peji kuti uone kuti izvi zvinoshanda sei.

Sass

Variables

Misoro ine zvimwe zvakatsaurirwa zvakasiyana-siyana zvehukuru uye nzvimbo.

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

Miscellaneous typography zvinhu zvakafukidzwa pano uye muReboot zvakare zvine zvakatsaurwa zvakasiyana.

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

Mixins

Iko hakuna masanganiswa akazvitsaurira ekunyora, asi Bootstrap inoshandisa Inopindura Font Sizing (RFS) .