Bootstrap- navigatiebalk
Navigatiebalken
Een navigatiebalk is een navigatiekop die bovenaan de pagina wordt geplaatst:
Met Bootstrap kan een navigatiebalk uit- of inklappen, afhankelijk van de schermgrootte.
Een standaard navigatiebalk wordt gemaakt met <nav class="navbar navbar-default">.
In het volgende voorbeeld ziet u hoe u een navigatiebalk bovenaan de pagina kunt toevoegen:
Voorbeeld
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Opmerking: alle voorbeelden op deze pagina tonen een navigatiebalk die te veel ruimte in beslag neemt op kleine schermen (de navigatiebalk zal echter op één enkele regel staan op grote schermen - omdat Bootstrap responsief is). Dit probleem (met de kleine schermen) zal worden opgelost in het laatste voorbeeld op deze pagina.
Omgekeerde navigatiebalk
Als je de stijl van de standaardnavigatiebalk niet leuk vindt, biedt Bootstrap een alternatieve, zwarte navigatiebalk:
Verander gewoon de .navbar-defaultklasse in .navbar-inverse:
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Navigatiebalk met vervolgkeuzelijst
Navigatiebalken kunnen ook vervolgkeuzemenu's bevatten.
In het volgende voorbeeld wordt een vervolgkeuzemenu toegevoegd voor de knop "Pagina 1":
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Rechts uitgelijnde navigatiebalk
De .navbar-rightklasse wordt gebruikt om navigatiebalkknoppen rechts uit te lijnen.
In het volgende voorbeeld voegen we een knop "Aanmelden" en een knop "Aanmelden" rechts in de navigatiebalk in. We voegen ook een glyphicon toe aan elk van de twee nieuwe knoppen:
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
Navigatieknoppen
Om knoppen in de navigatiebalk toe te voegen, voegt u de .navbar-btnklasse toe aan een Bootstrap-knop:
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<button class="btn btn-danger navbar-btn">Button</button>
</div>
</nav>
Navbar-formulieren
Om formulierelementen in de navigatiebalk toe te voegen, voegt u de .navbar-formklasse toe aan een formulierelement en voegt u een invoer(en) toe. Merk op dat we een .form-groupklasse hebben toegevoegd aan de div-container die de invoer bevat. Dit voegt een goede opvulling toe als je meer dan één invoer hebt (je zult hier meer over leren in het hoofdstuk Formulieren).
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<form class="navbar-form navbar-left"
action="/action_page.php">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</nav>
U kunt de klassen .input-groupen ook gebruiken .input-group-addonom een pictogram of helptekst naast het invoerveld toe te voegen. U leert meer over deze klassen in het hoofdstuk Bootstrap-invoer.
Voorbeeld
<form class="navbar-form navbar-left" action="/action_page.php">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
Navigatietekst
Gebruik de .navbar-textklasse om alle elementen in de navigatiebalk die geen links zijn verticaal uit te lijnen (zorgt voor de juiste opvulling en tekstkleur).
Voorbeeld
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<p class="navbar-text">Some text</p>
</nav>
Vaste navigatiebalk
De navigatiebalk kan ook bovenaan of onderaan de pagina worden vastgezet.
Een vaste navigatiebalk blijft zichtbaar op een vaste positie (boven of onder) onafhankelijk van het scrollen op de pagina.
De .navbar-fixed-topklasse maakt de navigatiebalk bovenaan vast:
Voorbeeld
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
De .navbar-fixed-bottomklasse zorgt ervoor dat de navigatiebalk onderaan blijft:
Voorbeeld
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
De navigatiebalk samenvouwen
De navigatiebalk neemt op een klein scherm vaak te veel ruimte in beslag.
We zouden de navigatiebalk moeten verbergen; en laat het alleen zien als het nodig is.
In het volgende voorbeeld is de navigatiebalk vervangen door een knop in de rechterbovenhoek. Pas wanneer op de knop wordt geklikt, wordt de navigatiebalk weergegeven:
Voorbeeld
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>