Introduccion A Bootstrap
Introduccion A Bootstrap
Introduccion A Bootstrap
CONTENIDOS DE BOOTSTRAP
Bootstrap se puede descargar de dos maneras, compilado o mediante el cdigo fiente original. Dependiendo de la
forma que hayas elegido, vers una estructura de directorios u otra. En esta seccin se muestran los detalles de cada
una de ellas.
Advertencia Todos los plugins JavaScript de Bootstrap requieren la librera jQuery para funcionar, por lo que debers
incluirlo en tus plantillas, tal y como se muestra en los ejemplos de las siguientes secciones
Estos archivos son la forma ms sencilla de utilizar Bootstrap en cualquier proyecto web. Para cada archivo se
ofrecen dos variantes: los archivos compilados (cuyo nombre es bootstrap.*) y los archivos compilados +
comprimidos (cuyo nombre es bootstrap.min.*). Tambin se incluyen las fuentes de los iconos del proyecto
Glyphicons y el tema opcional de Bootstrap.
Accesibilidad
Bootstrap 3 utiliza los estndares web de tal forma que con muy poco esfuerzo se pueden crear sitios web accesibles
para personas que utilizan tecnologas de apoyo para navegar.
Cabeceras anidadas
Otro posible problema con la accesibilidad se produce al anidar elementos <header> para crear cabeceras. Las
recomendaciones de accesibilidad indican que el ttulo principal debe ser de tipo <h1>, los siguientes ttulos de tipo
<h2>, etc. En la prctica no es fcil conseguir siempre esta jerarqua de ttulos. Si tu ttulo principal es menor que los
38px que aplica por defecto Bootstrap, deberas modificar tus estilos CSS antes que utilizar unos ttulos de menor
importancia.
Personalizando Bootstrap
La forma ms sencilla de personalizar Bootstrap es tratarlo de la misma manera que cualquier otra dependencia de
tu proyecto. De esta forma, cuando Bootstrap publique una actualizacin, ser muy sencillo incorporar esos cambios
en tus proyectos.
Una vez descargado Bootstrap y enlazado su archivo CSS en tus plantillas, ya puedes personalizar el aspecto y el
comportamiento de sus componentes. Para ello, crea una nueva hoja de estilos (en formato LESS o, si lo prefieres,
directamente con CSS) para definir tus cambios.
A menos que tengas que estudiar sus contenidos, siempre es mejor utilizar la versin comprimida
(bootstrap.min.css) en vez de la versin simplemente compilada (bootstrap.css).
Los contenidos de los dos archivos son exactamente los mismos, pero la versin comprimida ocupa muchsimo
menos. De esta forma consumirs menos ancho de banda y las pginas se cargarn ms rpido, especialmente en los
servidores de produccin.
Despus de crear esta hoja de estilos propia, ya puedes incluir todos los componentes de Bootstrap y cdigo HTML
que quieras para crear tus plantillas.
/* Botn propio
-------------------------------------------------- */
/* Redefine los estilos de .btn */
/* Modificar el texto y el color de fondo en los tres estados
principales del botn: default, hover y active. */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #007da7;
}
/* Aplicar gradientes de colores */
/* Nota: no se muestran aqu todos los gradientes que tendrs que
definir para los diferentes navegadores. */
.btn-ttc {
background-repeat: repeat-x;
background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
...
}
/* Estilos del estado :hover del botn */
/* Uno de los estilos ms sencillos y eficaces para el estado :hover
consiste en subir hacia arriba ligeramente la imagen de fondo del
botn, pero puedes definir otros estilos adicionales si quieres. */
.btn-ttc:hover {
background-position: 0 -15px;
}
Personalizar el diseo de los componentes de Bootstrap lleva su tiempo, pero es bastante sencillo. Te aconsejamos
que mires el cdigo fuente de Bootstrap y copies los selectores del elemento que quieres modificar. Pega estos
selectores despus de todo el cdigo de Bootstrap y as habrs redefinido los estilos de ese componente fcilmente.
A modo de resumen, este es el flujo de trabajo recomendado:
Para cada componente que quieras modificar, busca sus estilos en el archivo CSS compilado de Bootstrap.
Copia y pega todos los selectores de ese elemento. Para personalizar por ejemplo la imagen o color de fondo
de la barra de navegacin, copia el selector .navbar.
Aade todo tu cdigo CSS en una hoja de estilos independiente, utilizando los selectores que has copiado
anteriormente. De esta forma no es necesario que aadas ms clases a tus selectores o que utilices la
palabra clave !important en las declaraciones de tus estilos.
Repite este proceso para todos los componentes que quieras personalizar.
Modificar completamente el diseo grfico de un componente es igual de sencillo, pero cuesta muchsimo ms
tiempo. Observa el cdigo del sitio Karma para ver un ejemplo de personalizacin avanzada de Bootstrap.
https://www.yourkarma.com/
<!DOCTYPE html>
<html lang="es">
...
</html>
El mvil es lo ms importante
Bootstrap 2 inclua algunas utilidades para hacer que las pginas se adaptaran a los dispositivos mviles. Bootstrap 3
se ha creado desde cero pensando en los mviles. As que en vez de incluir algunos estilos opcionales para mviles,
todo eso ya est incluido en el propio Bootstrap. Para Bootstrap 3, los dispositivos mviles son lo ms importante.
Para que las pginas se muestren correctamente y el zoom funcione bien en los dispositivos mviles, es importante
que aadas la siguiente etiqueta dentro de la cabecera <head> de las pginas:
Imgenes responsive
Bootstrap 3 ya no adapta el tamao de las imgenes automticamente como suceda en Bootstrap 2. Para mantener
el mismo comportamiento de antes, debes aadir la clase .img-responsive a cada imagen que quieras que se
comporte de manera responsive. Esta clase incluye las propiedades max-width: 100%; y height: auto; para que la
imagen escale en funcin del tamao del elemento en el que se encuentra.
<img src="..." class="img-responsive" alt="Imagen responsive">
Tipografa y enlaces
Bootstrap establece una serie de estilos por defecto para la tipografa de todos los elementos y para los enlaces de la
pgina. En concreto:
Se establece a blanco el color de fondo del body con la propiedad background-color: white;
Se utiliza el valor de las variables @font-family-base, @font-size-base y @line-height-base definidas por LESS
como atributos de las propiedades tipogrficas de los elementos.
Se establece el color de los enlaces al valor de la variable @link-color de LESS y slo se muestran los enlaces
subrayados en el estado :hover
Normalizacin de estilos
Para homogeneizar los estilos iniciales en los diferentes navegadores, Bootstrap utiliza la hoja de estilos Normalize,
que es un proyecto creado por Nicolas Gallagher y Jonathan Neal.
<div class="container">
...
</div>
La anchura del contenedor vara en cada punto de ruptura del diseo para adaptarse a la rejilla. Los contenedores no
se pueden anidar debido a la propiedad padding y a su anchura fija.
2 Tipos de rejillas
Bootstrap incluye una rejila o retcula fluda pensada para mviles y que cumple con el diseo web responsive. Esta
retcula crece hasta 12 columnas a medida que crece el tamao de la pantalla del dispositivo. Bootstrap incluye
clases CSS para utilizar la rejilla directamente en tus diseos y tambin define mixins de LESS para que puedas crear
diseos ms semnticos.
Introduccin
El diseo de pginas basado en rejilla se realiza mediante filas y columnas donde se colocan los contenidos. As
funciona la rejilla de Bootstrap:
Las filas siempre se definen dentro de un contenedor de tipo .container (anchura fija) o de tipo .containerfluid (anchura variable). De esta forma las filas se alinean bien y muestran el padding correcto.
Las filas se utilizan para agrupar horizontalmente a varias columnas.
El contenido siempre se coloca dentro de las columnas, ya que las filas slo deberan contener como hijos
elementos de tipo columna.
Bootstrap define muchas clases CSS (como por ejemplo .row y .col-xs-4) para crear rejillas rpidamente.
Tambin existen mixins de Less para crear diseos ms semnticos.
La separacin entre columnas se realiza aplicando padding. Para contrarrestar sus efectos en la primera y
ltima columnas, las filas (elementos .row) aplican mrgenes negativos.
Las columnas de la rejilla definen su anchura especificando cuntas de las 12 columnas de la fila ocupan. Si
por ejemplo quieres dividir una fila en tres columnas iguales, utilizaras la clase .col-xs-4 (el 4 indica que cada
columna ocupa 4 de las 12 columnas en las que se divide cada fila).
Media queries
Bootstrap utiliza las siguientes media queries para establecer los diferentes puntos de ruptura en los que la rejilla se
transforma para adaptarse a cada dispositivo.
/* Dispositivos muy pequeos (telfonos de hasta 768px de anchura) */
/* No se define ninguna media query porque este es el estilo por
defecto utilizado por Bootstrap 3 */
/* Dispositivos pequeos (tablets, anchura mayor o igual a 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Dispositivos medianos (ordenadores, anchura mayor o igual a 992px) */
@media (min-width: @screen-md-min) { ... }
/* Dispositivos grandes (ordenadores, anchura mayor o igual a 1200px) */
@media (min-width: @screen-lg-min) { ... }
En ocasiones, tambin se utilizan las siguientes media queries que definen la propiedad max-width y permiten
restringir los dispositivos a los que se aplican los estilos CSS:
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Cdigo opcional para limpiar las columnas XS en caso de que el contenido de todas las columnas no coincida en
altura -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>
Reseteando columnas
Como las rejillas de Bootstrap tienen cuatro puntos de ruptura en los que las columnas se reordenan, es casi seguro
que te vas a encontrar con problemas cuando las columnas tengan diferente altura. Para solucionarlo, utiliza la clase
.clearfix combinndola con alguna de las clases auxiliares tipo .visible-xs:
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- La clase 'clearfix' slo se aplica cuando el dispositivo sea muy pequeo, tal y como indica la clase 'visible-xs' -->
<div class="clearfix visible-xs">
</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Tambin es posible que en ocasiones necesites resetear los desplazamientos de las columnas. Las clases que
resetean estos valores slo estn disponibles para los dispositivos medianos y grandes, que los desplazamientos slo
funcionan en esos dispositivos.
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset0</div></div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6
.col-lg-offset-0</div>
</div>
Desplazando columnas
Aade la clase .col-md-offset-* para desplazar cualquier columna hacia su derecha. Estas clases aumentan el tamao
del margen izquierdo de la columna en una cantidad equivalente a esas * columnas. La clase .col-md-offset-4 por
ejemplo desplaza la columna una anchura equivalente a 4 columnas.
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
Anidando columnas
Bootsrap 3 tambin permite anidar columnas dentro de otras columnas. Para ello, dentro de una columna con la
clase col-md-* crea un nuevo elemento con la clase .row y aade una o ms columnas con la clase .col-md-*. Las
columnas anidadas siempre tienen que sumar 12 columnas de anchura, tal y como muestra el siguiente ejemplo.
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>
3 Tipografa
Los estilos relacionados con la tipografa y el texto de los contenidos son esenciales en cualquier framework CSS. Por
esa razn, Bootstrap 3 incluye decenas de estilos para los principales elementos utilizados en los sitios y aplicaciones
web.
Titulares
Bootstrap 3 define estilos por defecto para todos los niveles de titulares de las pginas, desde <h1> hasta <h6>.
Ejemplo:
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
A continuacin se muestra una imagen del aspecto que debera tener este ejemplo, para que puedas comparar los
dos:
Bootstrap tambin define estilos especiales para los elementos <small> incluidos dentro de un titular y utilizados
habitualmente para mostrar informacin secundaria. Ejemplo:
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
Abreviaturas
Si empleas la etiqueta <abbr> de HTML para marcar las abreviaturas y los acrnimos, los usuarios podrn ver su
contenido completo al pasar el ratn por encima de ellas. Adems, si la abreviatura define el atributo title, Bootstrap
aade un fino borde inferior punteado para indicar al usuario que puede pasar el ratn por encima (tambin cambia
el tipo de puntero que se muestra al pasar el ratn por encima).
Abreviaturas bsicas
Incluye la definicin completa del elemento <abbr> dentro de su atributo title. Ejemplo:
<p>Este texto contiene abreviaturas como <abbr title="seor">Sr.</abbr> y <abbr title="seora">Sra.</abbr></p>
Formulario bsico
Bootstrap 3 aplica por defecto algunos estilos a todos los componentes de los formularios. Si adems aades la clase
.form-control a los elementos <input>, <textarea> y <select>, su anchura se establece a width: 100%. Para optimizar
el espaciado, utiliza la clase .form-group para encerrar cada campo de formulario con su <label>.
Ejemplo:
<form role="form">
<div class="form-group">
<label for="ejemplo_email_1">Email</label>
<input type="email" class="form-control" id="ejemplo_email_1"
placeholder="Introduce tu email">
</div>
<div class="form-group">
<label for="ejemplo_password_1">Contrasea</label>
<input type="password" class="form-control" id="ejemplo_password_1"
placeholder="Contrasea">
</div>
<div class="form-group">
<label for="ejemplo_archivo_1">Adjuntar un archivo</label>
<input type="file" id="ejemplo_archivo_1">
<p class="help-block">Ejemplo de texto de ayuda.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Activa esta casilla
</label>
</div>
<button type="submit" class="btn btn-default">Enviar</button>
</form>
Formulario en lnea
Para que el formulario ocupe el menor espacio posible, aade la clase .form-inline para que las etiquetas <label> se
muestren a la izquierda de cada campo del formulario.
Ejemplo:
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="ejemplo_email_2">Email</label>
<input type="email" class="form-control" id="ejemplo_email_2"
placeholder="Introduce tu email">
</div>
<div class="form-group">
<label class="sr-only" for="ejemplo_password_2">Contrasea</label>
<input type="password" class="form-control" id="ejemplo_password_2"
placeholder="Contrasea">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> No cerrar sesin
</label>
</div>
<button type="submit" class="btn btn-default">Entrar</button>
</form>
Formularios horizontales
Bootstrap 3 tambin permite alinear los elementos <label> y los campos de formulario mediante las clases CSS
utilizadas para definir las rejillas de los layouts. Para ello, aade la clase .form-horizontal al formulario. Adems,
como esta clase modifica la clase .form-group para que se comporte como la fila de una rejilla, no es necesario que
aadas en el formulario elementos con la clase .row.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="ejemplo_email_3" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="ejemplo_email_3"
placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="ejemplo_password_3" class="col-lg-2 control-label">Contrasea</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="ejemplo_password_3"
placeholder="Contrasea">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> No cerrar sesin
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Entrar</button>
</div>
</div>
</form>
Campos de formulario
Bootstrap 3 define estilos adecuados para todos y cada uno de los campos de formulario existentes.
5.4.1. Inputs
Los campos de tipo <input> son los ms numerosos, ya que con HTML5 la lista se ha ampliado a text, password,
datetime, datetime-local, date, month, time, week, number, email, url, search, tel, y color.
Advertencia Bootstrap 3 solamente aplica los estilos a los campos <input> que definen explcitamente su tipo
mediante el atributo type.
Ejemplo:
<input type="text" class="form-control" placeholder="Campo de texto">
As se ve este ejemplo en tu navegador:
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: