freeCodeCamp

5.7 KiB

Raw Blame History

title	localeTitle
Navigation Bar	Barra de navegación

Barra de navegación

El marco de Bootstrap le proporciona una función de barras de navegación de llamada. En resumen, una barra de navegación (también denominada barras de navegación) es un encabezado en la parte superior de la página para mostrar información de navegación.

Cómo utilizar

Para usar las Barras de navegación de Bootstrap, agregue un elemento <nav> en la parte superior dentro del elemento <body> de su página web. Hay varios estilos que puede agregar para personalizar la visualización de sus barras de navegación.

Ejemplo de código

Este es el código necesario para hacer una barra de navegación básica.


<nav class="navbar navbar-default"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Site Name</a> 
    </div> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul> 
  </div> 
 </nav>

Estilos de la barra de navegación

Bootstrap proporciona un conjunto de clases en el marco de Bootstrap para diseñar tus barras de navegación. Estas clases son las siguientes:

navbar navbar-default Este es el estilo predeterminado para tus barras de navegación.
navbar navbar-inverse Esto es similar al estilo predeterminado, excepto que los colores están invertidos.

Agregar menús desplegables a la barra de navegación

Puede incluir un menú desplegable dentro de una barra de navegación. Esta característica requiere que incluyas el archivo javascript de Bootstrap para que funcione.


<li class="dropdown"> 
  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down 
    <span class="caret"></span> 
  </a> 
 <ul class="dropdown-menu"> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
  </ul> 
 </li>

Añadiendo botones a la barra de navegación

Puedes añadir botones en la barra de navegación. Las clases existentes de Bootstrap Button funcionan, sin embargo, deberá incluir la clase navbar-btn al final de la lista de clases.


<button class="btn navbar-btn">Button</button>

Agregar formularios a la barra de navegación

También puede agregar formularios a la barra de navegación. Esto podría ser usado para tareas como un campo de búsqueda, un campo de inicio de sesión rápido, etc.


<form class="navbar-form navbar-right"> 
  <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
  </div> 
  <button type="submit" class="btn btn-default">Search</button> 
 </form>

Alineando elementos a la derecha en la barra de navegación.

En algunos casos, es posible que desee alinear elementos en una barra de navegación a la derecha (por ejemplo, un botón de inicio de sesión o registro). Para hacer esto necesitarás usar la navbar-right la navbar-right .


<nav class="navbar navbar-default"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Site Name</a> 
    </div> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Action Link #1</a></li> 
      <li><a href="#">Action Link #2</a></li> 
    </ul> 
  </div> 
 </nav>

Visualización de la barra de navegación independiente del desplazamiento

En algunos casos, es posible que desee mantener la barra de navegación en la parte superior o inferior de la pantalla, independientemente del desplazamiento. Deberá agregar la navbar-fixed-top o navbar-fixed-bottom al elemento <nav> .


<nav class="navbar navbar-default navbar-fixed-top"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Site Name</a> 
    </div> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul> 
  </div> 
 </nav>

Colapsando la barra de navegación

En una pantalla pequeña (como un teléfono o una tableta) la barra de navegación ocupará demasiado espacio. Afortunadamente existe la opción de collase la barra de navegación. Puedes lograr esto usando el siguiente ejemplo.


<nav class="navbar navbar-default"> 
  <div class="container-fluid"> 
    <div class="navbar-header"> 
      <a class="navbar-brand" href="#">Site Name</a> 
    </div> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#">Page 1</a></li> 
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul> 
  </div> 
 </nav>