English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di base di Bootstrap4

Bootstrap4导航栏

　 　 Puoi utilizzare il componente di barra di navigazione di Bootstrap per creare una intestazione di navigazione reattiva per il tuo sito web o applicazione. Queste barre di navigazione reattive si ripiegano all'inizio sugli dispositivi con piccolo visore (come gli smartphone), ma si espandono quando l'utente clicca sul pulsante di commutazione. Tuttavia, sui dispositivi di medie e grandi dimensioni come i laptop o i computer, rimarrà come sempre orizzontale.

La barra di navigazione di solito si trova nella parte superiore della pagina.

Puoi utilizzare la classe .navbar per creare una barra di navigazione standard, seguita dalla classe .navbar-expand-xl|lg|md|sm per creare una barra di navigazione reattiva (Estesa orizzontalmente sugli schermi grandi, accatastata verticalmente sugli schermi piccoli).

Le opzioni nella barra di navigazione possono essere utilizzate con l'elemento <ul> e aggiungere la classe. Aggiungi la classe .nav-item all'elemento <li>, e utilizza la classe .nav-link per l'elemento <a>:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light">
　　<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>
<br>
<div　class="container-fluid">
　　<h2>Esempio di barra di navigazione semplice</h2>
　　<p>La barra di navigazione di solito si trova nella parte superiore della pagina.</p>
　　<p>Puoi utilizzare la classe .navbar per creare una barra di navigazione standard, seguita dalla classe .navbar-expand-xl|lg|md|sm per creare una barra di navigazione reattiva (estesa orizzontalmente sugli schermi grandi, accatastata verticalmente sugli schermi piccoli).</p>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione verticale

Per creare una barra di navigazione verticale, elimina la classe .navbar-expand-xl|lg|md|sm:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
　　<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>
<br>
<div　class="container-fluid">
　　<h2>Barra di navigazione verticale</h2>
　　<p>La barra di navigazione di solito si trova nella testa della pagina.</p>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione di diverso colore

Puoi utilizzare le seguenti classi per creare una barra di navigazione di diverso colore: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark e .bg-light).

Suggerimento: Per lo sfondo scuro è necessario impostare il colore del testo come chiaro, per lo sfondo chiaro è necessario impostare il colore del testo come scuro.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barra di navigazione di diverso colore</h2>
　　<p>Per lo sfondo scuro è necessario impostare il colore del testo come chiaro, per lo sfondo chiaro è necessario impostare il colore del testo come scuro.</p>
</div>
<nav class="navbar navbar-expand-sm bg-light navbar-light">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
　　<ul　class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" href="#">Attivo</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="#">Disabilitato</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>
测试看看 ‹/›

Stati attivati e disattivati: È possibile aggiungere la classe .active all'elemento <a> per evidenziare l'opzione selezionata. La classe .disabled viene utilizzata per impostare il link come non cliccabile.

Marchio/Logo

La classe .navbar-brand viene utilizzata per evidenziare il marchio/Logo:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!-- Brand/logo -->
　　<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>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">Link 3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>Marchio/Logo</h2>
　　<p>La classe .navbar-brand viene utilizzata per evidenziare il marchio/Logo:</p>
</div>
</body>
</html>
测试看看 ‹/›

Se si utilizza un'immagine, è possibile utilizzare la classe .navbar-brand per impostare l'adattamento dell'immagine alla barra di navigazione.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!-- Brand/logo -->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</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>
　　　　<li　class="nav-item">
　　　　　　<a class="nav-link" href="#">Link 3</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>Brand / Logo</h2>
　　<p>Se si utilizza un'immagine, è possibile impostare l'adattamento dell'immagine alla barra di navigazione utilizzando la classe .navbar-brand.</p>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione pieghevole

Di solito, sulle schermate piccole, pieghiamo la barra di navigazione e mostriamo le opzioni di navigazione tramite clic.

