Tips Bootstrap Parte 1

imagen / Pythonízame
  
13 de Febrero de 2016   0  

En esta ocasión te traemos una serie de pequeños "mini tutoriales" en donde te mostraré algunos tips y cosas que posiblemente aun no conozcas de Bootstrap y que te servirán y sobre todo ahorraran tiempo a la hora de maquetar tus sitios web. La mayoría de ellas son sencillas de implementar pero que proveen funciones muy potentes. Tomaré como hecho que ya lo has utilizado previamente para saltar las cuestiones básicas como instalación y uso de las clases básicas.

He utilizado este framework casi desde sus inicios y cada día me soprende mas sus funcionalidades. 

1. Data-loading en botones. 

Este es un atributo muy importante pero muy poco conocido, eso se me hace un tanto extraño ya que está claramente documentado en el sitio oficial. 

Podemos usar el  siguiente ejemplo:

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Lo que sucederá en este ejemplo es que cuando el usuario haga clic en el botón, éste se pondrá inmediatamente en estado "loading" mostrando el texto introducido en el atributo data-loading-text, también se deshabilitará para evitar que el usuario haga clic mas de dos veces. Con la función $.button('reset') regresamos al botón al estado inicial.

 

2. Tablas responsivas

Sabemos que en Bootstrap la mayoría de los elementos son responsivos y se ajustan a cualquier tipo de pantalla, obviamente hay que saber utilizar muy bien las clases .col-XXXX. Para la cuestión de las tablas es algo especial ya que aunque se encuentren dentro de un div con la clase, por ejemplo, col-md-4, si la tabla contiene muchas columnas se pasará y no respetará el tamaño del div.

Para evitar esto se puede utilizar la clase .table-responsive que la deberá tener el div contenedor de la tabla, por ejemplo:

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

 

3. Ocultando y/o mostrando elementos según resolución.

Algo muy interesante de bootstrap es la sencillez de manejar el contenido visual dependiendo del tamaño del dispositivo, muchas veces nos topamos con la necesidad de ocultar y/o mostrar algún elemento según el tamaño de pantalla, un ejemplo típico es ocultar un banner gigantesco a la hora de visualizar en dispositivos móviles. Para este caso podríamos utilizar la clase .hidden-xs que lo que hará es ocultar el elemento al detectar un tamaño xs.

Por el contrario si quisieramos mostrar algún elemento al detectar tamaño xs podríamos utilizar la clase .visible-xs. De esa manera podemos ocultar y/o mostrar elementos según nuestras necesidades utilizando .visible-[xs,sm,md,lg] y .hidden-[xs,sm,md,lg]. A continuación les dejo una tabla que muestra su comportamiento.

4. Videos responsivos.

Otra cualidad muy interesante de bootstrap es la facilidad de tener videos responsivos, si eres de los que utilizan muchos videos en tu sitio web, sabrás que aunque el video se encuentre en un div responsivo el video no se ajustará automáticamente. Para esto existe la clase .embed-responsive y .embed-responsive-item. Con ellos el iframe utilizado para mostrar tu video ya sea youtube o cualquier otro podrá verse de forma responsiva.

El ejemplo es:

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

 

Bueno con esto terminamos la primera parte de los tips de Bootstrap, espero que les guste y sobre todo que puedan aprovechar en sus proyectos web. Nos vemos en la siguiente, si tienen dudas o comentarios no duden en realizarlas y con gusto se les contestará. :)



Gaspar Dzul

Desarrollador Front End y Móvil.

Temas relacionados