Guida di base Bootstrap4

Fusione di Bootstrap4 Carte di Bootstrap4

Menu a Discesa di Bootstrap4

Quando l'utente passa il mouse sopra o clicca sull'elemento attivatore, di solito viene utilizzato un menu a discesa all'interno del titolo di navigazione per visualizzare l'elenco dei link correlati. Puoi utilizzare il plugin di menu a discesa di Bootstrap per aggiungere menu a discesa commutabili praticamente a qualsiasi contenuto (come link, pulsanti o gruppi di pulsanti, barre di navigazione, schede e navigazione a pillole, ecc.) senza scrivere alcun codice JavaScript.

I menu a discesa di Bootstrap4 dipendono da popper.min.js.

I menu a discesa sono commutabili e vengono visualizzati come menu contestuali in formato elenco di link.

Esempio

<!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 discesa</h2>
　　<p>.dropdown viene utilizzata per specificare un menu a discesa.</p>
　　<p>Aggiungi la classe .dropdown-menu per impostare il menu a discesa effettivo.</p>
　　<p>Possiamo utilizzare un pulsante o un link per aprire il menu a discesa, il pulsante o il link devono aggiungere .dropdown-toggle e l'attributo data-toggle="dropdown".</p>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Pulsante a discesa
　　　　</button>
　　　　<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>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Esempio di analisi

.dropdown per specificare un menu a discesa.

Possiamo utilizzare un pulsante o un link per aprire il menu a discesa, il pulsante o il link devono aggiungere .dropdown-toggle e l'attributo data-toggle="dropdown".

Aggiungi la classe .dropdown-menu all'elemento <div> per impostare il menu a discesa effettivo, quindi aggiungi .dropdown-item.

Possiamo anche utilizzare il tag <a>:

Esempio

<!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">
	<div class="dropdown">
	　　<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Link Dropdown
	　　</a>
	　　<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
		<a class="dropdown-item" href="#">Azione</a>
		<a class="dropdown-item" href="#">Altra azione</a>
		<a class="dropdown-item" href="#">Qualcosa qui</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Linea orizzontale nei menu a discesa

.dropdown-divider viene utilizzata per creare una linea orizzontale nei menu a discesa:

Esempio

<!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>Nei menu a discesa</h2>
　　<p>La classe .dropdown-divider viene utilizzata per creare una linea orizzontale nei menu a discesa:</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Pulsante a discesa
　　　　</button>
　　　　<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 class="dropdown-divider"></div>
　　　　　　<a class="dropdown-item" href="#">Un altro link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Titolo nei menu a discesa

.dropdown-header viene utilizzata per aggiungere un titolo nei menu a discesa:

Esempio

<!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>Nei menu a discesa</h2>
　　<p>La classe .dropdown-header viene utilizzata per aggiungere un titolo nei menu a discesa:</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Pulsante a discesa
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<h5 class="dropdown-header">Intestazione Dropdown</h5>
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　　　<a class="dropdown-item" href="#">Link 3</a>
　　　　　　<h5 class="dropdown-header">Intestazione Dropdown</h5>
　　　　　　<a class="dropdown-item" href="#">Un altro link</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Opzioni disponibili e disabilitate nel menu a discesa

.active classe farà brillare l'opzione del menu a discesa (aggiungendo lo sfondo blu).

<p>Per disabilitare l'opzione del menu a discesa, è possibile utilizzare la classe .disabled.</p>

Esempio

<!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 discesa</h2>
　　<p>La classe .active farà brillare l'opzione del menu a discesa (aggiungendo lo sfondo blu).</p>
　　<p>Per disabilitare l'opzione del menu a discesa, è possibile utilizzare la classe .disabled.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Pulsante a discesa
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Normale</a>
　　　　　　<a class="dropdown-item active" href="#">Attivo</a>
　　　　　　<a class="dropdown-item disabled" href="#">Disabilitato</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Posizionamento del menu a discesa

<p>Se si desidera che il menu a discesa si allinei a destra, è possibile aggiungere la classe .dropdown-menu-right alla classe .dropdown-menu dell'elemento.</p>

Esempio

