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

Tutorial di base Bootstrap

Plugin Bootstrap

Bootstrap 按鈕組

I gruppi di pulsanti permettono a più pulsanti di essere impilati sulla stessa riga. È molto utile quando si desidera allineare i pulsanti insieme. Puoi farlo tramite Plugin dei pulsanti Bootstrap(Button) Aggiungere stili opzionali JavaScript per caselle di selection a singolo riquadro e caselle di selection a quadrato.

Di seguito è riassunta una tabella che elenca alcune classi importanti fornite da Bootstrap per l'uso dei gruppi di pulsanti:

Classedescrizioneesempio di codice
.btn-groupQuesta classe viene utilizzata per formare gruppi di pulsanti di base. Nella .btn-group e inserire una serie di pulsanti con classi .btn dei pulsanti.
<div>
　　<button type="button">Button1</button>
　　　<button type="button">Button2</button>
</div>
.btn-toolbarQuesta classe aiuta a combinare più elementi <div> in un singolo <div>, spesso ottenendo componenti più complessi.
<div role="toolbar">
　　<div>...</div>
　　<div>...</div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsQueste classi possono essere applicate all'adattamento delle dimensioni di un intero gruppo di pulsanti, senza dover regolare le dimensioni di ogni pulsante.
<div>...</div>
<div>...</div>
<div>...</div>
.btn-group-verticalQuesta classe fa sì che un gruppo di pulsanti venga visualizzato verticalmente, piuttosto che orizzontalmente.
<div>
　　...
</div>

Gruppo di pulsanti di base

Il seguente esempio dimostra la classe discussa nella tabella sopra .btn-group L'uso di:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Gruppo 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">Pulsante 1</button>
	<button type="button" class="btn btn-default">Pulsante 2</button>
	<button type="button" class="btn btn-default">Pulsante 3</button>
</div>
</body>
</html>
測試看看 ‹/›

結果如下所示：

Barra degli strumenti dei pulsanti

Il seguente esempio dimostra la classe discussa nella tabella sopra .btn-toolbar L'uso di:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Barra degli strumenti dei pulsanti</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-toolbar" role="toolbar">
	<div class="btn-group">
		<button type="button" class="btn btn-default">Pulsante 1</button>
		<button type="button" class="btn btn-default">Pulsante 2</button>
		<button type="button" class="btn btn-default">Pulsante 3</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">Pulsante 4</button>
		<button type="button" class="btn btn-default">Pulsante 5</button>
		<button type="button" class="btn btn-default">Pulsante 6</button>
	</div>
	<div class="btn-group">
		<button type="button" class="btn btn-default">Pulsante 7</button>
		<button type="button" class="btn btn-default">Pulsante 8</button>
		<button type="button" class="btn btn-default">Pulsante 9</button>
	</div>
</div>
</body>
</html>
測試看看 ‹/›

結果如下所示：

Dimensione dei pulsanti

Il seguente esempio dimostra la classe discussa nella tabella sopra .btn-group-* L'uso di:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Dimensione dei pulsanti</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 btn-group-lg">
	<button type="button" class="btn btn-default">Pulsante 1</button>
	<button type="button" class="btn btn-default">Pulsante 2</button>
	<button type="button" class="btn btn-default">Pulsante 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Pulsante 4</button>
	<button type="button" class="btn btn-default">Pulsante 5</button>
	<button type="button" class="btn btn-default">Pulsante 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Pulsante 7</button>
	<button type="button" class="btn btn-default">Pulsante 8</button>
	<button type="button" class="btn btn-default">Pulsante 9</button>
</div>
</body>
</html>
測試看看 ‹/›

結果如下所示：

annidato

È possibile annidare un altro gruppo pulsanti all'interno di un gruppo pulsanti, ossia, all'interno di un .btn-group annidato in un altro .btn-group .Quando si desidera combinare un menu a discesa con una serie di pulsanti, si utilizza questo.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Gruppo pulsanti annidati</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">Pulsante 1</button>
	<button type="button" class="btn btn-default">Pulsante 2</button>
	<div class="btn-group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			Clicca qui
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉鏈接 1</a></li>
			<li><a href="#">下拉鏈接 2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
測試看看 ‹/›

結果如下所示：

Gruppo pulsanti verticali

Il seguente esempio dimostra la classe discussa nella tabella sopra .btn-group-vertical L'uso di:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
　　　<title>Esempio Bootstrap - Gruppo pulsanti verticali</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-vertical">
	<button type="button" class="btn btn-default">Pulsante 1</button>
	<button type="button" class="btn btn-default">Pulsante 2</button>
	<div class="btn-group-vertical">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
			Clicca qui
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu">
			<li><a href="#">下拉鏈接 1</a></li>
			<li><a href="#">下拉鏈接 2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
測試看看 ‹/›

結果如下所示：

Bootstrap 按鈕下拉菜單Bootstrap 下拉菜單