Tipografia

Documentazione è esempi per a tipografia Bootstrap, cumprese paràmetri globale, intestazioni, testu di corpu, listi è più.

In sta pagina

Paràmetri globale

Bootstrap stabilisce a visualizazione globale di basa, a tipografia è i stili di ligame. Quandu hè necessariu più cuntrollu, verificate e classi di utilità testuale .

Aduprate una pila di font nativu chì selezziunate u megliu font-familyper ogni OS è dispusitivu.
Per una scala di tipu più inclusiva è accessibile, usemu a radica predeterminata di u navigatore font-size(tipicamente 16px) per chì i visitatori ponu persunalizà i so predefiniti di u navigatore cum'è necessariu.
Aduprate l' attributi $font-family-base, $font-size-base, è $line-height-basecum'è a nostra basa tipografica applicata à u <body>.
Definite u culore di ligame globale via $link-color.
Aduprà $body-bgper stabilisce background-colora <body>( #fffper default).

Questi stili ponu esse truvati in _reboot.scss, è e variàbili globale sò definite in _variables.scss. Assicuratevi di mette $font-size-basein rem.

Intestazioni

Tutti i tituli HTML, <h1>attraversu <h6>, sò dispunibili.

Titulu	Esempiu
`<h1></h1>`	h1. Titulu Bootstrap
`<h2></h2>`	h2. Titulu Bootstrap
`<h3></h3>`	h3. Titulu Bootstrap
`<h4></h4>`	h4. Titulu Bootstrap
`<h5></h5>`	h5. Titulu Bootstrap
`<h6></h6>`	h6. Titulu Bootstrap

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

.h1attraversu .h6e classi sò ancu dispunibili, per quandu vulete currisponde à u stilu di fonti di un intestazione, ma ùn pò micca aduprà l'elementu HTML assuciatu.

h1. Titulu Bootstrap

h2. Titulu Bootstrap

h3. Titulu Bootstrap

h4. Titulu Bootstrap

h5. Titulu Bootstrap

h6. Titulu Bootstrap

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>

Persunalizazioni di intestazioni

Aduprate e classi di utilità incluse per ricreà u picculu testu di l'intestazione secundaria da Bootstrap 3.

Intestazione di visualizazione fantastica Cù testu secundariu sbiadito

html

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

Mostra intestazioni

Elementi tradiziunali di l'intestazione sò pensati per travaglià megliu in a carne di u cuntenutu di a vostra pagina. Quandu avete bisognu di un intestazione per distinguersi, cunzidira à utilizà un intestazione di visualizazione - un stile di intestazione più grande, un pocu più opinione.

Display 1

Display 2

Display 3

Display 4

Display 5

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

L'intestazione di a visualizazione sò cunfigurate via a $display-font-sizesmappa Sass è duie variàbili, $display-font-weightè $display-line-height.

L'intestazione di a visualizazione sò persunalizabili via duie variàbili, $display-font-familyè $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;

Piombu

Fate un paràgrafu spiccà aghjunghjendu .lead.

Questu hè un paràgrafu principale. Si distingue da i paragrafi rigulari.

html

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

Elementi di testu in linea

Stile per elementi HTML5 inline cumuni.

Pudete aduprà u tag marcatu perevidenziatetestu.

~~Questa linea di testu hè destinata à esse trattata cum'è testu sguassatu.~~

~~Questa linea di testu hè destinata à esse trattata cum'è micca più precisa.~~

Questa linea di testu hè destinata à esse trattata cum'è un aghjuntu à u documentu.

Questa linea di testu serà resa cum'è sottolineata.

Questa linea di testu hè destinata à esse trattata cum'è stampa fine.

Questa linea hè resa cum'è testu in grassu.

Questa linea hè resa cum'è testu in italicized.

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>

Attenti chì sti tag deve esse usatu per un scopu semanticu:

rapprisenta u testu chì hè marcatu o evidenziatu per scopi di riferimentu o di notazione.
rapprisenta cumenti laterali è stampa chjuca, cum'è copyright è testu legale.
<s>rappresenta elementi chì ùn sò più pertinenti o micca più precisi.
rapprisenta un span di testu in linea chì deve esse resu in una manera chì indica chì hà una annotazione non testuale.

Se vulete stilà u vostru testu, duvete aduprà e seguenti classi invece:

.markapplicà i stessi stili cum'è .
.smallapplicà i stessi stili cum'è .
.text-decoration-underlineapplicà i stessi stili cum'è .
.text-decoration-line-throughapplicà i stessi stili cum'è <s>.

Mentre ùn hè micca mostratu sopra, sentite liberu di utilizà è in HTML5. hè destinatu à mette in risaltu parolle o frasi senza trasmette impurtanza addiziale, mentre chì hè soprattuttu per voce, termini tecnichi, etc.

Utilità di testu

Cambia l'allineamentu di u testu, trasfurmà, stile, pesu, altezza di linea, decorazione è culore cù e nostre utilità di testu è utilità di culore .

Abbreviazioni

Implementazione stilizzata di l' <abbr>elementu HTML per l'abbreviazioni è l'acronimi per vede a versione ampliata nantu à u passaghju. L'abbreviazioni anu un sottolineatu predeterminatu è guadagnanu un cursore d'aiutu per furnisce un cuntestu supplementu nantu à u passaghju è à l'utilizatori di tecnulugia di assistenza.

Aghjunghjite .initialismà una abbreviazione per un font-size ligeramente più chjucu.

attr

HTML

html

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

Blockquotes

Per cite blocchi di cuntenutu da una altra fonte in u vostru documentu. Imbulighjate <blockquote class="blockquote">ogni HTML cum'è cita.

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

html

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

Nomine una fonte

A specificazione HTML richiede chì l'attribuzione di u blockquote sia piazzata fora di u <blockquote>. Quandu furnisce l'attribuzione, imbulighjate u vostru <blockquote>in a <figure>è utilizate a <figcaption>o un elementu di livellu di bloccu (per esempiu, ) cù a .blockquote-footerclasse. Assicuratevi di imballà <cite>ancu u nome di u travagliu fonte.

Una cita ben cunnisciuta, cuntenuta in un 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>

Allineamentu

Aduprate l'utilità di testu cumu necessariu per cambià l'allinjamentu di u vostru blockquote.

Una cita ben cunnisciuta, cuntenuta in un 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>

Una cita ben cunnisciuta, cuntenuta in un 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>

Listi

Unstyled

Eliminate u margine predeterminatu list-styleè lasciatu nantu à l'articuli di lista (solu i zitelli immediati). Questu solu s'applica à l'articuli di lista di i zitelli immediati , vale à dì chì avete bisognu di aghjunghje a classa per qualsiasi liste anidata.

Questa hè una lista.
Sembra completamente senza stile.
Strutturalmente, hè sempre una lista.
Tuttavia, stu stile hè solu appiicatu à l'elementi di u zitellu immediata.
Liste nidificate:
- ùn sò micca affettati da stu stile
- mostrarà sempre una bala
- è avè un margine di manca adattatu
Questu pò ancu esse utile in certe situazioni.

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>

In linea

Eliminate i bullets di una lista è applicà un pocu di luce margincù una cumminazione di duie classi, .list-inlineè .list-inline-item.

Questu hè un articulu di lista.
È un altru.
Ma sò affissati in linea.

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>

Allineamentu di a lista di descrizzione

Allineate i termini è e descrizioni orizontali usendu e classi predefinite di u nostru sistema di griglia (o mixin semantici). Per termini più longu, pudete eventualmente aghjunghje una .text-truncateclassa per truncà u testu cù un ellipsis.

Lista di descrizzione

Una lista di descrizzione hè perfetta per definisce i termini.

Terminu

Definizione di u termine.

È un altru testu di definizione di placeholder.

Un altru termini

Sta definizione hè corta, cusì ùn ci hè micca paragrafi extra o nunda.

U termu truncatu hè troncatu

Questu pò esse utile quandu u spaziu hè strettu. Aggiunge un ellipsis à a fine.

Nidificazione

Lista di definizione nidificata: Aghju intesu chì ti piacenu e liste di definizione. Lasciami mette una lista di definizione in a vostra lista di definizione.

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>

Dimensioni di font responsive

In Bootstrap 5, avemu attivatu dimensioni di fonti responsive per difettu, permettendu à u testu di scala più naturali in e dimensioni di u dispositivu è di a finestra. Fighjate à a pagina RFS per sapè cumu funziona.

Sass

Variabili

L'intestazione anu alcune variabili dedicate per a dimensione è u spaziu.

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

Diversi elementi di tipografia coperti quì è in Reboot anu ancu variàbili dedicati.

$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

Ùn ci sò micca mixins dedicati per a tipografia, ma Bootstrap usa Responsive Font Sizing (RFS) .