Typography
Bootstrap 5 Typography
Headings
Todos los encabezados HTML, h1 y h6, están disponibles.
| Heading | Example |
|---|---|
<h1></h1> |
h1. Contacta heading |
<h2></h2> |
h2. Contacta heading |
<h3></h3> |
h3. Contacta heading |
<h4></h4> |
h4. Contacta heading |
<h5></h5> |
h5. Contacta heading |
<h6></h6> |
h6. Contacta heading |
<!-- Ejemplo 1 -->
<h1>.h1 heading </h1>
<h2>.h1 heading </h2>
<h3>.h1 heading </h3>
<h4>.h1 heading </h4>
<h5>.h1 heading </h5>
<h6>.h1 heading </h6>
Styled headings
Las clases .h1 a .h6 también están disponibles, para cuando desea hacer coincidir el estilo de fuente de un encabezado pero no puede usar el elemento HTML asociado.
Roboto en la segunda version tendra varios fuentes integradas.
h1. Contacta heading
h2. Contacta heading
h3. Contacta heading
h4. Contacta heading
h5. Contacta heading
h6. Contacta heading
<!-- Ejemplo 1 -->
<p class="h1">.h1 Contacta heading </p>
<p class="h2">.h2 Contacta heading </p>
<p class="h3">.h3 Contacta heading </p>
<p class="h4">.h4 Contacta heading </p>
<p class="h5">.h5 Contacta heading </p>
<p class="h6">.h6 Contacta heading </p>
Shadows
Al utilizar el codigo de las sombras, se puede agregar una sombra a la imagen. En el siguiente ejemplo, agregamos la clase
Encabezado De Pantalla Elegante Con Texto Secundario Desvanecido
<!-- Ejemplo 1 -->
<h3>ENCABEZADO DE PANTALLA ELEGANTE
<small class="text-muted"> CON TEXTO SECUNDARIO DESVANECIDO </small>
</h3>
Al agregar la clase .hover-shadow al elemento, puede aplicar un efecto de desplazamiento de sombra.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<!-- codigo Display -->
<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>
Lead
Haga que un párrafo se destaque agregando .lead.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum ad voluptatum, accusantium exercitationem voluptatibus necessitatibus sunt, laudantium culpa illo sequi sit quidem consequuntur praesentium autem saepe. Aperiam quis expedita consequatur.
<!-- Ejemplo 1 -->
<p class="lead">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum ad voluptatum,
accusantium exercitationem voluptatibus necessitatibus sunt,
laudantium culpa illo sequi sit quidem consequuntur praesentium autem saepe. Aperiam quis expedita consequatur.
</p>
Inline text elements
Estilo para elementos HTML5 en línea comunes.
Puede utilizar la etiqueta de marca para destacar el texto.
Esta línea de texto debe tratarse como texto eliminado.
Esta línea de texto se debe de considerar no correcta.
Esta línea de texto debe tratarse como una adición al documento.
Esta línea de texto se mostrará subrayada.
Esta línea de texto debe tratarse como letra pequeña.
Esta línea se representa como texto en negrita.
Esta línea se muestra como texto en cursiva.
<!-- Ejemplo 1 -->
<p> Puede utilizar la etiqueta de marca para <mark> destacar </mark> el texto. </p>
<p> <del> Esta línea de texto debe tratarse como texto eliminado. </del> </p>
<p> <s> Esta línea de texto se debe de considerar no correcta. </s> </p>
<p> <ins> Esta línea de texto debe tratarse como una adición al documento. </ins> </p>
<p> <u> Esta línea de texto se mostrará subrayada. </u> </p>
<p> <small> Esta línea de texto debe tratarse como letra pequeña. </small> </p>
<p> <strong> Esta línea se representa como texto en negrita. </strong> </p>
<p> <em> Esta línea se muestra como texto en cursiva. </em> </p>
Tenga en cuenta que esas etiquetas deben usarse con fines semánticos:
-
<mark>representa texto que está marcado o resaltado con fines de referencia o notación. -
<small>representa comentarios laterales y letra pequeña, como derechos de autor y texto legal. -
<s>representa elementos que ya no son relevantes o ya no son precisos. -
<u>representa un tramo de texto en línea que debe representarse de manera que indique que tiene una anotación no textual.
Notes
Las notas son pequeños componentes muy útiles para insertar información adicional.
<!-- codigo Display -->
<div class="note note-primary mb-3">
<strong> Note Primary: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur,
aliquid atque, culpa inventore obcaecati laborum, molestias ipsum. Quos pariatur sit soluta?
</div>
<div class="note note-secondary mb-3">
<strong> Note Secondary: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur,
aliquid atque, culpa inventore obcaecati laborum, molestias ipsum. Quos pariatur sit soluta?
</div>
<div class="note note-success mb-3">
<strong> Note Success: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
<div class="note note-danger mb-3">
<strong> Note Danger: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
<div class="note note-warning mb-3">
<strong> Note Warning: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
<div class="note note-info mb-3">
<strong> Note Info: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
<div class="note note-light mb-3">
<strong> Note Light: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
<div class="note note-dark mb-3">
<strong> Note Dark: </strong> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptas neque recusandae earum numquam molestiae aut alias dolores tenetur ...
</div>
Abbreviations
abbr elemento para abreviaturas y acrónimos para mostrar la versión ampliada al pasar el mouse.
Las abreviaturas tienen un subrayado predeterminado y obtienen un cursor de ayuda para proporcionar contexto adicional al pasar el mouse y a los usuarios de tecnologías de asistencia.
Agrega .initialism a una abreviatura de un tamaño de fuente ligeramente más pequeño.
attr
HTML
<!-- codigo Shapes -->
<p> <abbr title="atributo"> attr </abbr> </p>
<p> <abbr title="Lenguaje de marcado de hipertexto" class="initialism"> attr </abbr> </p>
Blockquotes
<blockquote class="blockquote"> en cualquier HTML
Agrega .initialism a una abreviatura de un tamaño de fuente ligeramente más pequeño.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas neque recusandae earum numquam.
<!-- codigo Blockquote -->
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas neque recusandae earum numquam.</p>
</blockquote>
Name Resources
<blockquote> . Al proporcionar atribución, envuelva su
<blockquote> en un <figure> y usar un <figcaption> o un elemento a nivel de bloque
( <p> ) con la clase .blockquote-footer, Asegurese de incluir tambien el nombre del trabajo fuente cite
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas neque recusandae earum.
<!-- codigo Blockquote -->
<figure>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</blockquote>
<figcaption class="blockquote-footer">
famous in <cite title="Source Title"> Source Title </cite>
</figcaption>
</figure>
.text-center o .text-end .
With icons
list-unstyled puedes crear listas personalizadas con íconos.
- Cual es la ultima version?
- Cuáles son los cambios de la última versión respecto a la anterior?
- La última versión ya es estable?
<!-- codigo list-unstyled -->
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>Cual es la ultima version?</li>
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>Cuáles son los cambios de la última versión respecto a la anterior?</li>
<li class="mb-1"><i class="fas fa-question-circle me-2 text-warning"></i>La última versión ya es estable?</li>
</ul>
- Ahora es aún más fácil, ligero y mejor
- Documentación mejorada
- Modularidad mejorada
<!-- codigo list-unstyled -->
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Ahora es aún más fácil, ligero y mejor</li>
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Documentación mejorada</li>
<li class="mb-1"><i class="fas fa-long-arrow-alt-right me-2 text-info"></i>Modularidad mejorada</li>
</ul>
- Cientos de componentes de calidad adicionales
- Diseño mucho mejor
- Integraciónes constantes
<!-- codigo list-unstyled -->
<ul class="list-unstyled">
<li class="mb-1"><i class="fas fas fa-check-circle me-2 text-success"></i>Cientos de componentes de calidad adicionales</li>
<li class="mb-1"><i class="fas fas fa-check-circle me-2 text-success"></i>Diseño mucho mejor</li>
<li class="mb-1"><i class="fas fas fa-check-circle me-2 text-success"></i>Integraciónes constantes</li>
</ul>