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

Tutorial di base Bootstrap

Plugin Bootstrap

Menu a discesa Bootstrap

Questo capitolo si concentrerà sui menu a discesa di Bootstrap. I menu a discesa sono intercambiabili e mostrano un menu contestuale in formato elenco. Questo può essere fatto utilizzando Plugin JavaScript per menu a discesa (Dropdown) per implementare l'interazione.

Per usare il menu a discesa, aggiungi semplicemente la classe .dropdown Aggiungi un menu a discesa all'interno e vedrai l'esempio di un menu a discesa di base:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Menu a discesa (Dropdowns)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		Argomento
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Estrazione dati</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Comunicazione dati/Rete</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Link separato</a>
		</li>
	</ul>
</div>
</body>
</html>
Testa e vedi <‹/›

Il risultato è come segue:

Opzioni

allineamento

Attraverso .dropdown-menu Aggiungi la classe .pull-right Allinea a destra il menu a discesa. Ecco un esempio che dimostra come fare:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Menu a discesa allineato a destra</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown">Argomento
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu pull-right" role="menu"　
		aria-labelledby="dropdownMenu1">
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Estrazione dati</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Comunicazione dati/Rete</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Link separato</a>
		</li>
	</ul>
</div>
</body>
</html>
Testa e vedi <‹/›

Il risultato è come segue:

Titolo

Puoi usare la classe dropdown-header Aggiungi un titolo alla sezione etichetta del menu a discesa. Ecco un esempio che dimostra come fare:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Titolo del menu a discesa</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
	<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"　
			data-toggle="dropdown"
		Argomento
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li role="presentation" class="dropdown-header">Titolo del menu a discesa</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Java</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Estrazione dati</a>
		</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">
				Comunicazione dati/reti
			</a>
		</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">Titolo del menu a discesa</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">Link separato</a>
		</li>
	</ul>
</div>
</body>
</html>
Testa e vedi <‹/›

Il risultato è come segue:

Più esempi

ClasseDescrizioneEsempio
.dropdownSpecificare il menu a discesa, tutti i menu a discesa sono avvolti nella classe .dropdownProva adesso
.dropdown-menuCreare un menu a discesaProva adesso
.dropdown-menu-rightAllineamento a destra del menu a discesaProva adesso
.dropdown-headerAggiungi un titolo nel menu a discesaProva adesso
.dropupSpecifica il menu a discesa che si apre verso l'altoProva adesso
.disabledElementi disabilitati nel menu a discesaProva adesso
.dividerLinea di separazione nel menu a discesaProva adesso
Gruppo di pulsanti BootstrapIcone font Bootstrap (Glyphicons)