Corso di base di Bootstrap

Plugin di Bootstrap

Plugin del menu a discesa (Dropdown) di Bootstrap

Bootstrap 下拉菜单 Questo capitolo spiega il menu a discesa, ma non include la parte interattiva. Questo capitolo illustrerà l'interazione del menu a discesa. Utilizzando il plugin del menu a discesa (Dropdown), puoi aggiungere un menu a discesa a qualsiasi componente (ad esempio, barra di navigazione, schede, menu a pilastro, pulsanti, ecc.).

se desideri utilizzare funzionalità specifiche di questo plugin, dovrai includere dropdown.js。O, come Panoramica dei plugin di Bootstrap come menzionato nel capitolo bootstrap.js o la versione compressa bootstrap.min.js。

Uso

Puoi commutare il contenuto nascosto del plugin del menu a discesa (Dropdown):

attraverso l'attributo data：Aggiungi al link o al pulsante data-toggle="dropdown" per commutare il menu a discesa, come mostrato di seguito:

<div>
　　<a data-toggle="dropdown" href="#">Trigger del menu a discesa (Dropdown)</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Sei necessario mantenere l'integrità del link (utile quando il JavaScript non è attivato nel browser), utilizza data-target 属性代替 href="#"：

<div>
　　<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
　　　　Menu a discesa (Dropdown) <span></span>
　　</a>
　　<ul role="menu" aria-labelledby="dLabel">
　　　　...
　　</ul>
</div>

Attraverso JavaScriptEsempio di chiamata JavaScript per commutare l'interruttore a discesa, utilizzare il metodo seguente:
```
$('.dropdown-toggle').dropdown()
```

Esempio online

All'interno della barra di navigazione

Il seguente esempio dimostra l'uso del menu a discesa all'interno della barra di navigazione:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barra di navigazione predefinita</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>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Sito Web di Base</a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java　
					<b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">Link separato</a></li>
					<li class="divider"></li>
					<li><a href="#">Un altro link separato</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>
</body>
</html>

测试看看 ‹/›

结果如下所示：

All'interno delle schede

Il seguente esempio dimostra l'uso del menu a discesa all'interno delle schede:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Tabella a schede con 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>
<p>Tabella a schede con menu a discesa</p>
<ul class="nav nav-tabs">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">SVN</a></li>
	<li><a href="#">iOS</a></li>
	<li><a href="#">VB.Net</a></li>
	<li class="dropdown">
		<a class="dropdown-toggle" data-toggle="dropdown" href="#">
			Java <span class="caret"></span>
		</a>
		<ul class="dropdown-menu">
			<li><a href="#">Swing</a></li>
			<li><a href="#">jMeter</a></li>
			<li><a href="#">EJB</a></li>
			<li class="divider"></li>
			<li><a href="#">Link separato</a></li>
		</ul>
	</li>
	<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Opzione

Nessuna opzione.

Metodo

C'è un metodo semplice per commutare l'interruttore a discesa per mostrare o nascondere l'interruttore a discesa.

$().dropdown('toggle')

Esempio online

Il seguente esempio dimostra l'uso del metodo dell'interruttore a discesa (Dropdown) plugin:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Plugin metodo menu a discesa (Dropdown)</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>
<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid">　
	<div class="navbar-header">
		<a class="navbar-brand" href="#">Sito Web di Base</a>
	</div>
	<div id="myexample">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a></li>
				<ul class="dropdown-menu">
					<li><a id="action-1" href="#">metro</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">Link separato</a></li>
					<li class="divider"></li>
					<li><a href="#">Un altro link separato</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>	
</nav>
<script>
$(function(){
	// 默认显示
	$(".dropdown-toggle").dropdown('toggle');
});　
</script>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 滚动监听插件 Bootstrap 模态框插件