Source

Typografia

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

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 predpokladáme predvolený koreňový adresár prehliadača font-size(zvyčajne 16 pixelov), aby si návštevníci mohli podľa potreby prispôsobiť predvolené nastavenia prehliadača.
  • 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 pomocou $link-colora použite podčiarknutie odkazu iba na :hover.
  • 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

<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

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

Viesť

Nechajte odsek vyniknúť pridaní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

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

<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 .smalltriedy sú tiež k dispozícii na použitie rovnakých štýlov ako <mark>a <small>bez akýchkoľvek nežiaducich sémantických dôsledkov, ktoré by značky priniesli.

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

Textové pomôcky

Zmeňte zarovnanie textu, transformáciu, štýl, váhu 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

<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. Ako citáciu obtočte <blockquote class="blockquote">ľubovoľný kód 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>

Pomenovanie zdroja

Pridajte a <footer class="blockquote-footer">na identifikáciu zdroja. Názov zdrojového diela zabaľte do <cite>.

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

Niekto slávny 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>

Zarovnanie

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

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

Niekto slávny 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.

Niekto slávny 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>

zoznamy

Neštylizované

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.

  • 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 veľ
  • 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 rade

Odstráňte odrážky zoznamu a použite trochu svetla margins kombináciou dvoch tried .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>

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.
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.
Skrátený výraz je skrátený
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Hniezdenie
Vnorený zoznam definícií
Aeneovský 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>

Responzívna typografia

Responzívna typografia sa týka škálovania textu a komponentov jednoduchou úpravou koreňového prvku v font-sizerámci série mediálnych dopytov. Bootstrap to za vás neurobí, ale ak to potrebujete, je celkom ľahké ho pridať.

Tu je príklad z praxe. Vyberte si akékoľvek font-sizeotázky týkajúce sa médií a médií.

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