in English

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

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

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

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

Dobro poznati citat, sadržan u elementu blockquote.

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

Imenovanje izvora

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

Dobro poznati citat, sadržan u elementu blockquote.

Netko poznat u naslovu izvora

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

Poravnanje

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

Dobro poznati citat, sadržan u elementu blockquote.

Netko poznat u naslovu izvora

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

Dobro poznati citat, sadržan u elementu blockquote.

Netko poznat u naslovu izvora

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

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.

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

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

<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

Od v4.3.0, Bootstrap se isporučuje s opcijom za omogućavanje responzivnih veličina fonta, omogućujući tekstu da se prirodnije skalira na različitim uređajima i veličinama prozora. 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 .