Bootstrap 4 - Navbar
Descrizione
Navbar fornisce le intestazioni di navigazione per la tua applicazione o sito. Le barre di navigazione si comprimono nelle viste mobili e diventano orizzontali all'aumentare della larghezza della finestra disponibile.
Navbar di base
Per creare una barra di navigazione di base, aggiungi la classe .navbar con la classe di compressione reattiva .navbar-expand-xl | lg | md | sm (fornisce la barra di navigazione su schermi extra grandi, grandi, medi o piccoli). Per aggiungere collegamenti alla barra di navigazione, aggiungi semplicemente un elenco non ordinato con la classe .navbar-nav . Per definire ogni singolo elemento dell'elenco, aggiungi la classe .nav-item all'elemento <li> e utilizza la classe .nav-link a un elemento <a> per i singoli link.
L'esempio seguente mostra la creazione di una barra di navigazione di base:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Basic Navbar</h2>
<nav class = "navbar navbar-expand-sm navbar-dark bg-secondary">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<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 Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Marchio / Logo
Il marchio o il logo della pagina può essere evidenziato utilizzando la classe .navbar-brand come mostrato nell'esempio seguente:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Brand</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">Logo</a>
<ul class = "navbar-nav">
<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 Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<br>
<h2>Image Logo</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">
<img src = "https://www.tutorialspoint.com/bootstrap/images/logo.png"
style = "width:120px;" alt = "">
</a>
<ul class = "navbar-nav">
<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 Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Navbar con menu a discesa
Navbar può avere un menu a discesa aggiungendo il codice a discesa all'elemento <li> con l'aiuto della classe .dropdown . Il seguente esempio lo dimostra:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navbar With Dropdown</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarNavDropdown" aria-controls = "navbarNavDropdown"
aria-expanded = "false" aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarNavDropdown">
<ul class = "navbar-nav">
<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 Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
<li class = "nav-item dropdown">
<a class = "nav-link dropdown-toggle" href = "#"
id = "navbarDropdownMenuLink" role = "button" data-toggle = "dropdown"
aria-haspopup = "true" aria-expanded = "false">
Library
</a>
<div class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink">
<a class = "dropdown-item" href = "#">HTML-5</a>
<a class = "dropdown-item" href = "#">CSS-3</a>
<a class = "dropdown-item" href = "#">Bootstrap-4</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity =" sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin =" anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Navbar con moduli e pulsanti
È possibile creare controlli del modulo e pulsanti all'interno della barra di navigazione utilizzando la classe form-inline per l'elemento <form> come mostrato nell'esempio seguente:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Navbar with Form and Button</h2>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-dark">
<form class = "form-inline">
<input class = "form-control mr-sm-2" type = "text" placeholder = "Search your product">
<button class = "btn btn-info" type = "submit">Search</button>
</form>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Navbar colorate
Cambia il colore dello sfondo della barra di navigazione utilizzando utilità di background-color (.bg- *) come bg-primary , bg-dark ecc. L'esempio seguente lo dimostra:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Colored Navbars</h2>
<nav class = "navbar navbar-expand-sm bg-light navbar-light">
<a class = "navbar-brand" href = "#">Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class =" nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-secondary navbar-light">
<a class = "navbar-brand" href = "#">Secondary Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-dark navbar-light">
<a class = "navbar-brand" href = "#">Dark Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-primary navbar-light">
<a class = "navbar-brand" href = "#">Primary Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-success navbar-light">
<a class = "navbar-brand" href = "#">Success Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-info navbar-light">
<a class = "navbar-brand" href = "#">Info Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-warning navbar-light">
<a class = "navbar-brand" href = "#">Warning Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
<br>
<nav class = "navbar navbar-expand-sm bg-danger navbar-light">
<a class = "navbar-brand" href = "#">Danger Navbar</a>
<button class = "navbar-toggler" type = "button" data-toggle = "collapse"
data-target = "#navbarSupportedContent"
aria-controls = "navbarSupportedContent" aria-expanded = "false"
aria-label = "Toggle navigation">
<span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarSupportedContent">
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Barra di navigazione fissa
La barra di navigazione Bootstrap può essere dinamica nel suo posizionamento. Puoi posizionarlo in alto aggiungendo la classe .fixed-top alla classe .navbar . Il seguente esempio lo dimostra:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container">
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class = "navbar-brand" href = "#">Fixed Top</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Fixed Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src =" https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Barra di navigazione inferiore
Se desideri che la barra di navigazione venga fissata nella parte inferiore della pagina, aggiungi la classe .fixed-bottom alla classe .navbar . Il seguente esempio lo dimostra:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container">
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
<a class = "navbar-brand" href = "#">Fixed Bottom</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Bottom Fixed Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src =" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato:
Produzione
Barra di navigazione adesiva
Puoi fissare la barra di navigazione nella parte superiore della pagina, quando scorri la pagina utilizzando la classe .sticky-top che verrà aggiunta alla classe .navbar . Il seguente esempio lo dimostra:
Esempio
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin = "anonymous">
<title>Bootstrap 4 Example</title>
</head>
<body style = "height:2000px">
<div class = "container-fluid">
<div class = "container-fluid" style = "margin-top:80px">
<h4>This is Sticky Navigation Bar...Scroll this page to see the effect</h4>
</div>
</div>
<nav class = "navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<a class = "navbar-brand" href = "#">Sticky Top</a>
<ul class = "navbar-nav">
<li class = "nav-item active">
<a class = "nav-link" href = "#">Home</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">About Us</a>
</li>
<li class = "nav-item">
<a class = "nav-link" href = "#">Contact</a>
</li>
</ul>
</nav>
<!-- jQuery library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Produrrà il seguente risultato: