Todos los encabezados HTML, <h1> a través de <h6>están disponibles.
| Título | Ejemplo |
|---|---|
|
|
h1. Encabezado Bootstrap |
|
|
h2. Encabezado Bootstrap |
|
|
h3. Encabezado Bootstrap |
|
|
h4. Encabezado Bootstrap |
|
|
h5. Encabezado Bootstrap |
|
|
h6. Encabezado Bootstrap |
.h1 a .h6 , para cuando se desea que el estilo de fuente coincida con el de un encabezado, pero no se puede utilizar el elemento HTML asociado.
h1. Encabezado Bootstrap
h2. Encabezado Bootstrap
h3. Encabezado Bootstrap
h4. Encabezado Bootstrap
h5. Encabezado Bootstrap
h6. Encabezado Bootstrap
Utilice las clases de utilidad incluidas para recrear el texto del encabezado secundario pequeño de Bootstrap 3.
Los encabezados tradicionales están diseñados para funcionar mejor en el cuerpo del contenido de tu página. Si necesitas que un encabezado destaque, considera usar un encabezado de visualización: un estilo de encabezado más grande y con un mensaje más contundente.
| Pantalla 1 |
| Pantalla 2 |
| Pantalla 3 |
| Pantalla 4 |
Haz que un párrafo destaque añadiendo .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo uctus.
Estilo para elementos HTML5 en línea comunes.
Puedes usar la etiqueta de marca para destacar texto.
Esta línea de texto debe tratarse como texto eliminado.
Esta línea de texto debe considerarse obsoleta.
Esta línea de texto debe considerarse como una adición al documento.
Esta línea de texto aparecerá subrayada
Esta línea de texto debe considerarse como letra pequeña.
Esta línea se muestra en negrita.
Esta línea se muestra en cursiva.
.mark y .small también están disponibles para aplicar los mismos estilos que <mark> y <small> evitando al mismo tiempo cualquier implicación semántica no deseada que pudieran conllevar las etiquetas.
Aunque no se muestra arriba, siéntase libre de usar <b> y <i> en HTML5. <b> está pensado para resaltar palabras u oraciones sin transmitir importancia adicional, mientras que <i> es principalmente para voz, términos técnicos, etc.
Cambia la alineación, la transformación, el estilo, el grosor y el color del texto con nuestras utilidades de texto y de color.
Implementación estilizada del <abbr> elemento HTML para abreviaturas y acrónimos que muestra la versión completa al pasar el cursor por encima. Las abreviaturas tienen un subrayado predeterminado y un cursor de ayuda que proporciona contexto adicional al pasar el cursor por encima y a los usuarios de tecnologías de asistencia.
Añade .initialism a una abreviatura para obtener un tamaño de fuente ligeramente menor.
atraer
HTML
Para citar bloques de contenido de otra fuente dentro de su documento. <blockquote class="blockquote"> alrededor de cualquier HTML como la cita.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. La pose de números enteros era una apuesta inicial.
Agregar un <footer class="blockquote-footer"> para identificar la fuente. Encierre el nombre de la obra fuente entre comillas simples <cite>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. La pose de números enteros era una apuesta inicial.
Utilice las utilidades de texto según sea necesario para cambiar la alineación de su cita.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. La pose de números enteros era una apuesta inicial.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. La pose de números enteros era una apuesta inicial.
Elimina el estilo de lista y el margen izquierdo de los elementos de la lista (solo los elementos secundarios inmediatos). Esto solo se aplica a los elementos secundarios inmediatos de la lista; es decir, también deberás agregar la clase para las listas anidadas.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Entero molestie lorem en masa
- Facilisis en pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Actuar tristique libero volutpat en
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Elimine las viñetas de una lista y aplique un margen con una combinación de dos clases: .list-inline y .list-inline-item.
- Lorem ipsum
- Phasellus iaculis
- Nulla volutpat
Alinee términos y descripciones horizontalmente utilizando las clases predefinidas (o mixins semánticos) de nuestro sistema de cuadrícula. Para términos más largos, puede agregar opcionalmente la .text-truncate para truncar el texto con puntos suspensivos.
- Listas de descripción
- Una lista descriptiva es perfecta para definir términos.
- Euismod
-
Vestibulum id ligula porta felis euismod semper 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 término "truncado" es "truncado"
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Anidación
-
- Lista de definiciones anidadas
- Enean posere, tortor sed cursus feugiat, nunc augue blandit nunc.
La tipografía responsiva del elemento raíz tamaño de fuente a través de una serie de consultas de medios. Bootstrap no realiza esta función automáticamente, pero es bastante fácil de añadir si la necesitas.
Aquí tienes un ejemplo práctico. Elige el tamaño de fuentey las consultas de medios que desees.
Realinee fácilmente el texto con los componentes mediante clases de alineación de texto.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Por tanto, sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. En nuestro hinc posthac, sitentis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indir. Cras mattis iudicium purus sit amet fermentum.
Para la alineación a la izquierda, a la derecha y al centro, hay disponibles clases responsivas que utilizan los mismos puntos de interrupción de ancho de ventana gráfica que el sistema de cuadrícula.
Texto alineado a la izquierda en todos los tamaños de ventana gráfica.
Texto centrado en todos los tamaños de ventana gráfica.
Texto alineado a la derecha en todos los tamaños de ventana gráfica.
Texto alineado a la izquierda en ventanas gráficas de tamaño SM (pequeño) o más anchas.
Texto alineado a la izquierda en ventanas gráficas de tamaño MD (mediano) o más anchas.
Texto alineado a la izquierda en ventanas gráficas de tamaño LG (grande) o más anchas.
Texto alineado a la izquierda en ventanas gráficas de tamaño XL (extragrande) o más anchas.
Evita que el texto se ajuste automáticamente con la .text-nowrap .
Para contenido más largo, puede agregar una .text-truncate para truncar el texto con puntos suspensivos. Requiere display: inline-block o display: block.
Transforma el texto en componentes con clases de mayúsculas y minúsculas.
Texto en minúsculas.
Texto en mayúsculas.
Texto en mayúsculas.
Observe cómo la opción text-capitalize solo cambia la primera letra de cada palabra, sin afectar las mayúsculas ni minúsculas de las demás letras.
Cambia rápidamente el grosor (negrita) del texto o lo pone en cursiva.
Texto en negrita.
Texto de grosor normal.
Texto ligero.
Texto en cursiva.
.texto-primario
.texto-secundario
.texto-éxito
.texto-peligro
.text-advertencia
.text-info
.text-light
.texto-oscuro
.texto-silenciado
.texto-blanco
Las clases de texto contextual también funcionan bien en los enlaces con los estados de desplazamiento y enfoque proporcionados. Tenga en cuenta que las .text-white y .text-muted no tienen estilo de enlace.
De forma similar a las clases de color de texto contextuales, es fácil establecer el fondo de un elemento con cualquier clase contextual. Los componentes de anclaje se oscurecerán al pasar el cursor, al igual que las clases de texto. Las utilidades de fondo no establecen el color, por lo que en algunos casos será necesario usar .text-* .
Abordar la especificidad
A veces, las clases contextuales no se pueden aplicar debido a la especificidad de otro selector. En algunos casos, una solución alternativa suficiente es envolver el contenido de su elemento en un <div> con la clase.
Transmitir significado a las tecnologías de asistencia
El uso del color para añadir significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información representada por el color sea evidente a partir del propio contenido (por ejemplo, el texto visible) o que se incluya mediante otros medios, como texto adicional oculto con la .sr-only clase
