Source

Tipografija

Dokumentacija i primjeri za Bootstrap tipografiju, uključujući globalne postavke, naslove, tijelo teksta, popise i još mnogo toga.

Globalne postavke

Bootstrap postavlja osnovni globalni prikaz, tipografiju i stilove veza. Kada je potrebna veća kontrola, provjerite tekstualne uslužne klase .

Koristite izvorni skup fontova koji odabire najbolje font-familyza svaki OS i uređaj.
Za inkluzivniju i pristupačniju ljestvicu tipova, pretpostavljamo zadani korijen preglednika font-size(obično 16 px) kako bi posjetitelji mogli prilagoditi zadane postavke preglednika po potrebi.
Koristite atribute $font-family-base, $font-size-base, i $line-height-basekao našu tipografsku osnovu primijenjenu na <body>.
Postavite globalnu boju veze putem $link-colori primijenite podcrtane veze samo na :hover.
Koristite $body-bgza postavljanje background-colorna <body>( #fffprema zadanim postavkama).

Ovi se stilovi mogu pronaći unutar _reboot.scss, a globalne varijable definirane su u _variables.scss. Obavezno postavite $font-size-base.rem

Naslovi

Svi HTML zaglavlja, <h1>do <h6>, su dostupni.

Naslov	Primjer
`<h1></h1>`	h1. Bootstrap naslov
`<h2></h2>`	h2. Bootstrap naslov
`<h3></h3>`	h3. Bootstrap naslov
`<h4></h4>`	h4. Bootstrap naslov
`<h5></h5>`	h5. Bootstrap naslov
`<h6></h6>`	h6. Bootstrap naslov

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

.h1kroz .h6klase su također dostupne, za slučajeve kada želite uskladiti stil fonta s naslovom, ali ne možete koristiti pridruženi HTML element.

h1. Bootstrap naslov

h2. Bootstrap naslov

h3. Bootstrap naslov

h4. Bootstrap naslov

h5. Bootstrap naslov

h6. Bootstrap naslov

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

Prilagodba naslova

Upotrijebite uključene uslužne klase za ponovno stvaranje malog sekundarnog teksta naslova iz Bootstrapa 3.

Otmjeni naslov za prikaz s izblijedjelim sekundarnim tekstom

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

Prikaz naslova

Tradicionalni elementi naslova dizajnirani su da najbolje funkcioniraju u središtu sadržaja vaše stranice. Kada vam je potreban naslov koji će se istaknuti, razmislite o korištenju naslova za prikaz — većeg, malo samouvjerenijeg stila naslova. Imajte na umu da ti naslovi nisu responzivni prema zadanim postavkama, ali je moguće omogućiti responzivne veličine fonta .

Zaslon 1

Zaslon 2

Zaslon 3

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

voditi

Istaknite odlomak dodavanjem .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>

Umetnuti tekstualni elementi

Stil za uobičajene ugrađene HTML5 elemente.

Oznaku oznake možete koristiti zaistaknutitekst.

~~Ovaj redak teksta trebao bi se tretirati kao izbrisani tekst.~~

~~Ovaj redak teksta trebao bi se smatrati netočnim.~~

Ovaj redak teksta trebao bi se tretirati kao dodatak dokumentu.

Ovaj redak teksta prikazat će se kao podcrtan

Ovaj redak teksta trebao bi se tretirati kao sitni tisak.

Ovaj redak prikazan je podebljanim tekstom.

Ovaj redak prikazan je kao tekst u kurzivu.

<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 .smallklase su također dostupne za primjenu istih stilova kao <mark>i <small>uz izbjegavanje bilo kakvih neželjenih semantičkih implikacija koje bi oznake donijele.

Iako nije prikazano gore, slobodno ga koristite <b>i <i>u HTML5. <b>namijenjen je isticanju riječi ili fraza bez prenošenja dodatne važnosti, dok <i>je uglavnom za glas, tehničke izraze itd.

Tekstualni pomoćni programi

Promijenite poravnanje teksta, transformaciju, stil, težinu i boju s našim uslužnim programima za tekst i bojama .

Kratice

Stilizirana implementacija HTML <abbr>elementa za kratice i akronime za prikaz proširene verzije pri lebdenju. Kratice imaju zadanu podcrtanost i dobivaju pokazivač pomoći kako bi pružili dodatni kontekst pri lebdenju i korisnicima pomoćnih tehnologija.

Dodajte .initialismkraticu za malo manju veličinu fonta.

attr

HTML

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

Blok citati

Za citiranje blokova sadržaja iz drugog izvora unutar vašeg dokumenta. Zamotajte <blockquote class="blockquote">bilo koji HTML kao citat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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>

Imenovanje izvora

Dodajte <footer class="blockquote-footer">za identifikaciju izvora. Omotajte naziv izvornog djela u <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Netko poznat u naslovu izvora

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

Poravnanje

Po potrebi upotrijebite tekstualne pomoćne programe za promjenu poravnanja vašeg blok citata.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Netko poznat u naslovu izvora

<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. Integer posuere erat a ante.

Netko poznat u naslovu izvora

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

Popisi

Nestilizirano

Uklonite zadanu list-stylei lijevu marginu na stavkama popisa (samo neposredni potomci). Ovo se odnosi samo na neposredne podređene stavke popisa , što znači da ćete morati dodati klasu i za sve ugniježđene popise.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Cijeli broj molestie lorem at massa
Facilisis in 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>

U redu

Uklonite grafičke oznake s popisa i primijenite nešto svjetla marginkombinacijom dviju klasa .list-inlinei .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>

Usklađivanje popisa opisa

Horizontalno poravnajte termine i opise pomoću unaprijed definiranih klasa (ili semantičkih miksina) našeg grid sustava. Za duže rokove, po izboru možete dodati .text-truncateklasu za skraćivanje teksta elipsom.

Liste opisa

Popis opisa savršen je za definiranje pojmova.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Skraćeni izraz je skraćen

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Gniježđenje

Popis ugniježđenih definicija: 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>

Responzivne veličine fonta

Bootstrap v4.3 isporučuje se s opcijom za omogućavanje responzivnih veličina fonta, dopuštajući tekstu da se prirodnije skalira na različitim uređajima i veličinama prikaza. RFS se može omogućiti promjenom $enable-responsive-font-sizesvarijable Sass u truei ponovnim kompajliranjem Bootstrapa.

Kako bismo podržali RFS , koristimo Sass mixin da zamijenimo naša normalna font-sizesvojstva. Responzivne veličine fonta bit će sastavljene u calc()funkcije s kombinacijom jedinica remi okvira prikaza kako bi se omogućilo responzivno ponašanje skaliranja. Više o RFS -u i njegovoj konfiguraciji možete pronaći na GitHub repozitoriju .