in English

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, usemu a radica predeterminata di u navigatore font-size(tipicamente 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 glubale 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. Tenite in mente queste intestazioni ùn sò micca responsive per difettu, ma hè pussibule attivà dimensioni di font rispunsevuli .

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.

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

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

Elementi di testu in linea

Stile per elementi HTML5 in linea cumuni.

Pudete aduprà u tag marcatuevidenziatetestu.

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

Questa linea di testu hè destinata à esse trattata cum'è ùn hè 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. Imbulighjate <blockquote class="blockquote">ogni HTML cum'è cita.

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

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

Nomine una fonte

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

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in u Titulu Fonte 
<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>

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.

Qualchissia famosu in u Titulu Fonte 
<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>

Una cita ben cunnisciuta, cuntenuta in un elementu blockquote.

Qualchissia famosu in u Titulu Fonte 
<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>

Listi

Unstyled

Eliminate u margine predeterminatu list-styleè lasciatu nantu à l'articuli di lista (solu i zitelli immediati). Questu hè appiicatu solu à 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.
<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.
<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 orizzontalmente utilizendu 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 pocu di più 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. 
<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

Da a v4.3.0, Bootstrap spedisce cù l'opzione per attivà e dimensioni di fonti responsive, chì permettenu u testu di scala più naturali in tutte e dimensioni di u dispositivu è di a finestra. RFS pò esse attivatu cambiendu a $enable-responsive-font-sizesvariabile Sass trueè recompilendu Bootstrap.

Per sustene RFS , usemu un Sass mixin per rimpiazzà e nostre font-sizeproprietà normali. E dimensioni di fonti responsive seranu cumpilate in calc()funzioni cù una mistura di reme unità di viewport per attivà u cumpurtamentu di scaling responsive. Più nantu à RFS è a so cunfigurazione ponu esse truvati in u so repository GitHub .