Bootstrap4 自定义表单

　　 Bootstrap4 permette di personalizzare alcuni stili dei moduli per sostituire lo stile predefinito del browser.

Casella di controllo personalizzata

Se si desidera personalizzare una casella di controllo, è possibile impostare <div> come elemento padre, con la classe .custom-control e .custom-checkbox, e posizionare la casella di controllo come elemento figlio all'interno di tale <div>, quindi impostare la casella di controllo come type="checkbox"con la classe .custom-control-input.

Il testo della casella di selectione utilizza etichetta L'etichetta utilizza la classe .custom-control-labeletichetta del for Il valore dell'attributo deve corrispondere all'"id" della casella di selectione.

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Personalizzazione della casella di selectione</h2>
　　<p>Se si desidera personalizzare una casella di selectione, impostare il "div" come elemento padre, con le classi "custom-control" e "custom-checkbox", e la casella di selectione come elemento figlio all'interno di tale "div". Poi impostare la casella di selectione con "type="checkbox"" e la classe "custom-control-input".</p>
　　<p>Il testo della casella di selectione utilizza l'etichetta "label", l'etichetta utilizza la classe .custom-control-label, il valore dell'attributo "for" dell'etichetta deve corrispondere all'"id" della casella di selectione.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-checkbox mb-3">
　　　　　　<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
　　　　　　<label class="custom-control-label" for="customCheck">Casella di selectione personalizzata</label>
　　　　</div>
　　　　<input type="checkbox" id="defaultCheck" name="example2">
　　　　<label for="defaultCheck">Casella di selectione predefinita</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">提交</button>
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Personalizzazione della casella di selectione singola

Se si desidera personalizzare una casella di selectione singola, impostare <div> come elemento padre, con le classi .custom-control e .custom-radio, e la casella di selectione come elemento figlio all'interno di tale <div> all'interno di tale "div", poi impostare la casella di selectione type="radio"con la classe .custom-control-input.

Il testo della casella di selectione singola utilizza etichetta L'etichetta utilizza la classe .custom-control-labeletichetta del for Il valore dell'attributo deve corrispondere a quello della casella di selectione id.

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Personalizzazione della casella di selectione singola</h2>
　　<p>Se si desidera personalizzare una casella di selectione singola, impostare il "div" come elemento padre, con le classi "custom-control" e "custom-radio", e la casella di selectione come elemento figlio all'interno di tale "div". Poi impostare la casella di selectione con "type="radio"" e la classe "custom-control-input".</p>
　　<p>Il testo della casella di selectione viene utilizzato con il tag label, il tag label utilizza la classe .custom-control-label, e il valore dell'attributo for del label deve corrispondere all'id della casella di selectione.</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-radio">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio">Casella di selectione personalizzata</label>
　　　　</div>　　　　
　　　　<input type="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">Casella di selectione predefinita</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">提交</button>
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Controlli personalizzati visualizzati sulla stessa riga

Puoi usare la classe .custom-control-inline su un elemento esterno per avvolgere i controlli di modulo personalizzati, in modo che i controlli di modulo personalizzati possano essere visualizzati sulla stessa riga:

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Controlli personalizzati visualizzati sulla stessa riga</h2>
　　<p>Puoi usare la classe .custom-control-inline su un elemento esterno per avvolgere i controlli di modulo personalizzati, in modo che i controlli di modulo personalizzati possano essere visualizzati sulla stessa riga:</p>
　　<form action="/action_page.php">
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label class="custom-control-label" for="customRadio1">Casella di selectione personalizzata 1</label>
　　　　</div>
　　　　<div class="custom-control custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label class="custom-control-label" for="customRadio2">Casella di selectione personalizzata 2</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">提交</button>
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Menu di scelta personalizzato

Creare un menu di scelta personalizzato può essere: <select> Aggiungere la classe .custom-select agli elementi:

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Menu di selezione personalizzato</h2>
　　<p>Creare un menu di selezione personalizzato puoi aggiungere la classe .custom-select all'elemento select:</p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>Menu di selezione personalizzato</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Se vuoi impostare la dimensione del menu di selezione personalizzato, puoi usare .custom-select-sm e .custom-select-lg per impostare le dimensioni:

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Dimensione del menu di selezione personalizzato</h2>
　　<p>Se vuoi impostare la dimensione del menu di selezione personalizzato, puoi usare .custom-select-sm e .custom-select-lg per impostare le dimensioni:</p>
　　<form>
　　　　<!-- Piccolo -->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>Menu di selezione personalizzato di piccole dimensioni</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!-- Grande -->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>Menu di selezione personalizzato di grandi dimensioni</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Selettore di scorrimento personalizzato

Puoi aggiungere classe input, quindi in 　per type="range" aggiungere la classe .custom-range all'input per impostare il selettore di scorrimento personalizzato:

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Selettore di scorrimento personalizzato</h2>
　　<p>Puoi aggiungere la classe .custom-range all'input di tipo "range" per impostare il selettore di scorrimento personalizzato:</p>
　　<form action="/action_page.php">
　　　　<label for="customRange">Selettore di scorrimento personalizzato</label>
　　　　<input type="range" class="custom-range" id="customRange" name="points1">
　　　　<label for="defaultRange">Selettore di scorrimento predefinito</label>
　　　　<input type="range" id="defaultRange" name="points2">
　　　　提交
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

<p><button type="submit" class="btn btn-primary">Invia</button></p>

Controlllo di caricamento dei file personalizzato Puoi aggiungere la classe .custom-file all'elemento padre, .custom-file 　classe input, quindi in imposta a type="file" e aggiungi .custom-file-input:

Il testo del controllo di caricamento dei file utilizza etichetta usando la classe .custom-file-label,etichetta del for Il valore dell'attributo deve corrispondere al controllo di caricamento dei file id.

Esempio Bootstrap4

<!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 mt-3">
　　<h2>Controlllo di caricamento dei file personalizzato</h2>
　　<p>Puoi aggiungere la classe .custom-file al elemento padre, quindi imposta input su type="file" e aggiungi .custom-control-label:</p>
　　<form action="/action_page.php">
　　　　<p>自定义上传文件样式:</p>
　　　　<div class="custom-file mb-3">
　　　　　　<input type="file" class="custom-file-input" id="customFile" name="filename">
　　　　　　<label class="custom-file-label" for="customFile">选择文件</label>
　　　　</div>
　　　　
　　　　<p>默认上传文件样式:</p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">提交</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 «/»

运行后效果如下：

Bootstrap4 轮播 Bootstrap4 输入框组

Tutorial di base di Bootstrap4

Bootstrap4 自定义表单

Casella di controllo personalizzata

Personalizzazione della casella di selectione singola

Controlli personalizzati visualizzati sulla stessa riga

Menu di scelta personalizzato

Selettore di scorrimento personalizzato

<p><button type="submit" class="btn btn-primary">Invia</button></p>