Tipografiýa

“Bootstrap” tipografiýasy üçin resminamalar we mysallar, global sazlamalar, sözbaşylar, beden teksti, sanawlar we ş.m.

Global sazlamalar

“Bootstrap” esasy global displeýi, tipografiýany we baglanyşyk stillerini düzýär. Has köp gözegçilik gerek bolanda, tekst peýdaly sapaklaryny gözden geçiriň .

Her OS we enjam üçin iň gowusyny saýlaýan ýerli şrift ýygyndysyny ulanyň .font-family
Has öz içine alyjy we elýeterli görnüş masştaby üçin, brauzeriň deslapky köküni font-size(adatça 16px) göz öňünde tutýarys, şonuň üçin gelýänler öz brauzeriniň defoltlaryny zerur bolanda sazlap bilerler.
Ulanylýan tipografiki bazamyz ýaly $font-family-base, $font-size-basewe atributlary ulanyň .$line-height-base<body>
Global baglanyşyk reňkini düzüň $link-colorwe diňe baglanyşyk çyzyklaryny ulanyň :hover.
( Dymmaklyk boýunça) sazlamak $body-bgüçin ulanyň .background-color<body>#fff

Bu stilleri içerde tapyp bolýar _reboot.scsswe global üýtgeýjiler kesgitlenýär _variables.scss. Gurnamaň . $font-size-base_rem

Ingsazgylar

<h1>HTMLhli HTML sözbaşylary <h6>elýeterlidir.

Sözbaşy	Mysal
`<h1></h1>`	h1. Bootstrap sözbaşy
`<h2></h2>`	h2. Bootstrap sözbaşy
`<h3></h3>`	h3. Bootstrap sözbaşy
`<h4></h4>`	h4. Bootstrap sözbaşy
`<h5></h5>`	h5. Bootstrap sözbaşy
`<h6></h6>`	h6. Bootstrap sözbaşy

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

.h1sapaklaryň üsti .h6bilen hem elýeterlidir, sebäbi sözbaşynyň şrift görnüşine laýyk gelmek isleseňiz, ýöne baglanyşykly HTML elementini ulanyp bilmersiňiz.

h1. Bootstrap sözbaşy

h2. Bootstrap sözbaşy

h3. Bootstrap sözbaşy

h4. Bootstrap sözbaşy

h5. Bootstrap sözbaşy

h6. Bootstrap sözbaşy

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

Sözbaşylary düzmek

Bootstrap 3-den kiçi orta sözbaşy tekstini döretmek üçin goşulan peýdaly sapaklary ulanyň.

Ajaýyp displeý sözbaşy solup giden ikinji tekst bilen

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

Sözbaşylary görkeziň

Adaty sözbaşy elementleri sahypaňyzyň mazmunynda iň oňat işlemek üçin döredildi. Üýtgeşik bir sözbaşy gerek bolsa, has uly, birneme pikirlenýän sözbaşy stilini görkezmegi göz öňünde tutuň.

Ekran 1

2-nji görkez

3-nji görkez

4-nji görkez

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

Gurşun

Goşmak bilen abzasy tapawutlandyryň .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auktor. Duis mollis, haryt däl luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</p>

Tekst elementleri

Adaty HTML5 elementleri üçin stil.

Bellik belligini ulanyp bilersiňizbellemektekst.

~~Tekstiň bu setiri öçürilen tekst hökmünde garalýar.~~

~~Bu tekst setiri indi takyk däl diýlip hasaplanýar.~~

Tekstiň bu setiri resminama goşmaça hökmünde garalýar.

Tekstiň bu setiri aşagyndaky ýaly görkeziler

Tekstiň bu setirine gowy çap edilmegi göz öňünde tutulýar.

Bu setir goýy tekst hökmünde görkezilýär.

Bu setir çyzylan tekst hökmünde görkezilýär.

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

.markŞeýle hem , bellikleriň getirjek islenilmeýän semantik täsirlerinden gaça durmak bilen .smallbirmeňzeş stilleri ulanmak üçin sapaklar hem bar .<mark><small>

<b>Aboveokarda görkezilmese- de <i>, HTML5- de ulanmaga arkaýyn boluň. esasan ses, tehniki adalgalar we ş.m. üçin <b>goşmaça ähmiýet bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir .<i>

Tekst hyzmatlary

Tekst enjamlarymyz we reňk hyzmatlarymyz bilen tekstiň deňleşdirilmegini, görnüşini, stilini, agramyny we reňkini üýtgediň .

Gysgaltmalar

<abbr>Giňeldilen wersiýany görkezmek üçin gysgaltmalar we gysgaltmalar üçin HTML elementiniň stilleşdirilen ýerine ýetirilişi . Gysgaltmalar deslapky çyzgy bolup, gezelençde we kömekçi tehnologiýalary ulanyjylarda goşmaça kontekst bermek üçin kömek kursory alýar.

.initialismBirneme kiçi şrift ululygy üçin gysgaltma goşuň .

attr

HTML

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

Bloknotlar

Resminamanyňyzdaky başga bir çeşmeden mazmun böleklerini sitata etmek üçin. Sitata hökmünde <blockquote class="blockquote">islendik HTML -i gurşap alyň.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

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

Çeşmäni atlandyrmak

<footer class="blockquote-footer">Çeşmesini kesgitlemek üçin a goşuň . Çeşmäniň adyny ýazyň <cite>.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

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

Deňleşdirmek

Bloknotyňyzyň deňleşmesini üýtgetmek üçin zerur bolan tekst hyzmatlaryny ulanyň.

“Lorem ipsum dolor” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

<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” oturýar. Bitewi posuere garynja.

Çeşme ady bilen meşhur biri

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

Sanawlar

Düzedilmedik

Sanaw elementlerinde deslapky list-stylewe çep aralygy aýyryň (diňe çagalar). Bu diňe çagalaryň sanawy elementlerine degişlidir , ýagny islendik öýlenen sanawlar üçin synpy goşmaly bolarsyňyz.

Lorem ipsum dolor amet otur
Consectetur adipiscing elit
Massa-da bitewi molestie lorem
Pretium nisl aliketinde ýeňilleşdirme
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Ene oturylyşygy
Porttitor loremini alyň

<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

Sanawyň oklaryny aýyryň we marginiki synpyň kombinasiýasy bilen biraz ýagtylyk ulanyň .list-inlinewe .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>

Düşündiriş sanawynyň deňleşdirilmegi

Tor ulgamymyzyň öňünden kesgitlenen synplaryny (ýa-da semantik garyndylary) ulanyp, terminleri we düşündirişleri keseligine deňleşdiriň. .text-truncateHas uzyn sözler üçin teksti ellips bilen kesmek üçin islege görä synp goşup bilersiňiz .

Düşündiriş sanawlary

Düşündiriş sanawy adalgalary kesgitlemek üçin ajaýyp.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit metus-da mi porta gravida.

Malesuada porta

Etiam porta sem maleuada magna mollis euismod.

Kesilen adalga kesildi

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

Höwürtge

Öýlenen kesgitleme sanawy: Ene posuere, gynamaçy sed cursus feugiat, monah augue blandit monah.

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

Jogapkär tipografiýa

Jogapkärçilikli tipografiýafont-size , köpçülikleýin habar beriş soraglarynyň çäginde kök elementini düzeltmek arkaly teksti we komponentleri ulaltmagy aňladýar . “Bootstrap” muny siziň üçin etmeýär, ýöne gerek bolsa goşmak gaty aňsat.

Ine, iş ýüzünde muňa mysal. Islän zadyňyzy font-sizewe media soraglaryňyzy saýlaň.

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