Per creare una barra di navigazione pieghevole, aggiungi al pulsante: data-toggle="collapse" e data-target="#thetargetAggiungi la classe. Poi avvolgi il contenuto di navigazione (link) in un div che ha come id corrispondente l'id specificato nel pulsante data-target:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
　　<a class="navbar-brand" href="#">Navbar</a>
　　<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
　　　　<span class="navbar-toggler-icon"></span>
　　</button>
　　<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>
<br>
<div class="container">
　　<h2>Barra di navigazione pieghevole</h2>
　　<p>Di solito, sulle schermate piccole, pieghiamo la barra di navigazione e mostriamo le opzioni di navigazione tramite clic.</p>
　　<p>Nota: se rimuovi la classe .navbar-expand-md, i link di navigazione saranno sempre nascosti e il pulsante di cambio resterà sempre visibile.</p>
</div>
</body>
</html>
测试看看 ‹/›

La barra di navigazione utilizza menu a discesa

È possibile impostare menu a discesa nella barra di navigazione:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<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">
　　　　　　　　Link a discesa
　　　　　　</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>
<br>
　　
<div class="container">
　　<h2>Uso del menu a discesa nella barra di navigazione</h2>
　　<p>Sulla barra di navigazione è possibile impostare un menu a discesa.</p>
</div>
</body>
</html>
测试看看 ‹/›

Modulo e pulsante della barra di navigazione

Il elemento form della barra di navigazione utilizza la classe per posizionare i campi di input e i pulsanti:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<input class="form-control" type="text" placeholder="Cerca">
　　　　<button class="btn btn-success" type="button">Cerca</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Modulo della barra di navigazione</h2>
　　<p>Il elemento form della barra di navigazione utilizza la classe class="form-inline" per posizionare i campi di input e i pulsanti:</p>
</div>
</body>
</html>
测试看看 ‹/›

Puoi anche utilizzare altre classi di input box, come .input-group-addon che viene utilizzata per aggiungere etichette piccole prima dei campi di input.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<div class="input-group">
　　　　　　<span class="input-group-addon">@</span>
　　　　　　<input type="text" class="form-control" placeholder="Username">
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Modulo di navigazione</h2>
　　<p>La classe .input-group-addon viene utilizzata per aggiungere etichette piccole prima dei campi di input.</p>
</div>
</body>
</html>
测试看看 ‹/›

Testo della barra di navigazione

Utilizzando la classe .navbar-text è possibile impostare il testo non link della barra di navigazione, garantendo allineamento orizzontale, colore e spazi interni identici.

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<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>
　　<!-- Testo della navbar -->
　　<span class="navbar-text">
　　　　Testo della navbar
　　</span>
</nav>
<br>
<div class="container">
　　<h2>Testo della barra di navigazione</h2>
　　<p>Usando la classe .navbar-text per impostare il testo non link della barra di navigazione, si garantisce allineamento orizzontale, colore e spaziatura uniformi.</p>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione fissa

La barra di navigazione può essere fissata in testa o in fondo.

Usiamo la classe .fixed-top per implementare la barra di navigazione fissa:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a　class="navbar-brand"　href="#">Logo</a>
　　<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>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>Barra di navigazione fissa</h2>
　　<p>导航栏可以固定在头部或者底部。</p>
　　<h1>滚动页面查看效果。</h1>
</div>
</body>
</html>
测试看看 ‹/›

.fixed-bottom classe viene utilizzata per impostare la barra di navigazione fissa in basso:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body　style="height:1500px">
<nav　class="navbar　navbar-expand-sm　bg-dark　navbar-dark　fixed-bottom">
　　<a　class="navbar-brand"　href="#">Logo</a>
　　<ul　class="navbar-nav">
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">Link</a>
　　　　</li>
　　　　<li　class="nav-item">
　　　　　　<a　class="nav-link"　href="javascript:void(0)">Link</a>
　　　　</li>
　　</ul>
</nav>
<div　class="container-fluid">
　　<h2>底部固定导航栏</h2>
　　<p>导航栏可以固定在头部或者底部。</p>
　　<h1>滚动页面查看效果。</h1>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4面包屑导航Bootstrap4导航