Bootstrap4输入框组

Puoi usare la classe .input-group per aggiungere più stili ai campi di input del modulo, come icone, testo o pulsanti.

Puoi usare la classe .input-group-prepend per aggiungere informazioni di testo davanti al campo di input, .input-group-append aggiunge dietro al campo di input.

Infine, dobbiamo anche usare la classe .input-group-text per impostare lo stile del testo.

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h2>Gruppo di input</h2>
　　<p>Usa la classe .input-group .input-group per aggiungere più stili ai campi di input del modulo, come icone, testo o pulsanti, .input-group-prepend aggiunge davanti, .input-group-append aggiunge dietro.</p>
　　<p>Usa la classe .input-group-text per impostare lo stile del testo.</p>
　　
　　<form action="/action_page.php">
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">@</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Nome utente" id="usr" name="username">
　　　　</div>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Email" id="mail" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Invia</button>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

L'effetto di esecuzione è il seguente:

Dimensione dei campi di input

Usare la classe .input-group-sm per impostare i campi di input piccoli, .input-group-lg per quelli grandi:

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h1>Dimensione dei campi di input</h1>
　　<p>Usare la classe .input-group-sm per impostare i campi di input piccoli, .input-group-lg per quelli grandi:</p>
　　<form>
　　　　<div class="input-group mb-3 input-group-sm">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Piccolo</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Predefinito</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-group mb-3 input-group-lg">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Grande</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

L'effetto di esecuzione è il seguente:

Multipli campi di input e testo

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h2>Multipli campi di input e testo</h2>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Persona</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Nome">
　　　　　　<input type="text" class="form-control" placeholder="Cognome">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<span class="input-group-text">Uno</span>
　　　　　　　　<span class="input-group-text">Due</span>
　　　　　　　　<span class="input-group-text">Tre</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

L'effetto di esecuzione è il seguente:

Checkbox e radio button

Le informazioni testuali possono essere sostituite da checkbox e radio button:

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h2>Checkbox e radio button</h2>
　　Le informazioni testuali possono essere sostituite da caselle di spunta e caselle di selezione:
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<div class="input-group-text">
　　　　　　　　　　<input type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div class="input-group mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<div class="input-group-text">
　　　　　　　　　　<input type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Aggiunta di un gruppo di pulsanti alla casella di input

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h1>Aggiunta di un gruppo di pulsanti alla casella di input</h1>
　　<div class="input-group mb-3">
　　　　<div class="input-group-prepend">
　　　　　　<button class="btn btn-outline-secondary" type="button">Pulsante di base</button>　　
　　　　</div>
　　　　<input type="text" class="form-control" placeholder="Qualcosa di testo">
　　</div>
　　<div class="input-group mb-3">
　　　　<input type="text" class="form-control" placeholder="Ricerca">
　　　　<div class="input-group-append">
　　　　　　<button class="btn btn-success" type="submit">Vai</button>　　
　　　　　</div>
　　</div>
　　<div class="input-group mb-3">
　　　　<input type="text" class="form-control" placeholder="Qualcosa di intelligente..">
　　　　<div class="input-group-append">
　　　　　　<button class="btn btn-primary" type="button">OK</button>　　
　　　　　　<button class="btn btn-danger" type="button">Annulla</button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Impostazione del menu a discesa

Aggiungere un menu a discesa nella casella di input non richiede l'uso della classe .dropdown。

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　Impostazione del menu a discesa
　　Aggiungere un menu a discesa nella casella di input non richiede l'uso della classe .dropdown。
　　<form>
　　　　<div class="input-group mt-3 mb-3">
　　　　　　<div class="input-group-prepend">
　　　　　　　　<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
　　　　　　　　　　Scegli sito web
　　　　　　　　</button>
　　　　　　　　<div class="dropdown-menu">
　　　　　　　　　　<a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a class="dropdown-item" href="https://it.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Indirizzo sito web">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Etichetta input group

Nella sezione input group, è possibile impostare etichette utilizzando il label esterno dell'input group, l'attributo for dell'etichetta deve corrispondere all'id del gruppo input, cliccando sull'etichetta è possibile mettere a fuoco l'input:

Esempio Bootstrap4

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Esempio</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 mt-3">
　　<h2>输入框组标签</h2>
　　<p>通过在输入框组外围的label来设置标签，标签的for属性需要与输入框组的id对应。</p>
　　<p>点击标签后可以聚焦输入框：</p>
　　<form>
　　　　<label for="demo">请在此输入您的邮箱:</label>
　　　　<div class="input-group mb-3">
　　　　　　<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
　　　　　　<div class="input-group-append">
　　　　　　　　<span class="input-group-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

Bootstrap4自定义表单 Bootstrap4表单控件

Corso di base Bootstrap4

Bootstrap4输入框组

Dimensione dei campi di input

Multipli campi di input e testo

Checkbox e radio button

Aggiunta di un gruppo di pulsanti alla casella di input

Impostazione del menu a discesa

Etichetta input group