Índice

La barra de navegación

1. Insertar la barra de navegación Navbar

Vamos a insertar una barra de navegación Bootstrap en Responsive Web Design.

Cree un nuevo documento virgen y guárdelo.

Haga clic en el contenido de la página.

En el panel Insertar, categoría Componentes de Bootstrap, en la lista desplegable Navbar, seleccione Basic Navbar.

images/23OWT-07.png

Estas son las diferentes barras de navegación que ofrece Bootstrap. La barra de navegación de Bootstrap Basic Navbar es una barra simple y eficaz. La barra Navbar fixed to top permite obtener una barra de navegación fija en la parte superior de la ventana del navegador, incluso cuando el visitante usa la barra de desplazamiento vertical. La Navbar fixed to bottom sigue el mismo principio, pero la barra está fija en la parte inferior de la pantalla. Por último, la barra de navegación Inverted Navbar es similar a la Basic Navbar, pero los colores negro y blanco están invertidos.

Dreamweaver inserta la barra de navegación Basic Navbar en la ventana del modo En vivo:

images/23OWT-07B.png

Se añaden los vínculos a los archivos .css y .js:

images/23OWT-07C.png

2. Los elementos de la barra de navegación

La barra de navegación está formada por varios elementos:

  • La barra de navegación puede recibir el nombre de Brand o se le puede asignar cualquier otro nombre.

  • Los dos primeros elementos de menú, con el nombre de Link, son vínculos clásicos. El primero se encuentra en estado « activo » ...