"menu principal"
Bootstrap 3.3.0 Snippet by rommelayala

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Plantilla básica de Bootstrap</title> <!-- CSS de Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- librerías opcionales que activan el soporte de HTML5 para IE8 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- barra de navegacion superior --> <!--barra arriba --> <nav class="navbar navbar-default navbar-inverse" role="navigation"> <!--barrak abajo <nav class="navbar navbar-navbar navbar-default navbar-fixed-bottom" role="navigation" > arriba y el negro <nav class="navbar navbar-default navbar-inverse" role="navigation"> --! <!-- El logotipo y el icono que despliega el menú se agrupan para mostrarlos mejor en los dispositivos móviles --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Desplegar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Logotipo</a> </div> <!-- Agrupar los enlaces de navegación, los formularios y cualquier otro elemento que se pueda ocultar al minimizar la barra --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <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"> Menú #1 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Acción #1</a></li> <li><a href="#">Acción #2</a></li> <li><a href="#">Acción #3</a></li> <li class="divider"></li> <li><a href="#">Acción #4</a></li> <li class="divider"></li> <li><a href="#">Acción #5</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Buscar"> </div> <button type="submit" class="btn btn-default">Enviar</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Enlace #3</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Menú #2 <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Acción #1</a></li> <li><a href="#">Acción #2</a></li> <li><a href="#">Acción #3</a></li> <li class="divider"></li> <li><a href="#">Acción #4</a></li> </ul> </li> </ul> </div> </nav> <!-- Fin de barra navegacion --> <!-- Librería jQuery requerida por los plugins de JavaScript --> <script src="http://code.jquery.com/jquery.js"></script> <!-- Todos los plugins JavaScript de Bootstrap (también puedes incluir archivos JavaScript individuales de los únicos plugins que utilices) --> <script src="js/bootstrap.min.js"></script> </body> </ht

Related: See More

Material Dashboard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: