Source

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, assumim 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ó.

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.

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>

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.

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>

Anomenament d'una font

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

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

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

Alineació

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

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

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

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

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.

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

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.

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

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.
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.
El terme truncat està truncat
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nidificació
Llista de definicions niuades
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

La tipografia sensible es refereix a escalar el text i els components simplement ajustant l'element arrel font-sizedins d'una sèrie de consultes multimèdia. Bootstrap no ho fa per vosaltres, però és bastant fàcil afegir-lo si ho necessiteu.

Aquí teniu un exemple a la pràctica. Trieu les font-sizeconsultes i consultes de mitjans que vulgueu.

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