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) ulaný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ň. Bu sözbaşylaryň adaty ýagdaýda jogap bermeýändigini ýadyňyzdan çykarmaň, ýöne şrift ölçeglerine jogap bermek mümkin .

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.

Bu esasy abzas. Adaty abzaslardan tapawutlanýar.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.~~

Bu tekst setiri, resminama goşmaça hökmünde garamak üçin niýetlenendir.

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

Blokot elementinde bar bolan belli sitata.

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

Çeşmäni atlandyrmak

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

Blokot elementinde bar bolan belli sitata.

Çeşme ady bilen meşhur biri

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

Deňleşdirmek

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

Blokot elementinde bar bolan belli sitata.

Çeşme ady bilen meşhur biri

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

Blokot elementinde bar bolan belli sitata.

Çeşme ady bilen meşhur biri

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

Sanawlar

Düzedilmedik

Sanaw elementlerinde deslapky list-stylewe çep aralygy aýyryň (diňe çagalar). Bu diňe çagalaryň sanawy elementlerine degişlidir , ýagny haýsydyr bir höwürtgelenen sanawlar üçin synp goşmaly bolarsyňyz.

Bu sanaw.
Bu düýbünden tertipsiz görünýär.
Gurluş taýdan henizem sanaw.
Şeýle-de bolsa, bu stil diňe çaga elementlerine degişlidir.
Içerki sanawlar:
- bu stil bilen täsir etmeýär
- henizem ok görkezer
- we degişli çep aralygy bar
Käbir ýagdaýlarda bu henizem peýdaly bolup biler.

<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

Sanawyň oklaryny aýyryň we marginiki synpyň kombinasiýasy bilen biraz ýagtylyk ulanyň .list-inlinewe .list-inline-item.

Bu sanaw sanawy.
Başga biri.
Theyöne olar setirde görkezilýär.

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

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 terminleri kesgitlemek üçin ajaýyp.

Möhleti

Termin üçin kesgitleme

Moreene-de ýer eýesiniň kesgitleme teksti.

Başga bir termin

Bu kesgitleme gysga, şonuň üçin goşmaça abzas ýa-da başga zat ýok.

Kesilen adalga kesildi

Spaceer gysga bolsa bu peýdaly bolup biler. Soňunda ellips goşýar.

Höwürtge

Öýlenen kesgitleme sanawy: Kesgitleme sanawlaryny halaýandygyňyzy eşitdim. Kesgitleme sanawyňyzyň içinde kesgitleme sanawyny goýaýyn.

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

Şrift ölçegleri

V4.3.0-a görä, “Bootstrap” şriftiň ululyklaryny açmak we tekstiň enjam we görnüş ölçegleri boýunça has tebigy ulalmagyna mümkinçilik berýän opsiýa iberýär. Sass üýtgeýjisini Bootstrap -a üýtgetmek we täzeden düzmek arkaly RFS açyp bolýar.$enable-responsive-font-sizestrue

RFS -ni goldamak üçin adaty font-sizehäsiýetlerimizi çalyşmak üçin Sass garyndysyny ulanýarys . Jogap beriji şrift ululyklary , täsirli ulalmak häsiýetini üpjün etmek calc()üçin garyşyk we görnüş bölümleriniň garyndysy bilen funksiýalara jemlener . RFS we konfigurasiýasy rembarada has giňişleýin maglumaty GitHub ammarynda tapyp bilersiňiz .