Tipografija

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

Na ovoj stranici

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 koristimo 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-color.
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

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>

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

html

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

Zaslon 1

Zaslon 2

Zaslon 3

Prikaz 4

Prikaz 5

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

Naslovi prikaza konfigurirani su putem $display-font-sizesSass karte i dvije varijable $display-font-weighti $display-line-height.

Naslovi prikaza mogu se prilagoditi putem dvije varijable $display-font-familyi $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;

voditi

Istaknite odlomak dodavanjem .lead.

Ovo je glavni paragraf. Ističe se od uobičajenih paragrafa.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</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.

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>

Pazite da se te oznake trebaju koristiti u semantičke svrhe:

predstavlja tekst koji je označen ili istaknut u svrhu reference ili notacije.
predstavlja popratne komentare i sitna slova, poput autorskih prava i pravnog teksta.
<s>predstavlja element koji više nije relevantan ili više nije točan.
predstavlja raspon umetnutog teksta koji bi trebao biti prikazan na način koji pokazuje da ima netekstualnu napomenu.

Ako želite stilizirati svoj tekst, trebali biste umjesto toga koristiti sljedeće klase:

.markprimjenjivat će iste stilove kao .
.smallprimjenjivat će iste stilove kao .
.text-decoration-underlineprimjenjivat će iste stilove kao .
.text-decoration-line-throughprimjenjivat će iste stilove kao <s>.

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

Tekstualni pomoćni programi

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

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

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.

Dobro poznati citat, sadržan u elementu blockquote.

html

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

Imenovanje izvora

HTML specifikacija zahtijeva da se atribucija blockquote postavi izvan <blockquote>. Kada dajete atribuciju, zamotajte svoje <blockquote>u a <figure>i koristite a <figcaption>ili element razine bloka (npr. ) s .blockquote-footerklasom. Obavezno umotajte i naziv izvornog djela <cite>.

Dobro poznati citat, sadržan u elementu 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>

Poravnanje

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

Dobro poznati citat, sadržan u elementu 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>

Dobro poznati citat, sadržan u elementu 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>

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.

Ovo je popis.
Djeluje potpuno nestilizirano.
Strukturno, to je još uvijek popis.
Međutim, ovaj se stil odnosi samo na neposredne podređene elemente.
Ugniježđene liste:
- nisu pod utjecajem ovog stila
- i dalje će pokazati metak
- i imaju odgovarajuću lijevu marginu
Ovo ipak može dobro doći u nekim situacijama.

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>

U redu

Uklonite grafičke oznake s popisa i primijenite nešto svjetla marginkombinacijom dviju klasa .list-inlinei .list-inline-item.

Ovo je stavka popisa.
I još jedan.
Ali oni se prikazuju u liniji.

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>

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.

Termin

Definicija pojma.

I još malo teksta definicije rezerviranog mjesta.

Drugi termin

Ova definicija je kratka, tako da nema dodatnih paragrafa ili bilo čega.

Skraćeni izraz je skraćen

Ovo može biti korisno kada nema dovoljno prostora. Dodaje elipsu na kraju.

Gniježđenje

Popis ugniježđenih definicija: Čuo sam da voliš popise definicija. Dopustite mi da stavim popis definicija unutar vašeg popisa definicija.

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>

Responzivne veličine fonta

U Bootstrapu 5 smo prema zadanim postavkama omogućili responzivne veličine fonta, omogućujući tekstu da se prirodnije skalira na različitim uređajima i veličinama prikaza. Pogledajte RFS stranicu kako biste saznali kako to funkcionira.

Sass

Varijable

Naslovi imaju neke namjenske varijable za veličinu i razmak.

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

Razni elementi tipografije obuhvaćeni ovdje i u Rebootu također imaju namjenske varijable.

$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

Ne postoje namjenski mixini za tipografiju, ali Bootstrap koristi Responsive Font Sizing (RFS) .