Elementos

.small
.lead
.mark or <mark>..</mark>
<del>..</del>
<s>..</s>
<ins>..</ins>
<u>..</u>
<strong>..</strong>
<em>..</em>
.text-right
.text-left
.text-center
.text-justify
.text-lowercase
.text-uppercase
.text-capitalized
<abbr>..</abbr>
.initialism
<address>..</address>
<blockquote>.. <blockquote>
<small>..</samll>
.list-inline
<dl>..</dl>
.dl-horizontal
<code>..</code>

Descripcin
TIPOGRAFIA
Ajusta el texto a un 85% referente al elemento padre
Ajusta el texto destacndolo con respecto a los dems del mismo elemento
Resalta el texto indicado
Tacha el Texto seleccionado indicando TEXTO ELIMINADO
Tacha el texto seleccionado indicando TEXTO NO RELEVANTE
Subraya el texto indicando TEXTO INSERTADO
Subraya el texto indicado TEXTO SUBRAYADO
Coloca en NEGRITA el texto seleccionado
Coloca en CURSIVA el texto seleccionado
Alinea el texto desde la DERECHA
Alinea el texto desde la IZQUIERDA
Alinea el texto en el CENTRO
Alinea el texto JUSTIFICADO
Ajusta todo el texto a MINUSCULA
Ajusta todo el texto a MAYUSCULA
Ajusta todo el texto a Poner En Mayscula Cada Palabra
Elemento el cual indica una abreviatura subrayando la palabra y cambiando el cursor en hover. A
este elemento se le puede agregar el tributo TITLE
Esta clase es para denotar una sigla de iniciales, se agrega en la etiqueta <abbr>
Presenta informacin de contacto
Indica contenido de otra fuente, se recomienda encerrar el prrafo en <p>
Bootstrap 3 le aade una fuente, color y tamao especial al elemento small, es indicado para
agregar el autor de la fuente referenciada
Ajusta los elementos de una lista en una sola lnea (horizontal)
Agrupa una descripcin
Ajusta los tems de la descripcin de manera horizontal
Indica fragmentos de cdigo

<kbd>..</kbd>
<pre>..</pre>
. pre-scrollable
<samp>..</samp>
<var>..</var>
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
.btn-lg
.btn-sm
.btn-xs
.btn-block
.btn-active
.btn-group
.btn-group-vertical
.btn-group-justified

.form-inline
.form-horizontal
.form-control
.form-group

Indica un texto como entrada que se introduce en el teclado (Ej: ctrl + p)

Indica mltiples lneas de cdigo
Con esta clase dentro del elemento pre proporciona una barrar de desplazamiento
Indica ejemplo de un texto salido de un programa de ordenador (Ej: cmd)
Indica variable
BOTONES
Genera un botn (siempre se utiliza esta clase y se le aaden las dems)
Agrega un botn predeterminado (fondo transparente)
Proporciona peso visual e identifica a un botn como principal (botn azul)
Indica una accin exitosa o positiva (botn verde)
Indica botn de ms informacin ( botn azul claro)
Indica que se debe tener cuidado (botn anaranjado)
Indica una accin peligrosa (botn rojo)
Indica un enlace a otra web pero sigue siendo un botn (link)
Hace el botn grande
Hace el botn mediano
Hace el botn pequeo
Hace el botn del total de 12 columnas
Le da un aspecto de sombreado interno
Agrupa cierta cantidad de botones
Forma un grupo de botones verticales. Esta clase se agrega en el div contenedor de todos los
botones
Agrupa los botones justificados para que puedan ocupar el 100% del ancho. SOLO FUNCIONAN
ELEMENTOS a dentro del div contenedor de esta clase ya que reconoce los elementos button
FORMULARIOS
Crea un formulario en lnea ubicado desde la izquierda. (clase solo para <form> )
Crea un formulario de lineal (input y label) de manera horizontal
Establece la anchura width al 100% <textarea> , <input> y <select>.
Optimiza el espaciado de cada cuadro de texto. Se coloca en el div contenedor del label y el imput

Type=file
.checkbox
.radio
.checkbox-inline o
.radio-inline
<select>..</select>
<option>..</<option>
.form-control
multiple class="form-control"
form-control-static
.has-success
.has-warning
.has-error
.input-lg
.input-sm
.help-block
.input-group

.input-group-addon
.input-group-btn

