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

Tutorial di base Bootstrap4

Bootstrap4 导航

Bootstrap offre un metodo semplice e veloce per creare componenti di navigazione di base, come etichette e pillole, che sono molto flessibili e belle. Tutti i componenti di navigazione di Bootstrap (schede e pillole) condividono la stessa etichetta di base e stili attraverso la classe .nav.

Se desideri creare una barra di navigazione orizzontale semplice, aggiungi .classe nav, aggiungi .classe nav-item a ogni <li> opzione, aggiungi .classe nav-link a ogni link:

<!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>Navigazione</h2>
　　<p>Navigazione orizzontale semplice:</p>
　　<ul class="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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabilitato</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Modalità di allineamento della navigazione

.justify-content-center classe imposta per visualizzazione centrata della navigazione, .justify-content-end classe imposta per allineamento a destra della 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>
<div class="container">
　　<h2>Navigazione</h2>
　　<p>Navigazione a sinistra (predefinita):</p>
　　<ul class="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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabilitato</a>
　　　　</li>
　　</ul>
　　
　　<p class="text-center">Navigazione al centro:</p>
　　<ul class="nav justify-content-center">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabilitato</a>
　　　　</li>
　　</ul>
　　　　
　　<p class="text-right">Navigazione a destra:</p>
　　<ul class="nav justify-content-end">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabilitato</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Navigazione verticale

.La classe .flex-column viene utilizzata per creare una navigazione verticale:

<!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>Navigazione verticale</h2>
　　<p>La classe .flex-column viene utilizzata per creare una navigazione verticale:</p>
　　<ul class="nav flex-column">
　　　　<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>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link disabled" href="#">Disabilitato</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>
测试看看 ‹/›

Schede

Utilizzando la classe .nav-tabs è possibile trasformare la navigazione in schede. Quindi per contrassegnare l'opzione selezionata si utilizza la classe .active.

<!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>Schede</h2>
　　<p>Navigazione a schede:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" 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>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione a pillole

.La classe .nav-pills può impostare le voci di navigazione in forma di pillole.

<!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>Pille</h2>
　　<p>Barra di navigazione a pillole:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" 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>
</div>
</body>
</html>
测试看看 ‹/›

Navigazione a larghezza uguale

.La classe .nav-justified può impostare la visualizzazione a larghezza uguale delle voci 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>
<div class="container">
　　<h2>Navigazione a larghezza uguale</h2>
　　<p>La classe .nav-justified può impostare la visualizzazione a larghezza uguale delle voci di navigazione.</p>
　　<ul class="nav nav-pills nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" 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><br>
　　<p>Tab schede giustificate:</p>
　　<ul class="nav nav-tabs nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" 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>
</div>
</body>
</html>
测试看看 ‹/›

Barra di navigazione a pillole con discesa

<!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 a pillole con discesa</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Attivo</a>
　　　　</li>
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Menu 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>
　　　　<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>
</div>
</body>
</html>
测试看看 ‹/›

Menu a schede con discesa

<!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>Menu a schede con discesa</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" href="#">Attivo</a>
　　　　</li>
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Menu 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>
　　　　<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>
</div>
</body>
</html>
测试看看 ‹/›

Schede dinamiche

Se desideri impostare schede dinamiche e scorribili, aggiungi l'attributo data-toggle="tab" a ogni link. Poi aggiungi la classe .tab-pane al contenuto corrispondente di ogni scheda.

Se desideri un effetto di dissolvenza, aggiungi .tab-pane dopo .tab-pane 　 .classe fade:

<!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>Scorrimento schede</h2>
　　<br>
　　<!-- Nav tabs -->
　　<ul class="nav nav-tabs" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
　　　　</li>
　　</ul>
　　<!-- Tab panes -->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2>HOME</h2>
　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu 1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu 2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›

Schede dinamiche a guscio

Per creare schede dinamiche a guscio, è sufficiente sostituire data-toggle in Impostare l'attributo data-toggle="pill":

<!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>选项卡切换胶囊</h2>
　　<br>
　　<!-- Nav pills -->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
　　　　</li>
　　</ul>
　　<!-- Tab panes -->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2>HOME</h2>
　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu 1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu 2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
　　　　</div>
　　</div>
</div>
</body>
</html>
测试看看 ‹/›
Bootstrap4 导航栏Bootstrap4 折叠