in English

Typografia

Dokumentácia a príklady typografie Bootstrap vrátane globálnych nastavení, nadpisov, hlavného textu, zoznamov a ďalších.

Na tejto stránke

Globálne nastavenia

Bootstrap nastavuje základné globálne štýly zobrazenia, typografie a odkazov. Ak je potrebná väčšia kontrola, pozrite si textové pomocné triedy .

Použite natívny zásobník písiem , ktorý vyberie to najlepšie font-familypre každý operačný systém a zariadenie.
Pre komplexnejšiu a dostupnejšiu škálu typov používame predvolený koreňový adresár prehliadača font-size(zvyčajne 16 pixelov), aby si návštevníci mohli prispôsobiť predvolené nastavenia prehliadača podľa potreby.
Použite atribúty $font-family-base, $font-size-basea $line-height-baseako náš typografický základ aplikovaný na <body>.
Nastavte globálnu farbu odkazu cez $link-color.
Použite $body-bgna nastavenie a background-colorna <body>( #fffpredvolene).

Tieto štýly možno nájsť v _reboot.scssa globálne premenné sú definované v _variables.scss. Uistite sa, že ste $font-size-basezadali rem.

Nadpisy

K dispozícii sú všetky nadpisy HTML <h1>až po <h6>.

Smerovanie	Príklad
`<h1></h1>`	h1. Bootstrap nadpis
`<h2></h2>`	h2. Bootstrap nadpis
`<h3></h3>`	h3. Bootstrap nadpis
`<h4></h4>`	h4. Bootstrap nadpis
`<h5></h5>`	h5. Bootstrap nadpis
`<h6></h6>`	h6. Bootstrap nadpis

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

.h1K dispozícii sú aj triedy through .h6, keď chcete prispôsobiť štýl písma nadpisu, ale nemôžete použiť súvisiaci prvok HTML.

h1. Bootstrap nadpis

h2. Bootstrap nadpis

h3. Bootstrap nadpis

h4. Bootstrap nadpis

h5. Bootstrap nadpis

h6. Bootstrap nadpis

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>

Prispôsobenie nadpisov

Použite zahrnuté pomocné triedy na opätovné vytvorenie malého sekundárneho textu nadpisu z Bootstrapu 3.

Efektný zobrazovaný nadpis S vyblednutým sekundárnym textom

html

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

Zobraziť nadpisy

Tradičné prvky nadpisov sú navrhnuté tak, aby čo najlepšie fungovali v obsahu vašej stránky. Ak potrebujete, aby nadpis vynikol, zvážte použitie zobrazovaného nadpisu — väčšieho, trochu viac názorového štýlu nadpisu.

Displej 1

Displej 2

Displej 3

Displej 4

Displej 5

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

Zobrazované nadpisy sa konfigurujú pomocou $display-font-sizesmapy Sass a dvoch premenných $display-font-weighta $display-line-height.

Zobrazované nadpisy je možné prispôsobiť pomocou dvoch premenných $display-font-familya $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;

Viesť

Nechajte odsek vyniknúť pridaním .lead.

Toto je úvodný odsek. Vyčnieva z bežných odsekov.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Vložené textové prvky

Štýl pre bežné vložené prvky HTML5.

Môžete použiť značku značkyZlatý klinectext.

~~Tento riadok textu sa má považovať za vymazaný text.~~

~~Tento riadok textu sa má považovať za už nepresný.~~

Tento riadok textu má byť považovaný za doplnok k dokumentu.

Tento riadok textu sa vykreslí ako podčiarknutý.

S týmto riadkom textu sa má zaobchádzať ako s drobným písmom.

Tento riadok sa vykreslí ako tučný text.

Tento riadok sa vykreslí ako text kurzívou.

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>

Upozorňujeme, že tieto značky by sa mali používať na sémantické účely:

predstavuje text, ktorý je označený alebo zvýraznený na účely odkazu alebo zápisu.
predstavuje vedľajšie komentáre a malé písmená, ako sú autorské práva a právny text.
<s>predstavuje prvok, ktorý už nie je relevantný alebo už nie je presný.
predstavuje rozsah vloženého textu, ktorý by mal byť vykreslený spôsobom, ktorý naznačuje, že obsahuje netextovú anotáciu.

Ak chcete upraviť štýl textu, mali by ste namiesto toho použiť nasledujúce triedy:

.markpoužije rovnaké štýly ako .
.smallpoužije rovnaké štýly ako .
.text-decoration-underlinepoužije rovnaké štýly ako .
.text-decoration-line-throughpoužije rovnaké štýly ako <s>.

Hoci to nie je zobrazené vyššie, pokojne použite a v HTML5. je určený na zvýraznenie slov alebo fráz bez vyjadrenia ďalšej dôležitosti, zatiaľ čo väčšinou ide o hlas, technické výrazy atď.

Textové pomôcky

Zmeňte zarovnanie textu, transformáciu, štýl, váhu, výšku riadku, dekoráciu a farbu pomocou našich textových a farebných pomôcok .

Skratky

Štylizovaná implementácia <abbr>prvku HTML pre skratky a akronymy na zobrazenie rozšírenej verzie pri umiestnení kurzora myši. Skratky majú predvolené podčiarknutie a získajú pomocný kurzor, ktorý poskytuje dodatočný kontext pri umiestnení kurzora myši a používateľom asistenčných technológií.

Pridajte .initialismskratku pre trochu menšiu veľkosť písma.

attr

HTML

html

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

Blokové úvodzovky

Na citovanie blokov obsahu z iného zdroja vo vašom dokumente. <blockquote class="blockquote">Ako citáciu obtočte ľubovoľný kód HTML.

Známy citát obsiahnutý v prvku blockquote.

html

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

Pomenovanie zdroja

Špecifikácia HTML vyžaduje, aby bolo priradenie blockquote umiestnené mimo <blockquote>. Pri poskytovaní priradenia zabaľte svoje <blockquote>do a <figure>a použite <figcaption>prvok na úrovni alebo blok (napr. ) s .blockquote-footertriedou. Nezabudnite zabaliť aj názov zdrojového diela <cite>.

Známy citát obsiahnutý v prvku blockquote.

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>

Zarovnanie

Podľa potreby použite textové nástroje na zmenu zarovnania vašej blokovej ponuky.

Známy citát obsiahnutý v prvku blockquote.

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>

Známy citát obsiahnutý v prvku blockquote.

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>

zoznamy

Neštýlové

Odstráňte predvolený list-stylea ľavý okraj na položkách zoznamu (iba okamžité deti). Týka sa to len položiek zoznamu okamžitých potomkov , čo znamená, že triedu budete musieť pridať aj pre všetky vnorené zoznamy.

Toto je zoznam.
Vyzerá úplne neštýlovo.
Štrukturálne je to stále zoznam.
Tento štýl sa však vzťahuje len na bezprostredné podradené prvky.
Vnorené zoznamy:
- nie sú ovplyvnené týmto štýlom
- stále ukáže guľku
- a mať primeraný ľavý okraj
V niektorých situáciách sa to môže hodiť.

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>

V rade

Odstráňte odrážky zoznamu a použite trochu svetla margins kombináciou dvoch tried .list-inlinea .list-inline-item.

Toto je položka zoznamu.
A ešte jeden.
Ale sú zobrazené inline.

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>

Zarovnanie zoznamu popisov

Zarovnajte pojmy a popisy vodorovne pomocou preddefinovaných tried nášho mriežkového systému (alebo sémantických mixov). Pre dlhšie výrazy môžete voliteľne pridať .text-truncatetriedu na skrátenie textu pomocou troch bodiek.

Popisné zoznamy

Zoznam popisov je ideálny na definovanie výrazov.

Termín

Definícia pojmu.

A ešte nejaký text definície zástupného symbolu.

Ďalší termín

Táto definícia je krátka, takže žiadne odseky navyše ani nič podobné.

Skrátený výraz je skrátený

To môže byť užitočné, keď je málo miesta. Na koniec pridá elipsu.

Hniezdenie

Vnorený zoznam definícií: Počul som, že máte radi zoznamy definícií. Dovoľte mi vložiť zoznam definícií do vášho zoznamu definícií.

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>

Responzívne veľkosti písma

V Bootstrap 5 sme predvolene povolili responzívne veľkosti písma, čo umožňuje prirodzenejšie škálovanie textu v rôznych veľkostiach zariadenia a výrezu. Pozrite sa na stránku RFS a zistite, ako to funguje.

Sass

Premenné

Nadpisy majú niekoľko vyhradených premenných na veľkosť a medzery.

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

Rôzne prvky typografie zahrnuté tu a v Reboote majú tiež vyhradené premenné.

$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

Neexistujú žiadne špeciálne mixy pre typografiu, ale Bootstrap používa Responsive Font Sizing (RFS) .