¿Te gustaría aprender Bootcamp Diseño Web Responsivo con Bootstrap y JQuery?
Tenemos los diplomados que necesitas.¡Haz clic aquí!

Para crear una web responsive, es decir, que se ajuste automáticamente a las distintas resoluciones de pantalla de los dispositivos en los que se va a mostrar, vamos a utilizar el framework Bootstrap.

Para este ejemplo vamos a utilizar la versión pre compilada y vincularemos nuestra página web con la versión estable más reciente:

<html>  
  <head>    
    <title>Ejemplo Grid</title>        
<link rel=”stylesheet” href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>    
 </head>  
  <body>       
 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>        
<script src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>    
</body>
</html>

Añadimos entre las etiquetas head el css de Bootstrap y antes de cerrar la etiqueta body los scripts que necesitamos. Estos scripts los podríamos poner también entre las etiquetas head después del archivo css. Pero lo ponemos así para que primero se cargue el HTML y luego los scripts mejorando el tiempo de carga de la pagina web.

Toda aplicación Bootstrap debe tener un contenedor que contenga toda la aplicación web. Este es el primer paso para realizar nuestra web responsive.

<div class=”container”> &nbsp; </div>

También mostramos como hace la magia Bootstrap. Para utilizar este framework tan solo debemos escribir en el atributo class de la etiqueta que queramos modificar o añadir estilo una palabra reservada de este framework. Tan solo tienes que fijarte en la linea anterior de código como lo realizamos. Con este valor en el atributo class centramos toda nuestra web y dejamos margenes a los lados que dependerá del tamaño de pantalla en el que visualicemos la aplicación.

Una vez definido el contenedor de nuestra aplicación, pasamos a implementar los elementos que vamos a tener en nuestra web. Bootstrap trabaja con una cuadricula de 12 columnas, llamado grid, nosotros debemos dividir nuestro diseño de pantalla en estas doce columnas y decidir cuantas columnas ocupan los elementos que vamos a ir introduciendo.

Así, iremos creando contenedores con un tamaño de columnas. Por ejemplo queremos dividir la pantalla en tres secciones, que tienen 4, 3 y 5 columnas de tamaño respectivamente, lo haríamos de la siguiente forma:

<div class=”container”>
<div class=”col-md-4″>Columna 1</div>
<div class=”col-md-3″>Columna 2</div>
<div class=”col-md-5″>Columna 3</div>
</div>

Como puedes observar lo hacemos con el valor col-md-*, donde en el asterisco es donde indicamos el número de columnas que va a tener ese contenedor. Si nos pasamos y los contenedores suman más de 12 columnas el ultimo contenedor bajara abajo.

Por lo que podremos utilizar multiples combinaciones de columnas, por ejemplo:

    <div class="row">
        <div class="col-md-2 well"> 2 Col</div>
        <div class="col-md-2 well"> 2 Col</div>
        <div class="col-md-2 well"> 2 Col</div>
        <div class="col-md-4 well"> 4 Col</div>
        <div class="col-md-2 well"> 2 Col</div>
    </div>
    <div class="row">
        <div class="col-md-6 well"> 6 Col</div>
        <div class="col-md-6 well"> 6 Col</div>
    </div>
    <div class="row">
        <div class="col-md-12 well"> 12 Col</div>
    </div>
</div>

Grid Bootstrap

Como ves hemos añadido otro div con una clase que no habíamos visto class=»row», con esto lo que hacemos es bajar a la siguiente fila. No importa que hayamos rellenado utilizado las 12 columnas.

El anterior valor col-md-* esta definiendo un tamaño de columna para un desktop (992px), es lo que significa las letras md, medium device. Dependiendo del dispositivo al que este orientada nuetra aplicación tenemos las siguientes opciones:

Sé que muchos de nosotros ahora mismo están pensando en que deben desarrollar una aplicación web para múltiples dispositivos. Bootstrap lo sabe, y aunque utilices el prefijo md el framework detectara que estas en un dispositivo distinto y ajustara las columnas al tamaño apropiado, pudiendo si se trata de un móvil bajar las columnas a la siguiente fila.

De todos modos, este framework también nos permite definir el ancho de un contenedor dependiendo del dispositivo. Si tenemos este contenedor:

<div class=”col-xs-12 col-sm-6 col-md-8</div>

Tendremos un contenedor de 12 columnas para un teléfono, 6 columnas en una tablet y 8 en un desktop.

Pues esta es la forma que tiene este Bootstrap de crear una pagina web responsive, pero como sabéis ademas nos aporta una gran cantidad de estilos que harán a nuestra aplicación muy atractiva. Existen otros frameworks que utilizan un grid similar como es el caso de 960gs pero este framework tan solo nos aporta esta división por columnas.

Después de estos pasos ya eres capaz de aplicar bootstrap a toda tu web, tan solo tienes que acudir a la referencia y buscar el valor que necesitas para representar el estilo que le quieras dar al elemento de tu web.

Te esperamos en los siguientes artículos en donde hablaremos más acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.

¿Te gustaría aprender Bootcamp Diseño Web Responsivo con Bootstrap y JQuery?
Tenemos los diplomados que necesitas.¡Haz clic aquí!

About Author

NGuerrero

0 0 votos
Article Rating
Suscribir
Notificar de
guest
0 Comments
Comentarios.
Ver todos los comentarios
0
¿Te gusta este articulo? por favor comentax
()
x
Abrir chat
¿Quieres aprender a programar?
Hola 👋,
¿Te interesa información de nuestros cursos?