in English

Tipografia

Documentació i exemples per a la tipografia Bootstrap, com ara la configuració global, els encapçalaments, el text del cos, les llistes i molt més.

En aquesta pàgina

Configuració global

Bootstrap estableix estils bàsics de visualització global, tipografia i enllaços. Quan calgui més control, consulteu les classes d'utilitat textual .

Utilitzeu una pila de tipus de lletra nativa que seleccioni la millor font-familyper a cada sistema operatiu i dispositiu.
Per a una escala de tipus més inclusiva i accessible, utilitzem l'arrel predeterminada del navegador font-size(normalment 16 píxels) perquè els visitants puguin personalitzar els valors predeterminats del navegador segons sigui necessari.
Utilitzeu els atributs $font-family-base, $font-size-base, i $line-height-basecom a base tipogràfica aplicada a <body>.
Establiu el color de l'enllaç global mitjançant $link-color.
Utilitzeu -lo $body-bgper configurar un background-colora <body>( #fffper defecte).

Aquests estils es poden trobar a _reboot.scss, i les variables globals es defineixen a _variables.scss. Assegureu-vos d'instal·lar $font-size-base- lo rem.

Encapçalaments

Tots els encapçalaments HTML, <h1>fins a <h6>, estan disponibles.

Encapçalament	Exemple
`<h1></h1>`	h1. Encapçalament d'arrencada
`<h2></h2>`	h2. Encapçalament d'arrencada
`<h3></h3>`	h3. Encapçalament d'arrencada
`<h4></h4>`	h4. Encapçalament d'arrencada
`<h5></h5>`	h5. Encapçalament d'arrencada
`<h6></h6>`	h6. Encapçalament d'arrencada

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

.h1També hi ha disponibles classes a través .h6, per quan voleu fer coincidir l'estil de lletra d'un encapçalament però no podeu utilitzar l'element HTML associat.

h1. Encapçalament d'arrencada

h2. Encapçalament d'arrencada

h3. Encapçalament d'arrencada

h4. Encapçalament d'arrencada

h5. Encapçalament d'arrencada

h6. Encapçalament d'arrencada

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>

Personalització de títols

Utilitzeu les classes d'utilitat incloses per recrear el petit text de l'encapçalament secundari de Bootstrap 3.

Encapçalament de visualització fantàstic amb text secundari esvaït

html

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

Mostra els encapçalaments

Els elements d'encapçalament tradicionals estan dissenyats per funcionar millor en la carn del contingut de la vostra pàgina. Quan necessiteu un encapçalament per destacar, penseu a utilitzar un encapçalament de visualització , un estil d'encapçalament més gran i una mica més opinió.

Pantalla 1

Pantalla 2

Pantalla 3

Pantalla 4

Pantalla 5

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

Els encapçalaments de visualització es configuren mitjançant el $display-font-sizesmapa Sass i dues variables, $display-font-weighti $display-line-height.

Els encapçalaments de visualització es poden personalitzar mitjançant dues variables $display-font-familyi $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;

Dirigir

Feu que un paràgraf destaqui afegint .lead.

Aquest és un paràgraf principal. Destaca dels paràgrafs habituals.

html

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

Elements de text en línia

Estil per a elements HTML5 en línia comuns.

Podeu utilitzar l'etiqueta de marca perressaltartext.

~~Aquesta línia de text està pensada per ser tractada com a text suprimit.~~

~~Aquesta línia de text està pensada per ser tractada com que ja no és precisa.~~

Aquesta línia de text està pensada per ser tractada com una addició al document.

Aquesta línia de text es mostrarà tal com està subratllada.

Aquesta línia de text s'ha de tractar com a lletra petita.

Aquesta línia es mostra com a text en negreta.

Aquesta línia es mostra com a text en cursiva.

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>

Tingueu en compte que aquestes etiquetes s'han d'utilitzar amb finalitats semàntiques:

representa un text que està marcat o ressaltat amb finalitats de referència o anotació.
representa comentaris laterals i lletra petita, com ara els drets d'autor i el text legal.
<s>representa un element que ja no és rellevant o ja no és exacte.
representa un tram de text en línia que s'ha de representar de manera que indiqui que té una anotació no textual.

Si voleu posar estil al vostre text, hauríeu d'utilitzar les classes següents:

.markaplicarà els mateixos estils que .
.smallaplicarà els mateixos estils que .
.text-decoration-underlineaplicarà els mateixos estils que .
.text-decoration-line-throughaplicarà els mateixos estils que <s>.

Tot i que no es mostra més amunt, no dubteu a utilitzar-lo en HTML5. està pensat per ressaltar paraules o frases sense transmetre importància addicional, mentre que és principalment per a veu, termes tècnics, etc.

Utilitats de text

Canvieu l'alineació del text, la transformació, l'estil, el pes, l'alçada de la línia, la decoració i el color amb les nostres utilitats de text i color .

Abreviatures

Implementació estilitzada de l'element HTML <abbr>per a abreviatures i acrònims per mostrar la versió ampliada al passar el cursor. Les abreviatures tenen un subratllat predeterminat i obtenen un cursor d'ajuda per proporcionar context addicional al passar el cursor i als usuaris de tecnologies d'assistència.

Afegiu .initialisma una abreviatura per a una mida de lletra una mica més petita.

attr

HTML

html

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

Cites de bloc

Per citar blocs de contingut d'una altra font dins del vostre document. Envolta <blockquote class="blockquote">qualsevol HTML com a cita.

Una cita coneguda, continguda en un element blockquote.

html

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

Anomenament d'una font

L'especificació HTML requereix que l'atribució de quotes blocs es col·loqui fora del fitxer <blockquote>. Quan proporcioneu l'atribució, embolcalleu-vos <blockquote>amb a <figure>i utilitzeu a <figcaption>o un element de nivell de bloc (per exemple, ) amb la .blockquote-footerclasse. Assegureu-vos d'embolicar <cite>també el nom del treball d'origen.

Una cita coneguda, continguda en un element 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>

Alineació

Utilitzeu les utilitats de text segons sigui necessari per canviar l'alineació de la cita de bloc.

Una cita coneguda, continguda en un element 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 coneguda, continguda en un element 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>

Llistes

Sense estil

Elimineu list-styleel marge predeterminat i esquerre dels elements de la llista (només fills immediats). Això només s'aplica als elements de la llista de fills immediats , és a dir, també haureu d'afegir la classe per a les llistes imbricades.

Aquesta és una llista.
Sembla totalment sense estil.
Estructuralment, encara és una llista.
Tanmateix, aquest estil només s'aplica als elements secundaris immediats.
Llistes imbricades:
- no es veuen afectats per aquest estil
- encara mostrarà una bala
- i tenir el marge esquerre adequat
Això encara pot ser útil en algunes situacions.

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>

En linia

Traieu les vinyetes d'una llista i apliqueu una mica de llum marginamb una combinació de dues classes .list-inlinei .list-inline-item.

Aquest és un element de llista.
I un altre.
Però es mostren en línia.

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>

Alineació de la llista de descripció

Alineeu termes i descripcions horitzontalment utilitzant les classes predefinides del nostre sistema de graella (o mixins semàntics). Per a terminis més llargs, opcionalment podeu afegir una .text-truncateclasse per truncar el text amb punts suspensius.

Llistes de descripció

Una llista de descripció és perfecta per definir termes.

Terme

Definició del terme.

I més text de definició de marcador de posició.

Un altre terme

Aquesta definició és curta, de manera que no hi ha paràgrafs addicionals ni res.

El terme truncat està truncat

Això pot ser útil quan l'espai és reduït. Afegeix una el·lipse al final.

Nidificació

Llista de definicions niuades: He sentit que t'agraden les llistes de definicions. Permeteu-me posar una llista de definicions dins de la vostra llista de definicions.

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>

Mides de lletra sensibles

A Bootstrap 5, hem habilitat mides de lletra responsives de manera predeterminada, permetent que el text s'escalfi de manera més natural a través de les mides del dispositiu i de la finestra gràfica. Fes una ullada a la pàgina RFS per saber com funciona això.

Sass

Les variables

Els encapçalaments tenen algunes variables dedicades per a la mida i l'espaiat.

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

Diversos elements de tipografia tractats aquí i a Reboot també tenen variables dedicades.

$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

No hi ha mixins dedicats per a la tipografia, però Bootstrap utilitza la mida de lletra sensible (RFS) .