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

Corso di base di Bootstrap

Plugin di Bootstrap

组输入框 Bootstrap

Questo capitolo spiegherà un'altra caratteristica supportata da Bootstrap, il gruppo di caselle di input. Il gruppo di caselle di input si estende da Controlli di modulo.Aggiungi facilmente testo o pulsanti come prefissi e suffissi ai campi di input testuali utilizzando il gruppo di caselle di input.

Aggiungendo contenuti prefissi e suffissi al campo di input, puoi aggiungere elementi comuni all'input dell'utente. Ad esempio, puoi aggiungere il simbolo dollaro, o aggiungere @ davanti al nome utente di Twitter, o altri elementi comuni necessari per l'API dell'applicazione.

Aggiungi contenuti prefissi o suffissi al campo di input .form-control I passaggi per aggiungere elementi prefissi o suffissi sono i seguenti:

  • Metti l'elemento prefisso o suffisso in un div con class .input-group del <div>.

  • Poi, all'interno dello stesso <div>, nel class .input-group-addon Aggiungi contenuti extra all'interno del <span>.

  • Metti questo <span> davanti o dietro all'elemento <input>.

Per mantenere la compatibilità tra i browser, evita di usare l'elemento <select> perché non viene completamente visualizzato nei browser WebKit. Non applicare direttamente la classe del gruppo di caselle di input al gruppo di form, il gruppo di caselle di input è un componente isolato.

Gruppo di caselle di input di base

Esempio seguente dimostra il gruppo di caselle di input di base:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - Gruppo di caselle di input 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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="twitterhandle">
		</div>
		<br>
		<div class="input-group">
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
		<br>
		<div class="input-group">
			<span class="input-group-addon">$</span>
			<input type="text" class="form-control">
			<span class="input-group-addon">.00</span>
		</div>
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

Dimensione del gruppo di caselle di input

Puoi cambiare la dimensione del gruppo di caselle di input aggiungendo .input-group Aggiungi classi relative alla dimensione del form (ad esempio .input-group-lg, input-group-sm）per cambiare la dimensione del gruppo di caselle di input. Il contenuto della casella di input si adatterà automaticamente.

Esempio seguente dimostra questo:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - Dimensione del gruppo di caselle di input</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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="input-group input-group-lg">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div><br>
		<div class="input-group input-group-sm">
			<span class="input-group-addon">@</span>
			<input type="text" class="form-control" placeholder="Twitterhandle">
		</div>
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

Plugin di casella di controllo e pulsante radio

Puoi utilizzare il plugin di casella di controllo e pulsante radio come elemento prefisso o suffisso del gruppo di input box, come nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - plugin di casella di controllo e pulsante radio nel gruppo di input box</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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="checkbox">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-addon">
						<input type="radio">
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

Plugin di pulsante

Puoi anche utilizzare il pulsante come elemento prefisso o suffisso del gruppo di input box, in questo caso non stai aggiungendo .input-group-addon class, è necessario utilizzare la classe .input-group-btn Per avvolgere il pulsante. È necessario perché lo stile predefinito del browser non viene sovrascritto. L'esempio seguente dimostra questo:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - plugin di pulsante per il gruppo di input box</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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Vai!
						</button>
					</span>
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<input type="text" class="form-control">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">
							Vai!
						</button>
					</span>
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

Pulsante con menù a discesa

Aggiungi un pulsante a menù a discesa nel gruppo di input box, è sufficiente semplicemente avvolgere un .input-group-btn Basta avvolgere il pulsante e il menù a discesa con la classe, come nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - pulsante a menù a discesa nel gruppo di input box</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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Menù a discesa　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Funzione</a></li>
							<li><a href="#">Un'altra funzione</a></li>
							<li><a href="#">Altro</a></li>
							<li class="divider"></li>
							<li><a href="#">Collegamento separato</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
							Menù a discesa　
							<span class="caret"></span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Funzione</a></li>
							<li><a href="#">Un'altra funzione</a></li>
							<li><a href="#">Altro</a></li>
							<li class="divider"></li>
							<li><a href="#">Collegamento separato</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

Pulsante a menù a discesa separato

Aggiungi un pulsante a menù a discesa separato nel gruppo di input box, utilizza uno stile simile al pulsante del menù a discesa, ma aggiungi la funzione principale come nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - pulsante a menù a discesa separato nel gruppo di input</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 style="padding: 100px 100px 10px;">
	<form class="bs-example bs-example-form" role="form">
		<div class="row">
			<div class="col-lg-6">
				<div class="input-group">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Menu a discesa
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
							<span class="caret"></span>
							<span class="sr-only">Cambia menu a discesa</span>
						</button>
						<ul class="dropdown-menu">
							<li><a href="#">Funzione</a></li>
							<li><a href="#">Un'altra funzione</a></li>
							<li><a href="#">Altro</a></li>
							<li class="divider"></li>
							<li><a href="#">Collegamento separato</a></li>
						</ul>
					</div><!--　/btn-group　-->
					<input type="text" class="form-control">
				</div><!--　/input-group　-->
			</div><!-- /.col-lg-6 --><br>
			<div class="col-lg-6">
				<div class="input-group">
					<input type="text" class="form-control">
					<div class="input-group-btn">
						<button type="button" class="btn btn-default" tabindex="-1">Menu a discesa
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
							<span class="caret"></span>
							<span class="sr-only">Cambia menu a discesa</span>
						</button>
						<ul class="dropdown-menu pull-right">
							<li><a href="#">Funzione</a></li>
							<li><a href="#">Un'altra funzione</a></li>
							<li><a href="#">Altro</a></li>
							<li class="divider"></li>
							<li><a href="#">Collegamento separato</a></li>
						</ul>
					</div><!--　/btn-group　-->
				</div><!--　/input-group　-->
			</div><!--　/.col-lg-6　-->
		</div><!--　/.row　-->
	</form>
</div>
</body>
</html>
测试看看 ‹/›

如下所示结果：

元素导航 Bootstrap菜单下拉按钮 Bootstrap