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-family
per 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-base
cum'è a nostra basa tipografica applicata à u<body>
. - Definite u culore di ligame globale via
$link-color
. - Aduprà
$body-bg
per stabiliscebackground-color
a<body>
(#fff
per default).
Questi stili ponu esse truvati in _reboot.scss
, è e variàbili globale sò definite in _variables.scss
. Assicuratevi di mette $font-size-base
in 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>
.h1
attraversu .h6
e 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.
<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-sizes
mappa Sass è duie variàbili, $display-font-weight
è $display-line-height
.
$display-font-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
5: 3rem,
6: 2.5rem
);
$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.
<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.
<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:
<mark>
rapprisenta u testu chì hè marcatu o evidenziatu per scopi di riferimentu o di notazione.<small>
rapprisenta cumenti laterali è stampa chjuca, cum'è copyright è testu legale.<s>
rappresenta elementi chì ùn sò più pertinenti o micca più precisi.<u>
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:
.mark
applicà i stessi stili cum'è<mark>
..small
applicà i stessi stili cum'è<small>
..text-decoration-underline
applicà i stessi stili cum'è<u>
..text-decoration-line-through
applicà i stessi stili cum'è<s>
.
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 impurtanza addiziale, mentre chì <i>
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
<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>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, <p>
) cù a .blockquote-footer
classe. Assicuratevi di imballà <cite>
ancu u nome di u travagliu fonte.
<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.
<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>
<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.
<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 margin
cù 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 orizontali usendu e classi predefinite di u nostru sistema di griglia (o mixin semantici). Per termini più longu, pudete eventualmente aghjunghje una .text-truncate
classa 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.
<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;
$hr-height: $border-width;
$hr-opacity: .25;
$legend-margin-bottom: .5rem;
$legend-font-size: 1.5rem;
$legend-font-weight: null;
$mark-padding: .2em;
$dt-font-weight: $font-weight-bold;
$nested-kbd-font-weight: $font-weight-bold;
$list-inline-padding: .5rem;
$mark-bg: #fcf8e3;
Mixins
Ùn ci sò micca mixins dedicati per a tipografia, ma Bootstrap usa Responsive Font Sizing (RFS) .