Tutorial di base Bootstrap

Plugin Bootstrap

Bootstrap 按钮下拉菜单

Questa sezione spiega come aggiungere un menu a discesa ai pulsanti utilizzando le classi Bootstrap. Per aggiungere un menu a discesa a un pulsante, è sufficiente aggiungere semplicemente un .btn-group Inserisci i pulsanti e il menu a discesa nel contenitore. Puoi anche utilizzare <span></span> per indicare che il pulsante è un menu a discesa.

Di seguito è riportato un esempio di menu a discesa di pulsanti di base semplice:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Menu a discesa di pulsanti di base</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="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown"
		Predefinito　<span　class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Originale　
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Menu a discesa di pulsanti divisi

Il menu a discesa di pulsanti divisi utilizza uno stile simile ai pulsanti del menu a discesa, ma aggiunge funzionalità originali al menu a discesa. La parte sinistra del pulsante diviso è la funzione originale, mentre la parte destra è il pulsante di commutazione per visualizzare il menu a discesa.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Menu a discesa di pulsanti divisi</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="btn-group">
	<button　type="button"　class="btn　btn-default">Predefinito</button>
	<button　type="button"　class="btn　btn-default　dropdown-toggle"　
			data-toggle="dropdown"
		<span class="caret"></span>
		<span　class="sr-only">Cambia il menu a discesa</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button　type="button"　class="btn　btn-primary">Originale</button>
	<button　type="button"　class="btn　btn-primary　dropdown-toggle"　
			data-toggle="dropdown"
		<span class="caret"></span>
		<span　class="sr-only">Cambia il menu a discesa</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Dimensione dei pulsanti del menu a discesa

Puoi utilizzare menu a discesa con pulsanti di diverse dimensioni:.btn-lg、.btn-sm o .btn-xs。

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Dimensione dei pulsanti 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="btn-group">
	<button　type="button"　class="btn　btn-default　dropdown-toggle　btn-lg"　
			data-toggle="dropdown"
		Predefinito　<span　class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button　type="button"　class="btn　btn-primary　dropdown-toggle　btn-sm"　
			data-toggle="dropdown"
		Originale　<span　class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle btn-xs"　
			data-toggle="dropdown"
		Riuscito <span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">Funzione</a></li>
		<li><a href="#">另一个功能</a></li>
		<li><a href="#">其他</a></li>
		<li class="divider"></li>
		<li><a href="#">分离的链接</a></li>
	</ul>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Menu a tendina del pulsante

Il menu a tendina può essere spostato verso l'alto, è sufficiente semplicemente spostare il padre .btn-group Aggiungi contenitore .dropup è sufficiente.

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
　　　<title>Esempio Bootstrap - Menu a tendina sul pulsante</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="row" style="margin-left:50px; margin-top:200px">
	<div class="btn-group dropup">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Predefinito　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Funzione</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
	<div class="btn-group dropup">
		<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Originale　
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Funzione</a></li>
			<li><a href="#">另一个功能</a></li>
			<li><a href="#">其他</a></li>
			<li class="divider"></li>
			<li><a href="#">分离的链接</a></li>
		</ul>
	</div>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 输入框组 Bootstrap 按钮组