Tipografiýa

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

Bu sahypada

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

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>

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

html

<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

Ekran 5

6-njy 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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

$display-font-sizesEkranyň sözbaşylary Sass kartasy we iki üýtgeýji arkaly düzülendir $display-font-weightwe $display-line-height.

Ekranyň sözbaşylary iki üýtgeýjiniň üsti bilen düzülip bilner $display-font-familywe $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;

Gurşun

Goşmak bilen abzasy tapawutlandyryň .lead.

Bu esasy abzas. Adaty abzaslardan tapawutlanýar.

html

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

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>

Şol bellikleriň semantik maksat bilen ulanylmalydygyna üns beriň:

salgylanma ýa-da bellik maksatlary üçin bellenen ýa-da tapawutlandyrylan teksti aňladýar.
awtorlyk hukugy we kanuny tekst ýaly gapdal teswirleri we kiçi çapy aňladýar.
<s>indi degişli däl ýa-da indi takyk däl elementi aňladýar.
teksti bolmadyk düşündirişiň bardygyny görkezýän görnüşde berilmeli içerki tekstiň aralygyny görkezýär.

Tekstiňizi düzmek isleseňiz, ýerine aşakdaky sapaklary ulanmaly:

.markýaly stilleri ulanar .
.smallýaly stilleri ulanar .
.text-decoration-underlineýaly stilleri ulanar .
.text-decoration-line-throughýaly stilleri ulanar <s>.

Aboveokarda görkezilmese- de , HTML5- de ulanmaga arkaýyn boluň. goşmaça ses bermezden sözleri ýa-da sözlemleri tapawutlandyrmak üçin niýetlenendir, şol bir wagtyň özünde ses, tehniki adalgalar we ş.m.

Tekst hyzmatlary

Tekst enjamlarymyz we reňk kömekçi enjamlarymyz bilen tekstiň deňleşdirilmegini, görnüşini, stilini, agramyny, setir beýikligini, bezegini 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

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 <blockquote class="blockquote">hökmünde islendik HTML-i gurşap alyň.

Blokot elementinde bar bolan belli sitata.

html

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

Çeşmäni atlandyrmak

HTML spesifikasiýasy bloknot aýratynlyklarynyň daşynda goýulmagyny talap edýär <blockquote>. Aýratynlyk berlende, synpyňyzy örtüň <blockquote>we <figure>synp bilen <figcaption>blok ýa-da blok derejeli elementi ulanyň (meselem ) .blockquote-footer. Çeşme işiniň adyny hem gaplaň <cite>.

Blokot elementinde bar bolan belli sitata.

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>

Deňleşdirmek

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

Blokot elementinde bar bolan belli sitata.

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>

Blokot elementinde bar bolan belli sitata.

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>

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.

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

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.

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>

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.

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>

Şrift ölçegleri

“Bootstrap 5” -de, tekstiň enjam we görnüş ölçegleri boýunça has tebigy ulalmagyna mümkinçilik berýän şrift ululyklaryny açdyk. Munuň nähili işleýändigini bilmek üçin RFS sahypasyna göz aýlaň .

Sass

Üýtgeýjiler

Ingsazgylarda ululyk we aralyk üçin käbir aýratyn üýtgeýjiler bar.

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

Bu ýerde we Reboot -da görkezilen dürli tipografiýa elementleri hem aýratyn üýtgeýjilere eýe.

$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

Tipografiýa üçin ýörite garyndylar ýok, ýöne Bootstrap “ Responsive Font Sizing” (RFS) ulanýar .