Ya son varias entradas dedicadas a uno de los temas que más odio: el de front-end. Por suerte, aprender el framework Twitter Bootstrap facilita la vida del desarrollador, y más en mi caso, cuando prefieres los temas back-end.
Hoy voy a comentar cómo se crean menús usando Bootstrap 3, que parece sencillo, pero tiene su historia. Me costó estudiar varias horas, y ver y probar distintos ejemplos, y hoy, te desvelo cómo suelo preparar los menús, y la plantilla que utilizo. En concreto, el código que se incluye es el menú de abajo de los ejemplos de Bootstrap.
El esqueleto
Demasiado tiempo me costó entender cómo crear un menú, así que … lo mejor es contar con un esqueleto básico de inicio, que vas modificando según tus necesidades. Hoy, nos centramos en crear un menú para todas las entradas relacionadas con Twitter Bootstrap, y que podrás ver aquí.
El HTML básico del menú, con sus clases preparadas y listas es:
<div class=container><br /> <nav role=navigation class="navbar navbar-default"><br /> <div class=navbar-header><br /> <button type=button data-target=#navbarCollapse data-toggle=collapse class=navbar-toggle><br /> <span class=sr-only>Manejando Datos</span><br /> <span class=icon-bar></span><br /> <span class=icon-bar></span><br /> <span class=icon-bar></span><br /> </button><br /> <a href=# class=navbar-brand>Manejando datos</a><br /> <div><br /> <br /> <div id=navbarCollapse class="collapse navbar-collapse><br /> <ul class="nav navbar-nav"><br /> <li><a href=bootstrap_plantilla.html>Plantilla</a></li><br /> <li><a href=bootstrap_botones.html>Botones</a></li><br /> <li class=active><a href=bootstrap_tabs.html>Tabs</a></li><br /> <li><a href=twitterbootstrap_table.html>Tablas</a></li><br /> </ul><br /> </div><br /> </nav><br /> </div><br />
y aquí el resultado:
Estructura básica de menu con Bootstrap
Analizando un poco el código, queda patente que hay dos bloques: uno con la cabecera, y otro con los distintos apartados. De esta manera, es posible hacer adaptable el menú a todos los dispositivos. Yo te recomiento que mantengas la estructura anterior como base para tus menús, pues … es la forma recomendada!
Ahora cambiamos la resolución de la ventana, más pequeña, y cómo tienes el menú adaptado:
Menu adaptado con Bootstrap
Incluyendo sub menus
Pese a que ésta es la estructura base, se puede complicar, por ejemplo, con submenús. En este caso, aquí teneis el código ampliado.
</p> <p><div class=container><br /> <nav role=navigation class="navbar navbar-default"><br /> <div class=navbar-header><br /> <button type=button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"><br /> <span class=sr-only>Manejando Datos</span><br /> <span class=icon-bar></span><br /> <span class=icon-bar></span><br /> <span class=icon-bar></span><br /> </butto><br /> <a href="#" class=navbar-brand>Manejando datos</a><br /> </div></p> <p><div id=navbarCollapse class="collapse navbar-collapse"><br /> <ul class="nav navbar-nav"><br /> <li><a href="bootstrap_plantilla.html>Plantilla</a></li><br /> <li><a href="bootstrap_botones.html">Botones</a><li><br /> <li class=active><a href=bootstrap_tabs.html>Tabs</a></li><br /> <li><a href=twitterbootstrap_table.html>Tablas</a></li><br /> <li class=dropdown><br /> <a href class=dropdown-toggle data-toggle=dropdown>Formularios <span class=caret></span></a><br /> <ul class=dropdown-menu role=menu><br /> <li><a href=twitterbootstrap_formulario0.html>Formulario inicial</a></li><br /> <li><a href=twitterbootstrap_formulario.html>Otro formulario</a></li><br /> </ul><br /> </li><br /> </ul><br /> </div><br /> </nav><br /> </div></p> <p>
Las clases dropdown así como dropdown-toggle y dropdown-menu son las que hacen posible este comportamiento.
Creando dropdown menus de un botón
Usar la clase dropdown puede permitirte que a partir de un botón, crees varias opciones.
</p> <p><section class=container><br /> <div class=dropdown><br /> <button class="btn btn-info dropdown-toggle" type=button data-toggle=dropdown><br /> Boton con dropdown <span class=caret></span><br /> </button><br /> <ul class=dropdown-menu><br /> <li class=dropdown-header>Cabecera inicial</li><br /> <li><a href>Link uno</a></li><br /> <li><a href>Link 2</a></li><br /> <li class=divider></li><br /> <li><a href>Link 3</a></li><br /> <li class=disable><a href>Link no disponible</a></li><br /> </ul><br /> </div><br /> </section></p> <p>
Tal que así:
Botón con menú
Muy divertido, eh? Aquí lo puedes ver.
Bootstrap sí es responsive
Cómo has podido comprobar, el framework Bootstrap es responsive, lo que permite adaptarse a cualquier resolución, cosa que no sucedía con PureCSS, que además la parte específica para menús es un proyecto aparte, aunque compatible. Yo tenía todo agrupado en un solo archivo CSS, aunque lo normal es tener dos. Otro handicap es que al ser dos proyectos distintos, si cambia el primero, no significa que te vaya a funcionar el segundo, por lo que dependes también de que se ajuste a las nuevas exigencias. Algo así no sucede con Bootstrap, que es un único proyecto.
Sin duda, dejar PureCSS en favor de Bootstrap es un paso adelante hacia un diseño web centrado en la adpatación a cualquier dispositivo, algo vital en los tiempos que corren con la explosión de los smartphones y tablets, y dado que gran parte de los desarrollos que realizo están enfocados a web y cloud, en detrimento del desktop.
Happy coding!