Tipografía Básica

Encabezados

Todos los encabezados HTML,

hasta , están disponibles. .h1 hasta .h6 clases también están disponibles, para cuando quieras que el estilo de fuente coincida con un encabezado pero aún quieres que tu texto se muestre en línea.

h1. Encabezado Bootstrap	Seminegrita 36px
h2. Encabezado Bootstrap	Seminegrita 30px
h3. Encabezado Bootstrap	Seminegrita 24px
h4. Encabezado Bootstrap	Seminegrita 18px
h5. Encabezado Bootstrap	Seminegrita 14px
h6. Encabezado Bootstrap	Seminegrita 12px

h1. Encabezado Bootstrap
h2. Encabezado Bootstrap
h3. Encabezado Bootstrap
h4. Encabezado Bootstrap
h5. Encabezado Bootstrap
h6. Encabezado Bootstrap

Crea texto secundario más claro en cualquier encabezado con una etiqueta genérica o la clase .small.

h1. Encabezado Bootstrap Texto secundario

h2. Encabezado Bootstrap Texto secundario

h3. Encabezado Bootstrap Texto secundario

h4. Encabezado Bootstrap Texto secundario

h5. Encabezado Bootstrap Texto secundario

h6. Encabezado Bootstrap Texto secundario

h1. Encabezado Bootstrap Texto secundario
h2. Encabezado Bootstrap Texto secundario
h3. Encabezado Bootstrap Texto secundario
h4. Encabezado Bootstrap Texto secundario
h5. Encabezado Bootstrap Texto secundario
h6. Encabezado Bootstrap Texto secundario

Texto del cuerpo

El tamaño de fuente global predeterminado de Bootstrap es 14px, con una altura de línea de 1.428. Esto se aplica al y a todos los párrafos. Además,

(párrafos) reciben un margen inferior de la mitad de su altura de línea calculada (10px por defecto).

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

...

Texto destacado del cuerpo

Haz que un párrafo destaque añadiendo .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 class="lead">...

Construido con Less

La escala tipográfica se basa en dos variables LESS en variables.less: @font-size-base y @line-height-base. La primera es el tamaño base de fuente usado en todo el sitio y la segunda es la altura base de línea. Usamos esas variables y algo de matemática simple para crear los márgenes, rellenos y alturas de línea de todo nuestro texto y más. Personalízalas y Bootstrap se adapta.

Énfasis

Utiliza las etiquetas de énfasis predeterminadas de HTML con estilos ligeros.

Texto pequeño

Para des enfatizar texto en línea o bloques de texto, usa la etiqueta para establecer el texto al 85% del tamaño del elemento padre. Los elementos de encabezado reciben su propio tamaño de fuente para elementos anidados.

Alternativamente, puedes usar un elemento en línea con .small en lugar de cualquier

Esta línea de texto está destinada a ser tratada como letra pequeña.

Esta línea de texto está destinada a ser tratada como letra pequeña.

Negrita

Para enfatizar un fragmento de texto con un peso de fuente más fuerte.

El siguiente fragmento de texto está renderizado como texto en negrita.

renderizado como texto en negrita

Cursiva

Para enfatizar un fragmento de texto con cursiva.

El siguiente fragmento de texto está renderizado como texto en cursiva.

renderizado como texto en cursiva

Elementos alternativos

Siéntete libre de usar y en HTML5. está destinado a resaltar palabras o frases sin transmitir importancia adicional mientras que es principalmente para voz, términos técnicos, etc.

Clases de alineación

Realinea fácilmente el texto en componentes con clases de alineación de texto.

Texto alineado a la izquierda.

Texto alineado al centro.

Texto alineado a la derecha.

 class="text-left">Texto alineado a la izquierda.
 class="text-center">Texto alineado al centro.
 class="text-right">Texto alineado a la derecha.

Clases de énfasis

Transmite significado a través del color con un puñado de clases utilitarias de énfasis. Estas también pueden aplicarse a enlaces y se oscurecerán al pasar el cursor, igual que nuestros estilos de enlace predeterminados.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

 class="text-muted">...
 class="text-primary">...
 class="text-success">...
 class="text-info">...
 class="text-warning">...
 class="text-danger">...

Tratando con especificidad

A veces las clases de énfasis no pueden aplicarse debido a la especificidad de otro selector. En la mayoría de los casos, una solución suficiente es envolver tu texto en un con la clase.

Abreviaturas

Implementación estilizada del elemento HTML para abreviaturas y acrónimos para mostrar la versión expandida al pasar el cursor. Las abreviaturas con un atributo title tienen un borde inferior punteado claro y un cursor de ayuda al pasar el cursor, proporcionando contexto adicional.

