Bootstrap's los ajustes por defecto
Bootstrap's por defecto de tamaño de fuente mundial es 14px, con una línea de altura de 1.428.
Esto se aplica a la <body> y todos los párrafos.
Además, todos los <p> elementos tienen un margen inferior que es igual a la mitad de su line-height computarizada (10px por defecto).
Bootstrap valores predeterminados del navegador vs.
En este capítulo, vamos a ver algunos elementos HTML que ser de estilo un poco diferente por Bootstrap de valores por defecto del navegador.
<h1> - <h6>
De forma predeterminada, Bootstrap estilo de los títulos HTML ( <h1> a <h6> ) de la siguiente manera:
Ejemplo
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Inténtalo tú mismo " <small>
En Bootstrap el código HTML <small> elemento se utiliza para crear un texto secundario del cigarrillo en cualquier partida:
Ejemplo
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
Inténtalo tú mismo " <mark>
Bootstrap será estilo al HTML <mark> elemento de la siguiente manera:
<abbr>
Bootstrap será estilo al HTML <abbr> elemento de la siguiente manera:
<blockquote>
Bootstrap será estilo al HTML <blockquote> elemento de la siguiente manera:
Ejemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Inténtalo tú mismo " Para mostrar la cita en la derecha, utilice el .blockquote-reverse de clase:
Ejemplo
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Inténtalo tú mismo " <dl>
Bootstrap será estilo al HTML <dl> elemento de la siguiente manera:
<code>
Bootstrap será estilo al HTML <code> elemento de la siguiente manera:
Ejemplo
The following HTML elements: span , section , and div defines a section in a document.
Inténtalo tú mismo " <kbd>
Bootstrap será estilo al HTML <kbd> elemento de la siguiente manera:
<pre>
Bootstrap será estilo al HTML <pre> elemento de la siguiente manera:
Ejemplo
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
Inténtalo tú mismo " Colores contextuales y Fondos
Bootstrap también tiene algunas clases contextuales que pueden ser utilizados para proporcionar ", es decir a través de colores".
Las clases para los colores de texto son: .text-muted , .text-primary , .text-success , .text-info , .text-warning , y .text-danger :
Ejemplo
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Inténtalo tú mismo " Las clases para los colores de fondo son: .bg-primary , .bg-success , bg-info , bg-warning , y .bg-danger :
Ejemplo
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Inténtalo tú mismo " Más clases de tipografía
Las clases Bootstrap siguientes se pueden añadir a los elementos HTML estilo adicionales:
| Clase | Descripción | Ejemplo |
|---|---|---|
.lead | Hace que se destaque un párrafo | Intentalo |
.small | Indica texto más pequeño (establecido en 85% del tamaño de la matriz) | Intentalo |
.text-left | Indica el texto alineado a la izquierda | Intentalo |
.text-center | Indica texto centrado | Intentalo |
.text-right | Indica el texto alineado a la derecha | Intentalo |
.text-justify | Indica el texto justificado | Intentalo |
.text-nowrap | Indica que no hay ajuste de texto | Intentalo |
.text-lowercase | Indica el texto en minúsculas | Intentalo |
.text-uppercase | Indica el texto en mayúscula | Intentalo |
.text-capitalize | Indica el texto en mayúsculas | Intentalo |
.initialism | Muestra el texto dentro de un <abbr> elemento en un tamaño de fuente ligeramente más pequeña | Intentalo |
.list-unstyled | Elimina la lista de estilo por defecto y el margen izquierdo de elementos de la lista (funciona en ambos <ul> y <ol> ). Esta clase sólo se aplica a los elementos de la lista hijos inmediatos (para eliminar la lista de estilo por defecto de cualquier lista anidados, aplicar esta clase de listas anidadas también) | Intentalo |
.list-inline | Lugares lista de todos los artículos en una sola línea | Intentalo |
.dl-horizontal | Alinea los términos ( <dt> ) y descripciones ( <dd> ) en <dl> elementos de lado a lado. Empieza como predeterminado <dl> s, pero cuando la ventana del navegador se expande alinearse lado a lado | Intentalo |
.pre-scrollable | Hace un <pre> elemento desplazable | Intentalo |
Completar Bootstrap de la tipografía de referencia
Para una referencia completa de todos los elementos / tipografía clases, ir a nuestra completa Bootstrap de la tipografía de referencia .
Busque también en nuestra Bootstrap clases de referencia ayudante para obtener más información acerca de las clases de contexto.