Capítulo 1 - Páginas estáticas (Parte 05 de 09)

 5. Diseño responsive con Bootstrap

Si se desea 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, entonces una buena alternativa es usar el framework Bootstrap.

Boostrap funciona con la base de otro frmaework llamado jQuery, por lo tanto, se tiene que hacer una configuración previa en el desarrollo de la página HTML, con las siguientes líneas:

Dentro de la sección head se colocan los estilos (CSS), en este ejemplo los Boostrap y al final de la sección body, van los javascript (JS).

Para distribuir las diversas filas (row) dentro de un contenedor (container) de Boostrap, se puede proceder de la siguiente forma, si se quiere obtener la presentación de la diapositiva:

Para entender el significado de las clases col-xs-, col-sm-, col-md- y col-lg- se muestra la siguiente tabla.

Entonces, según el ancho de la pantalla se va ajustando la presentación de los elementos dentro de row.

Esta sería la salida de la distribución en md y lg:

Esta sería la salida de la distribución en sm:

Esta sería la salida de la distribución en xs:

Imágenes, formularios y tablas responsive

Con Boostrap se puede mostrar imágenes que se ajustan al ancho de la pantalla, con esta simple sentencia:

También, se pueden personalizar las imágenes con (.img-rounded y .img-circle):

Los formularios con Boostrap son completamente responsive y cambian de forma, según el ancho de la pantalla; por ejemplo:

El mismo código respondiendo a una pantalla menos ancha:

Fragmento de código del formulario:

Si necesitan ese código es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="form-group"> <label for="tipoVisita">Tipo de Visita</label> <select id="tipoVisita" class="form-control"> <option value="Personal">Personal</option> <option value="Empresa">Empresa</option> <option value="Familiar">Familiar</option> </select> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaInicioVisita">Hora Inicio</label> <input type="text" id="horaInicioVisita" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaFinVisita">Hora Fin</label> <input type="text" id="horaFinVisita" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div class="input-group" style="width: 100%"> <label for="personaVisitada">Persona Visitada</label> <input type="text" id="personaVisitada" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="areaVisitada">Area</label> <input type="text" id="areaVisitada" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="cargoVisitada">Cargo</label> <input type="text" id="cargoVisitada" class="form-control"/> </div> </div> </div> <div class="row" style="margin-top: 16px"> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> <div class="col-xs-10 col-sm-8 col-md-4 col-lg-4"> <button type="button" class="btn btn-default" style="width: 100%"> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Grabar Datos </button> </div> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> </div> </div>

También las tablas ajustan su ancho, según la pantalla en las que son mostradas, como, por ejemplo:

Fragmento de código de la tabla:

Si necesitan el código, es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="panel panel-default"> <div class="panel-heading"> Lista de Clientes </div> <table class="table"> <thead> <tr> <th>#</th> <th>Cliente</th> <th>Correo</th> <th>Teléfono</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Juan Pérez</td> <td>jperez@hotmail.com</td> <td>999 678 456</td> </tr> <tr> <th scope="row">2</th> <td>Julia Ramos</td> <td>jramos@yahoo.es</td> <td>889 765 344</td> </tr> <tr> <th scope="row">3</th> <td>Luis Abanto</td> <td>labanto@gmail.com</td> <td>798 887 667</td> </tr> <tr> <th scope="row">4</th> <td>Carmen Valdiviezo</td> <td>cvaldiviezo@gmail.com</td> <td>998 867 667</td> </tr> </tbody> </table> </div> </div>