Source

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 přístupnější typové měřítko předpokládá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.

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.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

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

Pojmenování zdroje

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Někdo slavný v Source Title 
<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>

Zarovnání

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Někdo slavný v Source Title 
<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 sit amet, consectetur adipiscing elit. Celé číslo posuere erat a ante.

Někdo slavný v Source Title 
<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>

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elita
  • Integer molestie lorem at massa
  • Facilisis v pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
<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>

V souladu

Odstraňte odrážky seznamu a použijte trochu světla margins kombinací dvou tříd .list-inlinea .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>

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

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

Donec id elit non mi porta gravida at eget metus.

Porta Malesuada
Etiam porta sem malesuada magna mollis euismod.
Zkrácený výraz je zkrácený
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Hnízdění
Vnořený seznam definic
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc. 
<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>

Responzivní typografie

Responzivní typografie odkazuje na změnu měřítka textu a komponent jednoduchým nastavením kořenového prvku v font-sizerámci řady mediálních dotazů. Bootstrap to za vás neudělá, ale v případě potřeby jej lze poměrně snadno přidat.

Zde je příklad z praxe. Vyberte si jakékoli font-sizedotazy a dotazy na média.

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