Bootstrap4 控件表单

Bootstrap4 supporta i seguenti controlli del modulo:

input
textarea
checkbox
radio
select

Bootstrap Input

Bootstrap supporta tutti i tipi di input HTML5: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel e color.

Attenzione: Se l'attributo type dell'input non è dichiarato correttamente, lo stile della casella di input non verrà visualizzato.

Esempio seguente utilizza due elementi input, uno text e uno password:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli del modulo: input</h2>
　　<p>Esempio seguente utilizza due elementi input, uno text e uno password:</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="usr">Nome utente:</label>
　　　　　　<input type="text" class="form-control" id="usr">
　　　　</div>
　　　　<div class="form-group">
　　　　　　<label for="pwd">Password:</label>
　　　　　　<input type="password" class="form-control" id="pwd">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Textarea Bootstrap

Esempio seguente dimostra lo stile di textarea.

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli del modulo: textarea</h2>
　　<p>Esempio seguente dimostra lo stile di textarea.</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="comment">Commenti:</label>
　　　　　　<textarea class="form-control" rows="5" id="comment"></textarea>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Casella di controllo Bootstrap (checkbox)

Le caselle di controllo consentono agli utenti di scegliere una o più voci da una serie di opzioni preimpostate.

Esempio di seguito contiene tre opzioni. L'ultima è disabilitata:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli di modulo: checkbox</h2>
　　<p>Esempio di seguito contiene tre opzioni. L'ultima è disabilitata:</p>
　　<form>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Opzione 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Opzione 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>Opzione 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Utilizzando la classe .form-check-inline, le opzioni possono essere visualizzate in una riga:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli di modulo: checkbox</h2>
　　<p>Esempio di seguito contiene tre opzioni. L'ultima è disabilitata, utilizzare la classe .form-check-inline per visualizzare le opzioni in una riga:</p>
　　<form>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Opzione 1
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="">Opzione 2
　　　　　　</label>
　　　　</div>
　　　　<div class="form-check form-check-inline disabled">
　　　　　　<label class="form-check-label">
　　　　　　　　<input type="checkbox" class="form-check-input" value="" disabled>Opzione 3
　　　　　　</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Casella di selezione radio Bootstrap

Le caselle di selezione radio consentono agli utenti di scegliere una voce da una serie di opzioni preimpostate, è possibile selezionare solo una.

Esempio di seguito contiene tre opzioni. L'ultima è disabilitata:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli di modulo: radio</h2>
　　<p>Esempio di seguito contiene tre opzioni. L'ultima è disabilitata:</p>
　　<form>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Opzione 1</label>
　　　　</div>
　　　　<div class="radio">
　　　　　　<label><input type="radio" name="optradio">Opzione 2</label>
　　　　</div>
　　　　<div class="radio disabled">
　　　　　　<label><input type="radio" name="optradio" disabled>Opzione 3</label>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Utilizzando la classe .radio-inline, le opzioni possono essere visualizzate in una riga:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli di modulo: radio</h2>
　　<p>I seguenti esempi includono tre opzioni. L'ultima è disabilitata, l'uso della classe .radio-inline permette di visualizzare le opzioni in una riga:</p>
　　<form>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Opzione 1</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio">Opzione 2</label>
　　　　<label class="radio-inline"><input type="radio" name="optradio" disabled>Opzione 3</label>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Menu a discesa Bootstrap

Quando si desidera che l'utente possa selezionare una delle molte opzioni disponibili, ma di default è possibile selezionare solo una, si utilizza il menu a tendina.

I seguenti esempi includono due menu a discesa:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Esempio Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Controlli del modulo: select</h2>
　　<p>Il seguente modulo contiene due menu a scelta (lista select):</p>
　　<form>
　　　　<div class="form-group">
　　　　　　<label for="sel1">Menu a scelta singola:</label>
　　　　　　<select class="form-control" id="sel1">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　</select>
　　　　　　<br>
　　　　　　<label for="sel2">Menu a scelta multipla (tenere premuto il tasto shift per selezionare più opzioni):</label>
　　　　　　<select multiple class="form-control" id="sel2">
　　　　　　　　<option>1</option>
　　　　　　　　<option>2</option>
　　　　　　　　<option>3</option>
　　　　　　　　<option>4</option>
　　　　　　　　<option>5</option>
　　　　　　</select>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Bootstrap4 组输入框 Bootstrap4 表单

Corso di base Bootstrap4

Bootstrap4 控件表单

Bootstrap Input

Textarea Bootstrap

Casella di controllo Bootstrap (checkbox)

Casella di selezione radio Bootstrap

Menu a discesa Bootstrap