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.

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-colori apliqueu subratllats d'enllaç només a :hover.
  • 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

<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 

<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ó. Tingueu en compte que aquests encapçalaments no responen de manera predeterminada, però és possible activar les mides de lletra responsives .

Pantalla 1
Pantalla 2
Pantalla 3
Pantalla 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>

Dirigir

Feu que un paràgraf destaqui afegint .lead.

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

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

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

.marki .smallles classes també estan disponibles per aplicar els mateixos estils que <mark>i <small>alhora evitar qualsevol implicació semàntica no desitjada que comportarien les etiquetes.

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

Utilitats de text

Canvieu l'alineació del text, la transformació, l'estil, el pes 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

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

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

Anomenament d'una font

Afegiu un <footer class="blockquote-footer">per identificar la font. Emboliqui el nom de l'obra font en <cite>.

Una cita coneguda, continguda en un element blockquote.

Algú famós a Source Title 
<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>

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.

Algú famós a Source Title 
<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 coneguda, continguda en un element blockquote.

Algú famós a Source Title 
<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>

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.
<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.
<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. 
<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 partir de la v4.3.0, Bootstrap s'envia amb l'opció d'habilitar mides de lletra sensibles, 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. L' RFS es pot activar canviant la $enable-responsive-font-sizesvariable Sass truei recompilant Bootstrap.

Per donar suport a RFS , utilitzem un mixin Sass per substituir les nostres font-sizepropietats normals. Les mides de lletra responsives es compilaran en calc()funcions amb una combinació d' remunitats de visualització i de visualització per habilitar el comportament d'escala responsiu. Podeu trobar més informació sobre RFS i la seva configuració al seu repositori GitHub .