Este atributo se agrega al input que sube una imagen desde el equipo
Esta clase permite seleccionar varias opciones (cuadritos). Se coloca en el div contenedor de la
opcin
Esta opcion permite seleccionar SOLO UNA opcion (crculos). Se coloca en el div contenedor de la
opcin
Ajusta los checkboxes y los radio buttons en forma horizontal. Se agrega en cada label
Crea una LISTA desplegable
En option se encuentran las opciones de la lista desplegable
Se le agrega a las listas desplegables
Se le agrega a las listas con barra de movimiento
Se agrega en un <p> y muestra los campos no editables de valores fijos
Modifica el campo como CORRECTO. Es recomendable agregar esta clase junto con .controllabel, .form-control .form-group y .help-block.
Modifica el campo como ADVERTENCIA. Es recomendable agregar esta clase junto con .controllabel, .form-control .form-group y .help-block.
Modifica el campo como ERRONEO. Es recomendable agregar esta clase junto con .controllabel, .form-control .form-group y .help-block.
Ajusta el tamao del input GRANDE
Ajusta el tamao del input PEQUEO
Se agrega en un <span> debajo del input para indicar ayuda del campo de formulario
Esta clase agrupa muchos ms elementos que permiten crear una seccin o botn al principio o al
final del recuadro de input. Esta clase se ubica en el div contenedor de la barra que se desea
agregar
Esta clase va ubicada una lnea antes del input para estar AL COMIENZO o despus del input
para estar AL FINAL de la barra del input.
Funciona para agregar un botn al principio o al final de la barra del input. Se ubica en el div
contenedor de los ajustes del botn (normal o desplegable)

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.pull-left
.pull-right
.show
.hidden
.list-unstyled
.img-rounded
.img-circle
.img-thumbnail
.img-responsive

COLOR DEL TEXTO

El texto seleccionado se pone GRIS
El texto seleccionado se pone AZUL
El texto seleccionado se pone VERDE
El texto seleccionado se pone AZUL CLARO
El texto seleccionado se pone AMARILLO
El texto seleccionado se pone ROJO
COLOR DEL FONDO
El fondo de la palabra seleccionada se pone AZUL
El fondo de la palabra seleccionada se pone VERDE
El fondo de la palabra seleccionada se pone AZUL CLARO
El fondo de la palabra seleccionada se pone AMARILLO
El fondo de la palabra seleccionada se pone ROJO
OTRAS REFERENCIAS
En una misma lnea coloca este texto seleccionado ubicado en la IZQUIERDA
En una misma lnea coloca este texto seleccionado ubicado en la DERECHA
Fuerza a un elemento ser mostrado
Fuerza a un elemento a ser oculto
Crea listas sin vietas ni numeracin. Esta clase se ubica en el <ul> de la lista
IMAGENES
Agrega esquinas redondeadas a las imgenes
Agrega esquinas ms redondeadas hasta llegar a un circulo en la imagen
Forma una miniatura de la imagen
Aplica responsive segn el elemento padre
TABLAS

<table>
.table
.table-striped
.table-bordered

Aade estilo bsico a una tabla

Aade lneas
Aade borde en todos los lados

.table-hover
.table-condensed
.table-responsive
.active .success .warning
.danger
<tr>, <th> or <td>
.active
.success
.info
.warning
.danger
Table-responsive
.glyphicon
.close aria-hidden="true"
.dropdown
.dropup
.dropdown-toggle
data-toggle="dropdown"
.caret
.dropdown-menu
.divider
.dropdown-header
.disabled

Cambia de color al pasar el mouse (hover)

Hace la tabla ms compacta
Se aade una barra desplazadora cuando se comprime la pgina (responsive). Esta se agrega en
el div contenedor de la tabla
Se le puede agregar la clase simantica a las filas de la tabla

Color de fondo para una fila o columna en especfico AMARILLO PASTEL

Color de fondo para una fila o columna en especfico VERDE PASTEL
Color de fondo para una fila o columna en especfico AZUL PASTEL
Color de fondo para una fila o columna en especfico BEISH PASTEL
Color de fondo para una fila o columna en especfico ROSADO PASTEL
Hace la tabla responsive
ICONOS
Agrega la opcin de los iconos, seguido a esta clase se debe colocar la clase del icono que se
desea colocar
Esta clase aade un botn de cierre como el de las aplicaciones
MENU DESPLEGABLE
Indica que ese div contenedor ser un men desplegable hacia ABAJO
Indica que ese div contenedor ser un men desplegable hacia ARRIBA
Se coloca en botones o en enlaces para definir que ese elemento ser el men desplegable
Este atributo debe ir acompaado de la clase anterior.
Esta clase va dentro de un span. Es la flechita indicando que hacia debajo se despliega el menu
Esta clase se coloca dentro de la <ul> es la que realmente construir el men desplegable
Esta clase crea una lnea fina dentro del men desplegable, lo que significa que esta opcin
pertenece a otra seccin. Esta va dentro de un <li> solo
Crea un encabezado (con tamao y color de fuente diferente) dentro del menu desplegable. Esta
va en el <li> del ttulo de encabezado
Deshabilita una opcin (<li>) del men desplegable

.dropdown-menu- right/left
.nav .nav-tabs
.nav .nav-pills
.nav-stacked
.nav-justified
.disabled
data-toggle="tab"
.tab-content
.tab-pane fade
.breadcrumb
.pager
.previous
.next
.disabled
.pagination
.pagination-lg
.pagination-sm
.disabled
.active

