Accentsconagua

Twitter Bootstrap 101 The Navbar

Web design
Share

Una delle grandi caratteristiche di Twitter Bootstrap 2.0 è la sua eccellente barra di navigazione reattiva. In questo breve tutorial, affronteremo una serie di cose, tra cui la documentazione della barra di navigazione, l'aggiornamento dei nostri file di esempio e la visualizzazione del codice JavaScript necessario.

In questi screencast copriremo quanto segue:

  • Verificheremo alcuni aggiornamenti recenti alla documentazione online di Twitter Bootstrap: ti consiglio di seguire il Changelog, che viene aggiornato frequentemente!
  • Disimballeremo i file di esempio e andremo a lavorare sul markup della barra di navigazione, aggiungendo un menu a discesa e un campo di ricerca.
  • Imposteremo il codice JavaScript necessario per il menu a discesa e la barra di navigazione reattiva.
  • Infine, nei file di esempio ho incluso alcune note ed esempi che potresti trovare utili per personalizzare la barra di navigazione per adattarla a layout alternativi, tra cui una barra di navigazione statica a larghezza intera (non fissata in alto) e una barra di navigazione vincolata alla larghezza dei contenuti del tuo sito.

Documentazione Navbar

Seguire la documentazione si rivela essere piuttosto importante, poiché viene aggiornato frequentemente. In questo caso, gli aggiornamenti recenti hanno avuto un impatto su alcuni degli esempi che ho fornito nei nostri file di esempio.

In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!

Markup Navbar

Scompattiamo i file di esempio e andiamo a lavorare sul markup della barra di navigazione, aggiungendo un menu di navigazione a discesa, spostandolo a destra e aggiungendo un campo di ricerca.

JavaScript Navbar

I menu a discesa e il menu reattivo comprimibile non funzionano senza JavaScript, quindi configuriamolo!

In alternativa, scarica il video o iscriviti a Webdesigntuts + screencast tramite iTunes o YouTube!

Link e download

  • La pagina di documentazione principale di Twitter Bootstrap
  • Scarica i file di esempio per questo esercizio

Divertiti!

Web design
×