<!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 discesa</h2>
　　<p>Se si desidera che il menu a discesa si allinei a destra, è possibile aggiungere la classe .dropdown-menu-right alla classe .dropdown-menu dell'elemento.</p>
　　<div class="dropdown">
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
　　　　　　Pulsante a discesa
　　　　</button>
　　　　<div class="dropdown-menu dropdown-menu-right">
　　　　　　<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>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Impostazione della direzione di uscita del menu a discesa

La direzione di uscita del menu a discesa è impostata per impostazione predefinita verso il basso, ma possiamo anche impostare diverse direzioni.

Specifica il menu a discesa che si apre verso destra

Se si desidera che il menu a discesa si apra verso destra, è possibile aggiungere la classe "dropright" al elemento div:

Esempio

<!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 discesa</h2>
　　<p> .dropright classe viene utilizzata per impostare il menu a discesa che si apre verso destra:</p><br>
　　<!-- Default dropright button -->
	<div class="btn-group dropright">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropright
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Link del menu a discesa -->
		<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
　　　　　　　　</div>
	</div>
	<!-- Split dropright button -->
	<div class="btn-group dropright">
	　　<button type="button" class="btn btn-secondary">
		Split dropright
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Attiva il Dropright</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Link del menu a discesa -->
		　<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Specifica il menu a scorrimento che si apre verso l'alto

Se desideri che il menu a scorrimento si apra verso l'alto, puoi aggiungere la classe "dropup" all'elemento div:

Esempio

<!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 discesa</h2>
　　　　<p>La classe .dropup viene utilizzata per impostare il menu a discesa che si apre verso l'alto:</p><br><br><br><br><br><br><br><br>
　　<!-- Default dropup button -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　Dropup
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- Link del menu a discesa -->
　　　　　　　　<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
　　　　</div>
　　　　</div>
　　　　
　　　　<!-- Split dropup button -->
　　　　<div class="btn-group dropup">
　　　　<button type="button" class="btn btn-secondary">
　　　　　　　　Split dropup
　　　　</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
　　　　　　　　<span class="sr-only">Attiva il menu a discesa</span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　　　<!-- Link del menu a discesa -->
　　　　　　　　<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
　　　　</div>
　　　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Specifica il menu a discesa che si apre a sinistra

Se desideri che il menu a discesa si apra verso l'alto, puoi aggiungere la classe "dropleft" all'elemento div:

Esempio

<!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" style="text-align:center;">
　　<h2>Menu a discesa</h2>
　　<p>La classe .dropleft viene utilizzata per impostare il menu a discesa che si apre a sinistra:</p><br>
　　<!-- Default dropleft button -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		Dropleft
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Link del menu a discesa -->
		<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
	　　</div>
	</div>
<br><br><br>
	<!-- Split dropleft button -->
	<div class="btn-group dropleft">
	　　<button type="button" class="btn btn-secondary">
		Split dropleft
	　　</button>
	　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		<span class="sr-only">Attivare Dropleft</span>
	　　</button>
	　　<div class="dropdown-menu">
		<!-- Link del menu a discesa -->
		<a class="dropdown-item" href="#">Azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Altra azione</a>
　　　　　　　　<a class="dropdown-item" href="#">Qualcosa qui</a>
　　　　　　　　<div class="dropdown-divider"></div>
　　　　　　　　<a class="dropdown-item" href="#">Link separato</a>
	　　</div>
	</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Impostare il menu a discesa nel pulsante

Possiamo aggiungere un menu a discesa nei pulsanti:

Esempio

<!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>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-primary">Primary</button>
　　　　<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
　　
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-secondary">Secondary</button>
　　　　<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-success">Success</button>
　　　　<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-info">Info</button>
　　　　<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-warning">Warning</button>
　　　　<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-danger">Danger</button>
　　　　<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
　　　　　　<span class="caret"></span>
　　　　</button>
　　　　<div class="dropdown-menu">
　　　　　　<a class="dropdown-item" href="#">Link 1</a>
　　　　　　<a class="dropdown-item" href="#">Link 2</a>
　　　　</div>
　　</div>
</div>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Fusione di Bootstrap4 Carte di Bootstrap4