Elementos básicos de HTML
Bootstrap 3 le aplica estilos a los elementos básicos de HTML como encabezados, párrafos, formularios, tablas, etc. Con sólo incluir Bootstrap en tu página ya vas a ver cambios en la tipografía y otros elementos.

Encabezados

Utiliza los encabezados <h1> a <h6> normalmente en tus páginas.
También puedes utilizar la etiqueta <small> para agregar texto secundario como se muestra en el siguiente ejemplo:

Alineación

Utiliza las clases text-left, text-center, text-right y text-justify en párrafos para alinearlos a la izquierda, centro, derecha y justificados respectivamente.

Tablas

Para aplicarle los estilos de Bootstrap a las tablas debes agregar la clase table:
1
<table class="table">
2
...
3
</table>
Copied!
Veamos un ejemplo que puedes editar para probar diferentes configuraciones:

Tablas con bandas

Agrega la clase table-striped para intercalar el fondo de las filas entre blanco y gris:
1
<table class="table table-striped">
2
...
3
</table>
Copied!

Tablas con bordes

Agrega la clase table-bordered para agregar bordes a la tabla:
1
<table class="table table-bordered">
2
...
3
</table>
Copied!

Resaltar la fila sobre la que pasa el mouse

Utiliza la clase table-hover para que cuando pases el mouse sobre una fila cambie el fondo a gris:
1
<table class="table table-hover">
2
...
3
</table>
Copied!

Filas contextuales

Puedes utilizar las clases active, success, info, warning y danger sobre los <tr>, <th> o <td> para cambiar el color de las filas o celdas:
1
<!-- En filas -->
2
<tr class="active">...</tr>
3
<tr class="success">...</tr>
4
<tr class="warning">...</tr>
5
<tr class="danger">...</tr>
6
<tr class="info">...</tr>
7
8
<!-- En celdas (`td` or `th`) -->
9
<tr>
10
<td class="active">...</td>
11
<td class="success">...</td>
12
<td class="warning">...</td>
13
<td class="danger">...</td>
14
<td class="info">...</td>
15
</tr>
Copied!

Formularios

Bootstrap le aplica algunos estilos a los formularios pero debes seguir la siguiente estructura:
1
<form>
2
<div class="form-group">
3
<label for="nombre">Nombre:</label>
4
<input type="text" id="nombre" class="form-control">
5
</div>
6
<button type="submit" class="btn btn-default">Enviar</button>
7
</form>
Copied!
Para tener en cuenta:
    Encierra los campos de entrada con un div que tenga la clase form-group.
    Agrégale la clase form-control al input.
    Utiliza un <button> con type="submit". En la siguiente sección vamos a hablar más de los botones.
Para los checkboxes utiliza la siguiente estructura:
1
<div class="checkbox">
2
<label>
3
<input type="checkbox"> Check me out
4
</label>
5
</div>
Copied!
Existen muchas variaciones sobre los formularios. Para más información abre la documentación en Bootstrap.

Botones

Agrega la clase btn sobre las etiquetas <a> y <button>, en conjunto con una de las siguientes clases para crear un botón más estilizado: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger o btn-link.
1
<button type="button" class="btn btn-default">Default</button>
Copied!
Veamos un ejemplo con diferentes tipos de botones:

Tamaños

Utiliza las clases btn-lg, btn-sm y btn-xs para cambiar el tamaño del botón.

Mostrar en bloque

Utiliza la clase btn-block para que el botón ocupe el 100% del elemento que lo contiene.

Botones deshabilitados

Agrega la propiedad disabled sobre los <button> y la clase .disabled sobre los <a> para que el botón parezca deshabilitado:
1
<a href="#" class="btn btn-primary disabled">Primary link</a>
Copied!

Imágenes

Para hacer las imágenes responsive agrega la clase img-responsive a <img>:
1
<img src="..." class="img-responsive" alt="Responsive image">
Copied!
Utiliza la clase img-rounded para aplicarle borders redondeados a la imagen:
1
<img src="..." alt="..." class="img-rounded">
Copied!
Utiliza la clase img-circle para que la imagen aparezca en un círculo:
1
<img src="..." alt="..." class="img-circle">
Copied!
Utiliza la clase img-thumbnail para agregarle un bordes redondeados y un borde adicional a la imagen:
1
<img src="..." alt="..." class="img-thumbnail">
Copied!
Last modified 2yr ago