Despliega la lista en la posicin derecha o izquierda. Esta clase va dentro del <ul>
BARRA DE NAVEGACIN
La clase nav es obligatoria para poder crear barras de navegacin. La nav-tabs crea barras tipo
fichas
La clase nav es obligatoria para poder crear barras de navegacin. La nav-pills crea barras tipo
boton
Cualquiera de las dos clases anteriores son OBLIGATORIAS. Esta clase nav-stacked crea las
barras de navegacin de forma VERTICAL
Hace que las barras de navegacin sean responsive, cuando se ve desde un dispositivo pequeo
las barras se apilan (vertical)
Indica un elemento de la barra no disponible
Se coloca en cada <a> para agregar el link del contenido agregado de href
Se le agrega al div del contenido de los elementos de la BN
SIEMPRE va en cada div contenedor de la informacin de la BN
OTRAS CLASES PARA BARRA DE NAVEGACIN
Crea una lista jerrquica de la ubicacin de la pgina web (EJ: Home/Pagina 1/Pagina 2)
Agrega las opciones ANTERIOR y SIGUIENTE de la pgina. Se colocan en las <ul> de la lista.
Esta clase se agrega en las <il> dentro de .pager para crear el link ANTERIOR y la alinea hacia la
IZQUIERDA
Esta clase se agrega en las <il> dentro de .pager para crear el link SIGUIENTE y la alinea hacia la
DERECHA
Indica un link inhabilitado
Crea enlaces numricos de pginas desde la flecha anterior hasta la siguiente, esta clase se
agrega al <ul> (ej: < 1 2 3 4 > ). Su tamao es MEDIUM
Se agrega a .pagination para declarar que la paginacin es de tamao GRANDE
Se agrega a .pagination para declarar que la paginacin es de tamao PEQUEA
Indica una paginacion inhabilitada
Aplica un fondo a la paginacin que se presente

.label .label-default
.label .label-primary
.label .label-success
.label .label-info
.label .label-warning
.label .label-danger
.badge
.jumbotron
.container

Inserta una etiqueta dentro de un elemento (parecido a un botn) color GRIS

Color AZUL
Color VERDE
Color AZUL CLARO
Color ANARANJADO
Color ROJO
Este selector indica los elementos nuevos o no ledos (Ej: indicador de msj no ledos). Esta clase
se lleva de la mano con el elemento empty de CSS
Crea una caja grande para resaltar informacin
Anidando el div de clase jumbotron con un div de clase container ajusta la caja al 100%.
REJILLAS

Siempre se debe anidar un div clase .row para declarar el tamao de las columnas
Dispositivos muy pequeos Dispositivos pequeos Tablet
Dispositivos medianos.
Telfonos (<768px)
(768px)
ordenadores (<992px)

.col-xs- *
.row

.alert
.alert-success
.alert-info
.alert-warning
.alert-danger
.alert-link
.panel
.panel-*

Dispositivos grandes
ordenadores (<1200px)

.col-sm- *
.col-md- *
.col-lg- *
Esta clase se aade a un div para comenzar a trabajar con las rejillas. Si aado un div clase .row
dentro de un div clase .col-X-* anido columnas dentro de otras
VALIDACION
Genera un mensaje de alerta. Esta clase encierra en un div todo el contenido de alerta que se
desea generar. Esta clase va acompaada obligatoriamente de cualquiera de las alert-* siguientes
Genera mensaje de ALERTA
Genera mensaje de ALERTA
Genera mensaje de ALERTA
Genera mensaje de ALERTA
Se agrega a las <a> dentro de los div de alert para generar un link dentro del mismo
PANELES
Colocando esta clase en un div se puede crear un panel encerrando todo en el div
Con esta clase hay opcin para default, success, info, warning y danger para crear paneles de
diferentes diseos. Esta clase OBLIGATORIAMENTE va junto con .panel

.panel-heading
.panel-body
.panel-footer
.panel-group

.affix
data-spy="affix"
data-offset-top|
bottom="number"
.affix({ })

Crea una cabecera en el panel, por lo general aca se encuentra el ttulo. Se puede agregar entre
el div o aadiendo <h1> - <h6> con la clase .panel-title
Crea el cuerpo del panel, por lo general ac va el contenido
Crea una seccin inferior donde se alojan los botones de accin o cualquier informacin no tan
importante
Conjunto de paneles

PLUGIN: AFFIX
Este plugins me permite posicionar un elemento fijo en la pantalla mientras el scroll sube y baja
ATRIBUTO: fija el elemento seleccionado (Ej: una lista <ul>)
ATRIBUTO: este atributo va acompaado del anterior, number lo que indica es la posicin donde
se detendr al bajar el scroll
SCRIPT: declara que el elemento $(X) se fijara en pantalla. Si lo declaro offset:{} le estoy
diciendo que la posicin tiene un numero de pixeles de abajo hacia arriba o viceversa