Twitter Bootstrap 101 La barra de navegación

Una de las grandes características de Twitter Bootstrap 2.0 es su excelente barra de navegación de respuesta. En este breve tutorial, abordaremos una serie de cosas que incluyen la documentación de la barra de navegación, la actualización de nuestros archivos de muestra y el JavaScript necesario..

En estos screencasts cubriremos lo siguiente:

Veremos algunas actualizaciones recientes de la documentación en línea de Twitter Bootstrap. Recomiendo seguir el Registro de cambios, que se actualiza con frecuencia.!
Desempaquetaremos los archivos de muestra e iremos a trabajar en el marcado de la barra de navegación, agregando un menú desplegable de navegación y búsqueda.
Configuraremos el JavaScript que se necesita para el menú desplegable y la barra de navegación receptiva que se colapsa.
Finalmente, en los archivos de muestra, he incluido algunas notas y ejemplos que pueden resultarle útiles para personalizar la barra de navegación para que se ajuste a diseños alternativos, incluida una barra de navegación estática de ancho completo (no está fija en la parte superior) y una barra de navegación limitada al ancho de los contenidos de su sitio.

Documentación Navbar

Seguir la documentación es bastante importante, ya que se actualiza con frecuencia. En este caso, las actualizaciones recientes han afectado algunos de los ejemplos que he proporcionado en nuestros archivos de muestra.

Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!

Marca de barra de navegación

Vamos a descomprimir los archivos de muestra e ir a trabajar en el marcado de la barra de navegación, agregando un menú desplegable, flotando a la derecha y agregando un campo de búsqueda.

JavaScript de la barra de navegación

El menú desplegable y el menú de respuesta plegable no funcionan sin el JavaScript, así que configurémoslo!

Alternativamente, descargue el video o suscríbase a Webdesigntuts + screencasts a través de iTunes o YouTube!

Enlaces y Descargas

Página principal de documentación de Twitter Bootstrap
Descarga los archivos de muestra para este ejercicio.

Que te diviertas!

Diseño web