Bootstrap 4 barra di navigazione
Barre di navigazione
Una barra di navigazione è un'intestazione di navigazione posizionata nella parte superiore della pagina:
Barra di navigazione di base
Con Bootstrap, una barra di navigazione può estendersi o comprimersi, a seconda delle dimensioni dello schermo.
Con la classe viene creata una barra di navigazione standard .navbar
, seguita da una classe che si riduce reattiva: .navbar-expand-xl|lg|md|sm
(impila la barra di navigazione verticalmente su schermi molto grandi, grandi, medi o piccoli).
Per aggiungere collegamenti all'interno della barra di navigazione, utilizzare un <ul>elemento con class="navbar-nav". Quindi aggiungi <li>elementi con una .nav-itemclasse seguiti da un <a>elemento con una .nav-linkclasse:
Esempio
<!-- A grey horizontal navbar that becomes
vertical on small screens -->
<nav class="navbar navbar-expand-sm
bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Barra di navigazione verticale
Rimuovi la .navbar-expand-xl|lg|md|smclasse per creare una barra di navigazione verticale:
Esempio
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link
3</a>
</li>
</ul>
</nav>
Barra di navigazione centrata
Aggiungi la .justify-content-centerclasse per centrare la barra di navigazione.
L'esempio seguente centra la barra di navigazione su schermi medi, grandi ed extra grandi. Su schermi piccoli verrà visualizzato verticalmente e allineato a sinistra (a causa della classe .navbar-expand-sm):
Esempio
<nav class="navbar navbar-expand-sm
bg-light justify-content-center">
...
</nav>
Barra di navigazione colorata
Utilizzare una delle .bg-colorclassi per modificare il colore di sfondo della barra di navigazione ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondarye ).bg-dark.bg-light
Suggerimento: aggiungi un colore di testo bianco a tutti i collegamenti nella barra di navigazione con la .navbar-darkclasse oppure usa la .navbar-lightclasse per aggiungere un
colore di testo nero .
Esempio
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link"
href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link
disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm
bg-primary navbar-dark">...</nav>
Stato attivo/disabilitato : aggiungi la .activeclasse a un
<a>elemento per evidenziare il collegamento corrente o la .disabledclasse per indicare che il collegamento non è selezionabile.
Marchio/Logo
La .navbar-brandclasse viene utilizzata per evidenziare il marchio/logo/nome del progetto della tua pagina:
Esempio
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a
class="navbar-brand" href="#">Logo</a>
...
</nav>
Quando si utilizza la .navbar-brandclasse sulle immagini, Bootstrap 4 modellerà automaticamente l'immagine per adattarla verticalmente alla barra di navigazione.
Esempio
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg"
alt="Logo" style="width:40px;">
</a>
...
</nav>
Comprimere la barra di navigazione
Molto spesso, soprattutto su schermi di piccole dimensioni, si desidera nascondere i link di navigazione e sostituirli con un pulsante che dovrebbe rivelarli quando viene cliccato.
Per creare una barra di navigazione comprimibile, utilizzare un pulsante con . Quindi avvolgi il contenuto della barra di navigazione (link, ecc.) all'interno di un elemento div con , seguito da un id che corrisponde a quello del pulsante: " thetarget ".class="navbar-toggler",
data-toggle="collapse" and data-target="#thetarget"class="collapse navbar-collapse"data-target
Esempio
<nav class="navbar navbar-expand-md bg-dark
navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button
class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
</ul>
</div>
</nav>
Suggerimento: puoi anche rimuovere la classe .navbar-expand-md per nascondere SEMPRE i collegamenti della barra di navigazione e visualizzare il pulsante di commutazione.
Barra di navigazione con menu a discesa
Le barre di navigazione possono anche contenere menu a discesa:
Esempio
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop"
data-toggle="dropdown">
Dropdown
link
</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
Moduli e pulsanti della barra di navigazione
Aggiungi un <form>elemento con class="form-inline"per raggruppare input e pulsanti fianco a fianco:
Esempio
<nav class="navbar navbar-expand-sm
bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control
mr-sm-2"
type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
Puoi anche utilizzare altre classi di input, come .input-group-prependo .input-group-appendper allegare un'icona o un testo della guida accanto al campo di input. Imparerai di più su queste classi nel capitolo Input di Bootstrap.
Esempio
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div
class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text"
class="form-control" placeholder="Username">
</div>
</form>
</nav>
Testo della barra di navigazione
Usa la .navbar-textclasse per allineare in verticale tutti gli elementi all'interno della barra di navigazione che non sono collegamenti (garantisce il riempimento corretto e il colore del testo).
Esempio
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!--
Links -->
<ul class="navbar-nav">
<li
class="nav-item">
<a class="nav-link" href="#">Link
1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
Barra di navigazione fissa
La barra di navigazione può anche essere fissata nella parte superiore o inferiore della pagina.
Una barra di navigazione fissa rimane visibile in una posizione fissa (in alto o in basso) indipendentemente dallo scorrimento della pagina.
La .fixed-topclasse rende la barra di navigazione fissa in alto :
Esempio
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Usa la .fixed-bottomclasse per fare in modo che la barra di navigazione rimanga in fondo alla pagina:
Esempio
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at
the top of the page when you scroll past it. Note:
This class does not work in IE11 and earlier (will treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>