Accentsconagua

Twitter Bootstrap 101 Die Navbar

Web-Design
Share

Twitter Bootstrap 2.0 bietet unter anderem die hervorragende responsive Navbar. In diesem kurzen Tutorial befassen wir uns mit einer Reihe von Dingen, einschließlich der Navbar-Dokumentation, dem Aktualisieren unserer Beispieldateien und dem notwendigen JavaScript.

In diesen Screencasts behandeln wir Folgendes:

  • Wir werden einige aktuelle Aktualisierungen der Online-Dokumentation von Twitter Bootstrap überprüfen. Ich empfehle, das regelmäßig aktualisierte Änderungsprotokoll zu verwenden!
  • Wir entpacken die Beispieldateien und arbeiten an der Navbar-Markierung, wobei ein Dropdown-Navigationsfeld und ein Suchfeld hinzugefügt werden.
  • Wir richten das JavaScript ein, das für das Dropdown-Menü benötigt wird, sowie die einklappbare responsive Navbar.
  • Schließlich habe ich in den Beispieldateien einige Hinweise und Beispiele hinzugefügt, die hilfreich sein könnten, um die Navigationsleiste an alternative Layouts anzupassen, einschließlich einer statischen Navigationsleiste mit voller Breite (nicht oben fixiert) und einer Navigationsleiste, die auf die Breite beschränkt ist Ihrer Website-Inhalte.

Navbar-Dokumentation

Das Folgen der Dokumentation erweist sich als ziemlich wichtig, da sie regelmäßig aktualisiert wird. In diesem Fall haben die letzten Aktualisierungen einige der Beispiele beeinflusst, die ich in unseren Beispieldateien bereitgestellt habe.

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes oder YouTube abonnieren!

Navbar Markup

Entpacken Sie die Beispieldateien und arbeiten Sie an der Navbar-Markierung, fügen Sie eine Dropdown-Navigation hinzu, schweben Sie sie nach rechts und fügen Sie ein Suchfeld hinzu.

Navbar JavaScript

Das Dropdown-Menü und das ausblendbare responsive Menü funktionieren nicht ohne JavaScript. Legen Sie es also fest!

Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes oder YouTube abonnieren!

Links und Downloads

  • Twitter Bootstraps Hauptdokumentationsseite
  • Laden Sie die Beispieldateien für diese Übung herunter

Habe Spaß!

Web-Design
×