Twitter Bootstrap 101 Navbar

Una dintre caracteristicile minunate ale Twitter Bootstrap 2.0 este bara de navigare excelentă. În acest tutorial scurt, vom aborda o serie de lucruri, inclusiv documentația navbar, actualizarea fișierelor noastre eșantion și analizarea JavaScript-ului necesar.

În aceste sesiuni de screening vom acoperi următoarele:

Vom verifica unele actualizări recente ale documentației online Twitter Bootstrap - Vă recomandăm să urmați Changelog-ul, care este actualizat frecvent!
Vom despacheta fișierele de probă și vom începe să lucrăm la marcajul navbar, adăugând un câmp de dropdown și câmpul de căutare.
Vom configura JavaScript-ul necesar pentru drop-down-ul și pentru bara de navigare responsabilă.
În cele din urmă, în fișierele de eșantion am inclus câteva note și exemple care ar putea fi utile pentru personalizarea barei de navigare pentru a se potrivi unor machete alternative, inclusiv o navbar static de o lățime întreagă (nefixată în partea superioară) și o bară de navigare care este limitată la lățimea a conținutului site-ului.

Documentație Navbar

După ce documentația se dovedește a fi destul de importantă, deoarece este actualizată frecvent. În acest caz, actualizările recente au afectat câteva din exemplele pe care le-am furnizat în fișierele noastre de probă.

Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!

Navbar Markup

Să dezarhivați fișierele de probă și să mergeți la locul de muncă pe marcajul navbar, adăugând o navetă dropdown, flotând-o corect și adăugând un câmp de căutare.

Navbar JavaScript

Dropdown-urile și meniul receptiv pliabil nu funcționează fără JavaScript, așa că hai să ne stabilim asta!

Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!

Link-uri și descărcări

Pagină principală de documentare Bootstrap a documentației
Descărcați fișierele eșantion pentru acest exercițiu

A se distra!

Web design