Source

Tipografia

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

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, assumemu a radica predeterminata di u navigatore font-size(tipicamenti 16px) per chì i visitatori ponu persunalizà i so predefiniti di u navigatore cumu necessariu.
Aduprate l' attributi $font-family-base, $font-size-base, è $line-height-basecum'è a nostra basa tipografica applicata à u <body>.
Stabilite u culore di ligame globale via $link-colorè applicà i ligami sottumessi solu nantu à :hover.
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

<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

<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

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

Piombu

Fate un paràgrafu spiccà aghjunghjendu .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>

Elementi di testu in linea

Stile per elementi HTML5 in linea cumuni.

Pudete aduprà a marca tag àevidenziatetestu.

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

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

.markè e .smallclassi sò ancu dispunibuli per applicà i stessi stili cum'è <mark>è <small>evitendu ogni implicazione semantica indesiderata chì i tags portanu.

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

Utilità di testu

Cambia l'allineamentu di u testu, trasfurmate, stile, pesu è 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

<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. Avvolge <blockquote class="blockquote">ogni HTML cum'è cita.

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>

Nomine una fonte

Aghjunghjite un <footer class="blockquote-footer">per identificà a fonte. Imbulighjate u nome di u travagliu fonte in <cite>.

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

Qualchissia famosu in 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>

Allineamentu

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

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

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

Qualchissia famosu in 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>

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem à 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>

In linea

Eliminate i bullets di una lista è applicà un pocu di luce margincù una cumminazione di duie classi, .list-inlineè .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>

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.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

U termu truncatu hè troncatu

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

Nidificazione

Lista di definizione nidificata: 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>

Tipografia responsiva

A tipografia responsiva si riferisce à a scala di testu è cumpunenti solu aghjustendu l'elementu radicali font-sizein una seria di dumande di media. Bootstrap ùn faci micca questu per voi, ma hè abbastanza faciule d'aghjunghje si avete bisognu.

Eccu un esempiu di questu in pratica. Sceglite tutte font-sizee dumande di media chì vulete.

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