Bootstrap - Tipografía

Bootstrap usa Helvetica Neue, Helvetica, Arial y sans-serif en su pila de fuentes predeterminada. Con la función de tipografía de Bootstrap, puede crear encabezados, párrafos, listas y otros elementos en línea. Veamos aprender cada uno de estos en las siguientes secciones.

Encabezados

Todos los encabezados HTML (h1 a h6) están diseñados en Bootstrap. A continuación se muestra un ejemplo:

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

El segmento de código anterior con Bootstrap producirá el siguiente resultado:

Subtítulos en línea

Para agregar un subtítulo en línea a cualquiera de los encabezados, simplemente agregue <pequeño> alrededor de cualquiera de los elementos o agregue .small class y obtendrá un texto más pequeño en un color más claro como se muestra en el siguiente ejemplo:

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

El segmento de código anterior con Bootstrap producirá el siguiente resultado:

Copia del cuerpo principal

Para agregar algo de énfasis a un párrafo, agregue class = "lead". Esto le dará un tamaño de fuente más grande, un peso más ligero y una altura de línea más alta como en el siguiente ejemplo:

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Énfasis

Las etiquetas de énfasis predeterminadas de HTML, como <pequeño>, establecen el texto en un 85% del tamaño del padre, <strong> enfatiza un texto con un peso de fuente más pesado y <em> enfatiza un texto en cursiva.

Bootstrap ofrece algunas clases que pueden usarse para enfatizar los textos, como se ve en el siguiente ejemplo:

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Abreviaturas

El elemento HTML <abbr> proporciona marcado para abreviaturas o acrónimos, como WWW o HTTP. Bootstrap estiliza los elementos <abbr> con un borde punteado claro en la parte inferior y revela el texto completo al pasar el mouse (siempre que agregue ese texto al atributo de título <abbr>). Para obtener un tamaño de fuente un poco más pequeño, agregue .initialism a <abbr>.

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Direcciones

Con la etiqueta <dirección> puede mostrar la información de contacto en su página web. Dado que la <dirección> muestra por defecto: block; necesitarás usar

Etiquetas para agregar saltos de línea al texto de la dirección adjunta.

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">[email protected]</a>
</address>

Blockquotes

Puede utilizar el <blockquote> predeterminado alrededor de cualquier texto HTML. Otras opciones incluyen agregar una etiqueta <small> para identificar la fuente de la cita y alinear a la derecha la cita en bloque usando class .pull-right . El siguiente ejemplo demuestra todas estas características:

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Liza

Bootstrap admite listas ordenadas, listas desordenadas y listas de definición.

Ordered lists - Una lista ordenada es una lista que se encuentra en algún tipo de orden secuencial y está precedida por números.
Unordered lists- Una lista desordenada es una lista que no tiene ningún orden en particular y que tradicionalmente tiene un estilo con viñetas. Si no desea que aparezcan las viñetas, puede eliminar el estilo utilizando la clase .list-unstyled . También puede colocar todos los elementos de la lista en una sola línea usando la clase .list-inline .
Definition lists- En este tipo de lista, cada elemento de la lista puede constar de los elementos <dt> y <dd>. <dt> significa término de definición y, como un diccionario, este es el término (o frase) que se está definiendo. Posteriormente, <dd> es la definición de <dt>. Puede hacer que los términos y descripciones en <dl> se alineen uno al lado del otro usando la clase dl-horizontal .

El siguiente ejemplo demuestra cada uno de estos tipos:

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

<ul class = "list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Inline List</h4>

<ul class = "list-inline">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Definition List</h4>

<dl>
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

<h4>Example of Horizontal Definition List</h4>

<dl class = "dl-horizontal">
   <dt>Description 1</dt>
   <dd>Item 1</dd>
   <dt>Description 2</dt>
   <dd>Item 2</dd>
</dl>

↰ Previous page Next page ↱