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.
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: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.Para aplicarle los estilos de Bootstrap a las tablas debes agregar la clase
table
:<table class="table">
...
</table>
Veamos un ejemplo que puedes editar para probar diferentes configuraciones:
Agrega la clase
table-striped
para intercalar el fondo de las filas entre blanco y gris:<table class="table table-striped">
...
</table>
Agrega la clase
table-bordered
para agregar bordes a la tabla:<table class="table table-bordered">
...
</table>
Utiliza la clase
table-hover
para que cuando pases el mouse sobre una fila cambie el fondo a gris:<table class="table table-hover">
...
</table>
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:<!-- En filas -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- En celdas (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
Bootstrap le aplica algunos estilos a los formularios pero debes seguir la siguiente estructura:
<form>
<div class="form-group">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" class="form-control">
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Para tener en cuenta:
- Encierra los campos de entrada con un
div
que tenga la claseform-group
. - Agrégale la clase
form-control
alinput
. - Utiliza un
<button>
contype="submit"
. En la siguiente sección vamos a hablar más de los botones.
Para los checkboxes utiliza la siguiente estructura:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
Existen muchas variaciones sobre los formularios. Para más información abre la documentación en Bootstrap.
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
.<button type="button" class="btn btn-default">Default</button>
Veamos un ejemplo con diferentes tipos de botones:
Utiliza las clases
btn-lg
, btn-sm
y btn-xs
para cambiar el tamaño del botón.Utiliza la clase
btn-block
para que el botón ocupe el 100% del elemento que lo contiene.Agrega la propiedad
disabled
sobre los <button>
y la clase .disabled
sobre los <a>
para que el botón parezca deshabilitado:<a href="#" class="btn btn-primary disabled">Primary link</a>
Para hacer las imágenes responsive agrega la clase
img-responsive
a <img>
:<img src="..." class="img-responsive" alt="Responsive image">
Utiliza la clase
img-rounded
para aplicarle borders redondeados a la imagen:<img src="..." alt="..." class="img-rounded">
Utiliza la clase
img-circle
para que la imagen aparezca en un círculo:<img src="..." alt="..." class="img-circle">
Utiliza la clase
img-thumbnail
para agregarle un bordes redondeados y un borde adicional a la imagen:<img src="..." alt="..." class="img-thumbnail">
Last modified 2mo ago