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

Tutorial di base Bootstrap

Plugin Bootstrap

表单 Bootstrap

In questa sezione, impareremo come utilizzare Bootstrap per creare moduli. Bootstrap può creare moduli di diversi stili utilizzando semplici tag HTML e classi estese.

Layout del modulo

Bootstrap offre i seguenti tipi di layout di modulo:

  • Modulo verticale (predefinito)

  • Modulo in linea

  • Formulario orizzontale

Modulo verticale o di base

La struttura di base del modulo è inclusa in Bootstrap, e i controlli di modulo individuali ricevono automaticamente alcune stili globali. Di seguito sono elencati i passaggi per creare un modulo di base:

  • Aggiungi a elemento genitore <form>. role="form".

  • Metti l'etichetta e il controllo in una classe con .form-group Nel <div>. È necessario per ottenere il miglior spaziamento.

  • Aggiungi la classe =" a tutti gli elementi di testo <input>, <textarea> e <select>.form-control".

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example - Basic Form</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>
<form role="form">
	<div class="form-group">
		<label for="name">Nome</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="Inserisci il nome">
	</div>
	<div class="form-group">
		<label for="inputfile">Input file</label>
		<input type="file" id="inputfile">
		<p class="help-block">Ecco un esempio di testo di aiuto a livello di blocco.</p>
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Marcha
		</label>
	</div>
	<button type="submit" class="btn btn-default">Invia</button>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Modulo in linea

Se desideri creare un modulo in cui tutti gli elementi sono in linea, allineati a sinistra e le etichette sono accostate, aggiungi la classe a etichetta <form>. .form-inline.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example - Inline Form</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>
<form class="form-inline" role="form">
	<div class="form-group">
		<label class="sr-only" for="name">Nome</label>
		<input type="text" class="form-control" id="name">　
			　　　placeholder="Inserisci il nome">
	</div>
	<div class="form-group">
		<label class="sr-only" for="inputfile">Input file</label>
		<input type="file" id="inputfile">
	</div>
	<div class="checkbox">
		<label>
			<input type="checkbox"> Marcha
		</label>
	</div>
	<button type="submit" class="btn btn-default">Invia</button>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

  • Per impostazione predefinita, in Bootstrap i input, select e textarea hanno una larghezza del 100%. Quando si utilizza un formulario inline, è necessario impostare una larghezza per i controlli di formulario.

  • Usa la classe .sr-only, puoi nascondere le etichette del formulario inline.

Formulario orizzontale

Il formulario orizzontale è diverso non solo nel numero dei tag, ma anche nella presentazione del formulario. Per creare un formulario a layout orizzontale, segui i seguenti passaggi:

  • Aggiungi la classe al elemento genitore <form> .form-horizontal.

  • Metti l'etichetta e il controllo in una classe con .form-group nel <div>.

  • Aggiungi la classe alla etichetta .control-label.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Formulario orizzontale</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>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label for="firstname" class="col-sm-2 control-label">Nome</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="firstname">　
				　　　placeholder="Inserisci il nome">
		</div>
	</div>
	<div class="form-group">
		<label for="lastname" class="col-sm-2 control-label">Cognome</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="lastname">　
				　　　placeholder="Inserisci il cognome">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<div class="checkbox">
				<label>
					<input type="checkbox"> Ricordami
				</label>
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">Accedi</button>
		</div>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Controlli di formulario supportati

Bootstrap supporta i controlli di formulario più comuni, principalmente input, textarea, checkbox, radio e select.

Casella di input (Input)

Il campo di testo di modulo più comune è l'input. Gli utenti possono inserire la maggior parte dei dati necessari. Bootstrap fornisce supporto per tutti i tipi di input nativi HTML5, inclusi:text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color. Colore appropriato type La dichiarazione è necessaria per poter input Ottenere lo stile completo.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Casella 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>
<form role="form">
	<div class="form-group">
		<label for="name">Etichetta</label>
		<input type="text" class="form-control" placeholder="Inserimento di testo">
	</div>
　</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Casella di testo (Textarea)