Abreviatura básica

Para texto expandido al mantener el cursor sobre una abreviatura, incluye el atributo title con el elemento .

Una abreviatura de la palabra atributo es attr.

 title="attribute">attr

Siglas

Agrega .initialism a una abreviatura para un tamaño de fuente ligeramente más pequeño.

HTML es lo mejor desde el pan rebanado.

 title="HyperText Markup Language" class="initialism">HTML

Direcciones

Presenta información de contacto para el ancestro más cercano o para todo el cuerpo del trabajo. Conserva el formato terminando todas las líneas con .

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Nombre completo
first.last@example.com


  Twitter, Inc.

  795 Folsom Ave, Suite 600

  San Francisco, CA 94107

   title="Phone">P: (123) 456-7890



  Nombre completo

   href="mailto:#">first.last@example.com

Citas en bloque

Para citar bloques de contenido de otra fuente dentro de tu documento.

Cita en bloque predeterminada

Envuelve

alrededor de cualquier HTML como la cita. Para comillas rectas, recomendamos un .

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


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

Opciones de cita en bloque

Cambios de estilo y contenido para variaciones simples en un

estándar.

Nombrando una fuenteAgrega la etiqueta o la clase .small.

para identificar la fuente. Envuelve el nombre de la obra fuente en
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Alguien famoso en


  Título de la fuente
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Alguien famoso en title=>"Source Title"

Título de la fuente

Visualizaciones alternativasUsa .pull-right

para una cita en bloque flotada y alineada a la derecha.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Alguien famoso en

 Título de la fuenteclass=>"pull-right"

...

Listas

No ordenadasUna lista de elementos en la que el orden no

importa explícitamente.
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

OrdenadasUna lista de elementos en la que el orden sí

importa explícitamente.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc

...

Eget porttitor lorem

Sin estiloElimina el list-style predeterminado y el margen izquierdo en los elementos de la lista (solo hijos inmediatos). Esto solo se aplica a los elementos hijos inmediatos de la lista

, lo que significa que también deberás agregar la clase para cualquier lista anidada.
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 loremclass=>
  ...

"list-unstyled"

En líneaColoca todos los elementos de la lista en una sola línea con display: inline-block;

y un poco de relleno ligero.
Lorem ipsum
Phasellus iaculis

 Nulla volutpatclass=>
  ...

"list-inline"

Descripción

Una lista de términos con sus descripciones asociadas.: Listas de descripción
Una lista de descripción 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.

Descripción horizontal

Haz que los términos y descripciones en se alineen lado a lado. Comienza apilado como las

predeterminadas, pero cuando la barra de navegación se expande, estas también.: Listas de descripción
Una lista de descripción 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.: Felis euismod semper eget lacinia

 Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.class=>
  ...
  ...

"dl-horizontal"

Auto-truncadoLas listas de descripción horizontales truncarán términos que sean demasiado largos para caber en la columna izquierda con text-overflow

Tablas

Ejemplo básicoPara un estilo básico—relleno ligero y solo divisores horizontales—agrega la clase base .table

 a cualquier

#	. Puede parecer redundante, pero dado el uso generalizado de tablas para otros complementos como calendarios y selectores de fecha, hemos optado por aislar nuestros estilos personalizados de tabla.	Nombre	Apellido
Usuario	1	Mark	Otto
@mdo	2	Jacob	Thornton
@fat	3	Larry	the Bird



@twitterclass=>"table" 



  ...

Filas con rayasUsa .table-striped para agregar rayas a cualquier fila de tabla dentro de 

.
    
Compatibilidad entre navegadoresLas tablas con rayas se estilizan mediante el selector CSS :nth-child





#
, que no está disponible en Internet Explorer 8.
Nombre
Apellido




Usuario
1
Mark
Otto


@mdo
2
Jacob
Thornton


@fat
3
Larry
the Bird





@twitterclass=>"table table-striped" 



  ...

Tabla con bordesAgrega .table-bordered




#
 para bordes en todos los lados de la tabla y las celdas.
Nombre
Apellido




Usuario
1
Mark
Otto


@mdo
Mark
Otto


@TwBootstrap
2
Jacob
Thornton


@fat
3
Larry the Bird





@twitterclass=>"table table-bordered" 



  ...

Filas con efecto hoverAgrega .table-hover para habilitar un estado hover en las filas de la tabla dentro de 




#
.
    
Nombre
Apellido




Usuario
1
Mark
Otto


@mdo
2
Jacob
Thornton


@fat
3
Larry the Bird





@twitterclass=>"table table-hover" 



  ...

Tabla condensadaAgrega .table-condensed




#
 para hacer las tablas más compactas reduciendo a la mitad el relleno de las celdas.
Nombre
Apellido




Usuario
1
Mark
Otto


@mdo
2
Jacob
Thornton


@fat
3
Larry the Bird





@twitterclass=>"table table-condensed" 



  ...

Clases contextuales








Usa clases contextuales para colorear filas de tabla o celdas individuales.
Clase





Descripción

.active



Aplica el color hover a una fila o celda en particular

.success



Indica una acción exitosa o positiva

.warning



Indica una advertencia que podría necesitar atención

.danger








#
Indica una acción peligrosa o potencialmente negativa
Encabezado de columna
Encabezado de columna




Encabezado de columna
1
Contenido de columna
Contenido de columna


Contenido de columna
2
Contenido de columna
Contenido de columna


Contenido de columna
3
Contenido de columna
Contenido de columna


Contenido de columna
4
Contenido de columna
Contenido de columna


Contenido de columna
5
Contenido de columna
Contenido de columna


Contenido de columna
6
Contenido de columna
Contenido de columna


Contenido de columna
7
Contenido de columna
Contenido de columna






 Contenido de columnaclass=>...

 "active"class=>...

 "success"class=>...

 "warning"class=>...




   "danger"class=>...

   "active"class=>...

   "success"class=>...

   "warning"class=>...




"danger"
Tablas responsivasCrea tablas responsivas envolviendo cualquier .table en .table-responsive





#
 para que se desplacen horizontalmente hasta dispositivos pequeños (menos de 768px). Al ver en dispositivos con más de 768px de ancho, no verás diferencia en estas tablas.
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla




Encabezado de tabla
1
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla


Celda de tabla
2
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla


Celda de tabla
3
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla









#
Celda de tabla
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla
Encabezado de tabla




Encabezado de tabla
1
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla


Celda de tabla
2
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla


Celda de tabla
3
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla
Celda de tabla







 Celda de tablaclass=>
  "table-responsive"class=>"table"

Usa clases contextuales para colorear filas de tabla o celdas individuales.	Clase
`Descripción`	.active
`Aplica el color hover a una fila o celda en particular`	.success
`Indica una acción exitosa o positiva`	.warning
`Indica una advertencia que podría necesitar atención`	.danger

#	Indica una acción peligrosa o potencialmente negativa	Encabezado de columna	Encabezado de columna
Encabezado de columna	1	Contenido de columna	Contenido de columna
Contenido de columna	2	Contenido de columna	Contenido de columna
Contenido de columna	3	Contenido de columna	Contenido de columna
Contenido de columna	4	Contenido de columna	Contenido de columna
Contenido de columna	5	Contenido de columna	Contenido de columna
Contenido de columna	6	Contenido de columna	Contenido de columna
Contenido de columna	7	Contenido de columna	Contenido de columna

#	para que se desplacen horizontalmente hasta dispositivos pequeños (menos de 768px). Al ver en dispositivos con más de 768px de ancho, no verás diferencia en estas tablas.	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla	Encabezado de tabla
Encabezado de tabla	1	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
Celda de tabla	2	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla
Celda de tabla	3	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla	Celda de tabla

Tipografía Básica

Encabezados

h1. Encabezado Bootstrap

h2. Encabezado Bootstrap

h3. Encabezado Bootstrap

h4. Encabezado Bootstrap

h5. Encabezado Bootstrap

h6. Encabezado Bootstrap

h1. Encabezado Bootstrap Texto secundario

h2. Encabezado Bootstrap Texto secundario

h3. Encabezado Bootstrap Texto secundario

h4. Encabezado Bootstrap Texto secundario

h5. Encabezado Bootstrap Texto secundario

h6. Encabezado Bootstrap Texto secundario

Texto del cuerpo

Texto destacado del cuerpo

Construido con Less

Énfasis

Texto pequeño

Negrita

Cursiva

Elementos alternativos

Clases de alineación

Clases de énfasis

Tratando con especificidad

Abreviaturas

Abreviatura básica

Siglas

Direcciones

Citas en bloque

Cita en bloque predeterminada

Opciones de cita en bloque

estándar.

Título de la fuente

...

Listas

Eget porttitor lorem

Eget porttitor lorem

"list-unstyled"

"list-inline"

Etiam porta sem malesuada magna mollis euismod.

"dl-horizontal"

. En vistas más estrechas, cambiarán al diseño apilado predeterminado.

Tablas

...

.

...

...

...

...

"danger"