Typografie

Dokumentace a příklady typografie Bootstrap, včetně globálních nastavení, nadpisů, hlavního textu, seznamů a dalších.

Globální nastavení

Bootstrap nastavuje základní globální styly zobrazení, typografie a odkazů. Když je potřeba větší kontrola, podívejte se na textové třídy obslužných programů .

Použijte nativní sadu písem, která vybere to nejlepší font-familypro každý operační systém a zařízení.
Pro obsáhlejší a dostupnější typové měřítko používáme výchozí kořenový adresář prohlížeče font-size(obvykle 16 pixelů), takže si návštěvníci mohou přizpůsobit výchozí nastavení prohlížeče podle potřeby.
Použijte atributy $font-family-base, $font-size-base, a $line-height-basejako náš typografický základ aplikovaný na <body>.
Nastavte globální barvu odkazu pomocí $link-colora použijte podtržení odkazu pouze na :hover.
Použijte $body-bgk nastavení a background-colorna <body>( #fffve výchozím nastavení).

Tyto styly lze nalézt v _reboot.scssa globální proměnné jsou definovány v _variables.scss. Ujistěte se, že jste $font-size-basezadali rem.

Nadpisy

K dispozici jsou všechny nadpisy HTML <h1>až po <h6>.

Nadpis	Pří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>

.h1Prostřednictvím .h6tříd jsou také k dispozici, když chcete přizpůsobit styl písma nadpisu, ale nemůžete použít přidružený prvek HTML.

h1. Bootstrap nadpis

h2. Bootstrap nadpis

h3. Bootstrap nadpis

h4. Bootstrap nadpis

h5. Bootstrap nadpis

h6. Bootstrap nadpis

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

Přizpůsobení nadpisů

Pomocí přiložených tříd obslužných programů znovu vytvořte malý text sekundárního nadpisu z Bootstrapu 3.

Efektní zobrazovaný nadpis S vybledlým sekundárním textem

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

Zobrazit nadpisy

Tradiční prvky nadpisu jsou navrženy tak, aby co nejlépe fungovaly v obsahu vaší stránky. Pokud potřebujete, aby nadpis vynikl, zvažte použití zobrazovaného nadpisu – většího, trochu názornějšího stylu nadpisu. Mějte na paměti, že tyto nadpisy ve výchozím nastavení nereagují, ale je možné povolit responzivní velikosti písma .

Displej 1

Displej 2

Displej 3

Displej 4

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

Vést

Nechte odstavec vyniknout přidáním .lead.

Toto je úvodní odstavec. Vyčnívá z běžných odstavců.

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

Vložené textové prvky

Styl pro běžné vložené prvky HTML5.

Můžete použít značku markzvýraznittext.

~~Tento řádek textu má být považován za smazaný text.~~

~~Tento řádek textu má být považován za již nepřesný.~~

Tento řádek textu má být považován za doplněk k dokumentu.

Tento řádek textu se vykreslí jako podtržený

Tento řádek textu má být považován za drobný tisk.

Tento řádek se vykreslí jako tučný text.

Tento řádek se vykreslí jako text psaný kurzívou.

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

.marka .smalltřídy jsou také k dispozici pro použití stejných stylů jako <mark>a <small>bez jakýchkoli nežádoucích sémantických důsledků, které by značky přinesly.

I když to není uvedeno výše, klidně používejte <b>a <i>v HTML5. <b>je určen ke zvýraznění slov nebo frází, aniž by zdůrazňoval další důležitost, zatímco <i>je většinou pro hlas, technické výrazy atd.

Textové nástroje

Změňte zarovnání textu, transformaci, styl, váhu a barvu pomocí našich textových nástrojů a nástrojů pro barvy .

Zkratky

Stylizovaná implementace prvku HTML <abbr>pro zkratky a akronymy pro zobrazení rozšířené verze při umístění kurzoru myši. Zkratky mají výchozí podtržení a získají kurzor nápovědy, který poskytuje další kontext při umístění kurzoru a uživatelům asistenčních technologií.

Přidejte .initialismke zkratce pro trochu menší velikost písma.

attr

HTML

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

Blokové uvozovky

Pro citování bloků obsahu z jiného zdroje ve vašem dokumentu. Zabalte <blockquote class="blockquote">do nabídky jakýkoli HTML .

Známý citát obsažený v prvku blockquote.

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

Pojmenování zdroje

Přidejte a <footer class="blockquote-footer">pro identifikaci zdroje. Zabalte název zdrojového díla do <cite>.

Známý citát obsažený v prvku blockquote.

Někdo slavný v Source Title

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

Zarovnání

Podle potřeby použijte textové nástroje ke změně zarovnání své blokové uvozovky.

Známý citát obsažený v prvku blockquote.

Někdo slavný v Source Title

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

Známý citát obsažený v prvku blockquote.

Někdo slavný v Source Title

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

Seznamy

Bez stylu

Odstraňte výchozí list-stylea levý okraj na položkách seznamu (pouze okamžité děti). To platí pouze pro položky seznamu okamžitých potomků , což znamená, že budete muset přidat třídu také pro všechny vnořené seznamy.

Toto je seznam.
Působí zcela nestylově.
Strukturálně je to stále seznam.
Tento styl se však vztahuje pouze na bezprostřední podřízené prvky.
Vnořené seznamy:
- nejsou tímto stylem ovlivněny
- stále ukáže kulku
- a mít odpovídající levý okraj
To se může v některých situacích stále hodit.

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

Odstraňte odrážky seznamu a použijte trochu světla margins kombinací dvou tříd .list-inlinea .list-inline-item.

Toto je položka seznamu.
A ještě jeden.
Ale jsou zobrazeny inline.

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

Zarovnání seznamu popisu

Zarovnejte termíny a popisy vodorovně pomocí předdefinovaných tříd (nebo sémantických mixů) našeho mřížkového systému. Pro delší výrazy můžete volitelně přidat .text-truncatetřídu pro zkrácení textu pomocí elipsy.

Popisné seznamy

Popisný seznam je ideální pro definování termínů.

Období

Definice termínu.

A ještě nějaký text definice zástupného symbolu.

Další termín

Tato definice je krátká, takže žádné další odstavce nebo tak něco.

Zkrácený výraz je zkrácený

To může být užitečné, když je málo místa. Přidá elipsu na konec.

Hnízdění

Vnořený seznam definic: Slyšel jsem, že máte rádi seznamy definic. Dovolte mi vložit seznam definic do vašeho seznamu definic.

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

Responzivní velikosti písma

Od verze 4.3.0 je Bootstrap dodáván s možností povolit responzivní velikosti písma, což umožňuje přirozenější škálování textu napříč velikostmi zařízení a výřezů. RFS lze povolit změnou $enable-responsive-font-sizesproměnné Sass na truea překompilováním Bootstrap.

Pro podporu RFS používáme mixin Sass, který nahrazuje naše běžné font-sizevlastnosti. Responzivní velikosti písma budou zkompilovány do calc()funkcí s kombinací jednotek rema zobrazovacích jednotek, aby bylo možné reagovat na změnu měřítka. Více o RFS a jeho konfiguraci najdete na jeho úložišti GitHub .