Utilizzare il textarea per input multi-linea. Può essere modificato se necessario. rows Proprietà (meno righe = scatola più piccola, più righe = scatola più grande).

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Casella di testo</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>
<form role="form">
	<div class="form-group">
		<label for="name">Casella di testo</label>
		<textarea class="form-control" rows="3"></textarea>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Casella di controllo (Checkbox) e pulsante radio (Radio)

Le caselle di controllo (Checkbox) e i pulsanti radio (Radio) sono utilizzati per consentire agli utenti di selezionare da una serie di opzioni predefinite.

  • . Quando si crea un modulo, se si desidera che l'utente possa selezionare più opzioni da una lista, utilizzare checkbox. Se si desidera che l'utente possa selezionare solo una delle opzioni, utilizzare radio.

  • usare per una serie di caselle di controllo e pulsanti radio .checkbox-inline o .radio-inline class, che controlla che vengano visualizzati sulla stessa riga.

Di seguito è riportato un esempio che dimostra questi due tipi (predefiniti e in linea):

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Casella di controllo e pulsante radio</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>
<label for="name">Esempio di casella di controllo e pulsante radio predefiniti</label>
<div class="checkbox">
	<label><input type="checkbox" value="">Opzione 1</label>
</div>
<div class="checkbox">
	<label><input type="checkbox" value="">Opzione 2</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Opzione 1
	</label>
</div>
<div class="radio">
	<label>
		<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Opzione 2 - Selezionandola, verrà deselezionata l'opzione 1
	</label>
</div>
<label for="name">Esempio di caselle di spunta e pulsanti di selezione in linea</label>
<div>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox1" value="option1"> Opzione 1
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox2" value="option2"> Opzione 2
	</label>
	<label class="checkbox-inline">
		<input type="checkbox" id="inlineCheckbox3" value="option3"> Opzione 3
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> Opzione 1
	</label>
	<label class="radio-inline">
		<input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> Opzione 2
	</label>
</div>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Casella di selezione (Select)

Quando vuoi che l'utente possa selezionare più opzioni ma per default può selezionare solo una, usa la casella di selezione.

  • Usa <select> per mostrare le opzioni dell'elenco, che sono solitamente elenchi di selezione con cui gli utenti sono familiarizzati, come stati o numeri.

  • Usa multiple="multiple" Permette agli utenti di selezionare più opzioni.

Di seguito sono riportati gli esempi di questi due tipi (select e multiple):

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Casella di selezione</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>
<form role="form">
	<div class="form-group">
		<label for="name">Scegliere l'elenco</label>
		<select class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
		<label for="name">Elenco di selezione multicriterio</label>
		<select multiple class="form-control">
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
		</select>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Controlli statici

Quando devi posizionare un testo testuale puro dopo l'etichetta del modulo in un modulo orizzontale, usa la class su <p>. .form-control-static.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap esempio - controlli statici</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>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<p class="form-control-static">[email protected]</p>
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">Password</label>
		<div class="col-sm-10">
			<input type="password" class="form-control" id="inputPassword">　
				　　　placeholder="Inserisci la password">
		</div>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

stati dei controlli del modulo

