Inicio > Desarrollo web > Inicio con Bootstrap

Inicio con Bootstrap

Se descarga en http://getbootstrap.com/

Está pensado para que las páginas se visualicen sobre todo en dispositivos móviles (mobile first).

Genera 3 carpetas necesarias para todo proyecto Bootstrap:

  • css
  • js
  • fonts

Puedes decargar plantillas en http://bootstrapzero.com/.

Esquema básico de la página

En el HTML, deberemos tener estos tres enlaces:

<!–Bootstrap CSS –>
<link rel=”stylesheet” href=”css/bootstrap.min.css”>
<!–jQuery Al ser para móviles puede ser más interesante tener descargado el jQuery–>
http://js/jquery.min.js
<!–Bootstrap JavaScript –>
http://js/bootstrap.min.js

Al ser un entorno Mobile first, tendremos que corregir la escala y ancho de inicio del dispositivo:
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

La página debe estar dentro de un DIV contenedor que puede ser de dos clases:

  • container (se queda en el centro de la ventana)
  • container-fluid (este se ajusta al ancho de la ventana)

Diseño en grid

Bootstrap utiliza un grid de 12 columnas. Y utiliza 4 distribuciones distintas ordenadas por tamaño de la pantalla:

  • xs
  • sm
  • md
  • lg

Para indicar la distribución dependiendo del tamaño de la pantalla, a cada div le asignaremos clases con el formato: col-xx-n (siendo xx una de las 4 distribuciones y n un número divisor de 12).

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: