Archivo de la categoría: Bootstrap

Carrusel Bootstrap con Font Awesome

Como sabrás, Bootstrap importa la librería de fuentes Glyphicons para el uso de iconos en la maquetación. Son dos de estos iconos los que utiliza internamente en la construcción del componente Carousel para los controles de cambio de imagen.

En mi caso prefiero importar la librería Font Awesome y evitar Glyphicons, lo que me ha obligado a sustituir estos iconos de control. Al principio pensaba encontrarme todo hecho simplemente sustituyendo las clases de los iconos, pero viendo el resultado es necesario incorporar algo de CSS (o LESS ¿todavía no conoces LESS?) para que el resultado quede responsivo y los iconos perfectamente alineados. Explico como hacerlo correctamente.

Primero en nuestro html hay que sustituir los iconos de control del carrusel por algunos equivalentes en Font Awesome, en mi caso he pasado de:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>

a:

<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="fa fa-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="fa fa-chevron-right"></span>
</a>

Esto hará tus iconos font-awesome visibles en el carrusel, pero no estarán correctamente alineados, para ello destripé las librerías LESS de Bootstrap para ver los estilos propios de esos iconos y añadí el siguiente código CSS a mi hoja de estilos):

.fa-chevron-left, .fa-chevron-right {
     position: absolute;
     top: 50%;
     z-index: 5;
     display: inline-block;
}

.fa-chevron-left {
     left: 50%;
}

.fa-chevron-right {
     right: 50%;
}

@media screen and (min-width: 768px) {

     .fa-chevron-left, .fa-chevron-right {
          width: 30px;
          height: 30px;
          margin-top: -15px;
          margin-left: -15px;
          font-size: 30px;
     }

}

Con esto tendríamos nuestro carrusel Bootstrap con iconos de Font Awesome. Recomiendo usar selectores de ID en el código CSS que os he puesto para que estos estilos sólo afecten a los iconos que se encuentren dentro del carrusel y no en todos los de nuestra web, aquí los he omitido por no entretenerme demasiado 🙂

Yamm – Bootstrap Megamenu

Yamm es un megamenu CSS responsivo que amplia el componente navbar de Bootstrap 3 para poder entre otras cosas simular un menu multinivel o multidropdown.

Además, podemos tener la capacidad de usar otros componentes Bootstrap dentro de los dropdown del componente navbar (formularios, paneles, listas de media…), así como el sistema de rejillas (grid) propio de Boostrap.

Página oficial de Yamm Boostrap Megamenu.

Bootstrap vs JQuery Mobile ¿Cual es mejor? Ventajas e Inconvenientes

Dicen que lo bueno, si breve, dos veces bueno. Así que para evitar que pierdas tu tiempo leyendo un extenso artículo tipo comparativa entre Bootstrap y JQuery Mobile con todas sus ventajas e inconvenientes y con el fin de simplicar esa duda que todos hemos tenido al intentar hacer nuestro primer proyecto responsivo te dire que la respuesta a la pregunta es: los dos y ninguno 🙂

Ambas son maravillosas en el desarrollo responsivo y ambas no pueden ser adecuadas para tu tipo de proyecto. Lo que debes hacer es preguntarte QUE tienes en mente hacer:

¿Quieres hacer una web corporativa que se vea visualmente atractiva en escritorio, tablets y móviles? En ese caso yo elegiría Bootstrap. Ojo, este verano lanzaron Bootstrap 3 que cambia el nombre de muchas clases CSS y estructura HTML respecto a Bootstrap 2, así que descarga la versión 3 y asegúrate de que tu búsqueda de tutoriales y ayuda se realice sobre esta versión. Empieza por entender el sistema de grids de Bootstrap 3. Puedes ver un ejemplo de web con Bootstrap 3

¿Quieres hacer una aplicación para móvil, con el aspecto de una aplicación nativa pero usando HTML/CSS? Entonces decídete por JQuery Mobile, sus numerosos componentes prediseñados no diferenciaran visualmente tu aplicación de una nativa. Yo lo veo especialmente útil para mostrar formularios complejos y puedes evitar que el usuario se desplace demasiado con el scroll. Puedes ver un ejemplo de web con JQuery Mobile