Oltre a :focus stato (cioè, quando l'utente clicca su input o utilizza il tasto tab per focalizzare input), Bootstrap definisce anche uno stile per i campi di input disabilitati e fornisce class per la verifica del modulo.

foco del campo di input

quando il campo di input input riceve :focus in questo caso, la contorno del campo di input viene rimosso e viene applicato box-shadow.

Input disabilitato

Se vuoi disabilitare un campo di input input, aggiungi semplicemente disabled Questa proprietà, oltre a disabilitare il campo di input, cambia anche lo stile del campo di input e lo stile del cursore del mouse quando il puntatore del mouse è sopra l'elemento.

Fieldset disabilitato

Aggiungi l'attributo disabled a <fieldset> per disabilitare tutti i controlli all'interno di <fieldset>.

Stato di verifica

Bootstrap include stili di verifica per messaggi di errore, avviso e successo. Basta aggiungere semplicemente la class appropriata all'elemento genitore (.has-warning, .has-error o .has-successpuoi utilizzare lo stato di verifica.

Esempio di tutti gli stati dei controlli:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Stato dei controlli del modulo</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>
<form class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-sm-2 control-label">Focato</label>
		<div class="col-sm-10">
			<input class="form-control" id="focusedInput" type="text" value="Questo campo di input ottiene l'attenzione...">
		</div>
	</div>
	<div class="form-group">
		<label for="inputPassword" class="col-sm-2 control-label">
			Disabilitato
		</label>
		<div class="col-sm-10">
			<input class="form-control" id="disabledInput" type="text" placeholder="Questo campo di input è vietato..." disabled>
		</div>
	</div>
	<fieldset disabled>
		<div class="form-group">
			<label for="disabledTextInput" class="col-sm-2 control-label">Inserimento disabilitato (Fieldset disabilitato)
			</label>
			<div class="col-sm-10">
				<input type="text" id="disabledTextInput" class="form-control" placeholder="Inserimento vietato">
			</div>
		</div>
		<div class="form-group">
			<label for="disabledSelect" class="col-sm-2 control-label">Menu di selezione disabilitato (Fieldset disabilitato)
			</label>
			<div class="col-sm-10">
				<select id="disabledSelect" class="form-control">
					<option>Seleziona vietata</option>
				</select>
			</div>
		</div>
	</fieldset>
	<div class="form-group has-success">
		<label class="col-sm-2 control-label" for="inputSuccess">
			Inserimento riuscito
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputSuccess">
		</div>
	</div>
	<div class="form-group has-warning">
		<label class="col-sm-2 control-label" for="inputWarning">
			Avviso di input
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputWarning">
		</div>
	</div>
	<div class="form-group has-error">
		<label class="col-sm-2 control-label" for="inputError">
			Errore di input
		</label>
		<div class="col-sm-10">
			<input type="text" class="form-control" id="inputError">
		</div>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Dimensioni dei controlli di modulo

Puoi utilizzare rispettivamente la classe .input-lg e .col-lg-* Per impostare l'altezza e la larghezza del modulo. Ecco un esempio che dimostra questo:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Dimensioni dei controlli di modulo</title>
	<link rel="stylesheet" href="//cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="//cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form role="form">
	<div class="form-group">
		<input class="form-control input-lg" type="text" placeholder=".input-lg">
	</div>
	<div class="form-group">
		<input class="form-control" type="text" placeholder="默认输入">
	</div>
	<div class="form-group">
		<input class="form-control input-sm" type="text" placeholder=".input-sm">
	</div>
	<div class="form-group">
	</div>
	<div class="form-group">
		<select class="form-control input-lg">
			<option value="">.input-lg</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control">
			<option value="">Scelta predefinita</option>
		</select>
	</div>
	<div class="form-group">
		<select class="form-control input-sm">
			<option value="">.input-sm</option>
		</select>
	</div>
	<div class="row">
		<div class="col-lg-2">
			<input type="text" class="form-control" placeholder=".col-lg-2">
		</div>
		<div class="col-lg-3">
			<input type="text" class="form-control" placeholder=".col-lg-3">
		</div>
		<div class="col-lg-4">
			<input type="text" class="form-control" placeholder=".col-lg-4">
		</div>
	</div>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

Testo di aiuto del modulo

I controlli del modulo Bootstrap possono avere un testo di aiuto bloccante sull'input box input. Per aggiungere un blocco di contenuto che occupa tutta la larghezza, utilizzare .help-blockDi seguito è illustrato questo punto:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Esempio Bootstrap - Testo di aiuto del modulo</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>
<form role="form">
	<span>Testo di aiuto esempio</span>
	<input class="form-control" type="text" placeholder="">
	<span class="help-block">一个较长的帮助文本块，超过一行，
		需要扩展到下一行。本示例中的帮助文本总共有两行。</span>
</form>
</body>
</html>
测试看看 ‹/›

结果如下所示：

按钮 Bootstrap表格 Bootstrap