logo

Bootstrap 4 alpha

Mega Menue Sidebar


Bootstrap 4 Tutorial: 2. Fixed Navbar.

In diesem, dem 2. Schritt fügen wir der Seite eine responsive fixed navbar inclusive einer Searchmaske innerhalb der Navigaion hinzu. In der Navbar ist auch ein Dropdownmenü integriert für Demozwecke von Submenues.

In Bootstrap 3 war mitunter sehr schwer die Navbar für alle Bildschirmauflösungen und verbundenen Breakponts korrekt darzustellen ohne in der customstyle.css Bootstrap eigene Klassen zu überschreiben. Dies hat sich mit Bootstrap 4 durch hinzufügen neuer Klassen für verschiedene Breakpoints deutlich verbessert.

 

Navbar - toogleable

 

Webseitenaufbau

Ab Bootstrap 4 gibt es drei neue Klassen diesbezüglich. In meinem Beispiel verwende ich die navbar-toogleable-sm Variante. Die Desktopnavigation wird ab einer Größe von 768px angezeigt, anonsten ist der Toogle-Button sichtbar.
Der Toogle-Button lässt sich auch mit drei neuen Klassen für verschiedene Bildschirmauflösungen verstecken. (hidden-sm-up, hidden-md-up, hidden-lg-up)

navbar-toggleable-xs

Das Desktopnavigation wird ab einer Bildschirmbreite von mehr als 544px angezeigt.

navbar-toggleable-sm

Das Desktopnavigation wird ab einer Bildschirmbreite von mehr als 768px angezeigt.

navbar-toggleable-md

Das Desktopnavigation wird ab einer Bildschirmbreite von mehr als 992px angezeigt.

 

Mehr Informationen zu den neuen Klassen finden sie unter bootstrap 4 navbar

 

Da es sich bei der verwendeten Version um bootstrap 4 alpha 6 handelt, sind Änderungen / Anpassungen für die Zukunft bis zum Final Release 4 anzunehmen.

Der nachfolgende Codesnippet zeigt den Quellcode der fixed navbar der unmittelbar nach dem Bodytag einzufügen ist.

 

Fixed Navbar Quelltext

 


<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Bootstrap 4 Tutorial</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Submenu 1</a>
              <a class="dropdown-item" href="#">Submenu 2 action</a>
              <a class="dropdown-item" href="#">Submenu 3</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Suche">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suche</button>
        </form>
      </div>
    </nav>

 

Um den Content bezüglich der Navbar nach unten zu verschieben, geben wir den Body noch folgendes padding welches in der tutorialstyle-nav.css gesetzt wird.


/* Der Content des Body's muss nach unten verschoben werden, wegen der 50px breiten fixed navbar */
body {
  padding-top: 5rem;
}

 

Hierfür müssen wir noch im Headbereich die tutorialstyle-nav.css verlinken, indem wir vor dem abschliessenden head-tag folgenden Code einfügen

 


<!-- Custom styles for this template -->
<link href="css/tutorialstyle-nav.css" rel="stylesheet">

 

Für die Dynamic der Navigation, brauchen wir noch Javascript welches wir mit der aktuellen jquery-3.1.1.min.js vor der bootstrap.min.js am ende des Bodybereiches verlinken.


<script src="js/jquery-3.1.1.min.js"></script>

 

Im nächsten Schritt fügen wir der Seite einen sticky footer hinzu.

 :

Preview/Code
Modal Modal Modal Extern
CSS HTML Preview Preview