Los menús o barras de navegación son los componentes principales de toda página web, con bootstrap construir un menú responsive (que se adapte a todos los dispositivos) es bastante sencillo, solo has deseguir unos simples pasos para tener listo tu menú.
Lo primero que tenemos que poner es la etiqueta para crear el menú
<nav class="navbar navbar-default" role="navigation">
A continuación ponemos el código para que aparezca el logotipo y el icono que despliega el menú en los dispositivos moviles
<div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logo</a> </div>
A continuación pondremos los elementos que van a formar nuestro menú, si bien puedo poner enlaces, formulario de búsqueda y mas enlaces a la derecha. En este caso pondremos solo los enlaces.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Enlace 1</a></li> <li><a href="#">Enlace 2</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable <b class="caret"></b></a> <ul class="dropdown-menú"> <li><a href="#">Opc 1</a></li> <li><a href="#">Opc 2</a></li> <li><a href="#">Opc 3</a></li> <li class="divider"></li> <li><a href="#">Opc 4</a></li> <li class="divider"></li> <li><a href="#">Opc 5</a></li> </ul> </li> </ul>
Para poner los enlaces los pongo dentro de la lista desordenada <ul class=»nav navbar-nav»> como un elemento de lista (<li>) si quiere un submenu me creo otra lista desordeanda cuya clase es «dropdown» y meto cada enlace dentro de un elemento de la lista.
Con esto tendríamos listo nuestro menú con unos enlaces básicos.
Aqui una herramienta donde pueden modificar muchas características del navbar de boostrap. Cambiar los colores, bordes, tamaños, etc. hay ejemplos desde el cual se puede empezar como si fuese una plantilla
Sabéis si se pueden unir o combinar wordpress y boostrap? y si es así, como hacerlo?
Gracias
Hola, algunos temas de wordpress ya traen el bootstrap integrado, sino habria que descomprimirlo en tu sitio web y modificar el header.php para poner la orden para incluir el archivo css de bootstrap
Buenas, yo estoy trasteando un poco a ver si consigo hacer un menú algo mejor. Veremos si al final no acabo instalando un plugin como maxmenu o de este estilo..