Bootstrap4 Tutoriel de base

Bootstrap4 Diaporama Bootstrap4 Groupes de champs d'entrée

Bootstrap4 Formulaire personnalisé

　　 Bootstrap4 Vous pouvez personnaliser certains styles de formulaires pour remplacer les styles par défaut du navigateur.

Champ de sélection multiple personnalisé

Si vous souhaitez personnaliser un champ de sélection multiple, vous pouvez configurer <div> en tant qu'élément parent, avec la classe .custom-control et .custom-checkbox, le champ de sélection multiple est placé en tant qu'élément fils à l'intérieur de ce <div>, puis le champ de sélection multiple est configuré type="checkbox", la classe est .custom-control-input.

Le texte de la case à cocher utilise label 标签，标签使用 .custom-control-label 类，label 的 for la valeur de l'attribut doit correspondre à l'id de la case à cocher.

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>Case à cocher personnalisée</h2>
　　<p>Si vous souhaitez personnaliser une case à cocher, vous pouvez définir le <div> en tant que parent, la classe est .custom-control et .custom-checkbox, la case à cocher est placée en tant que sous-élément à l'intérieur de ce <div>, puis la case à cocher est réglée sur type="checkbox", la classe est .custom-control-input.</p>
　　<p>Le texte de la case à cocher utilise le balise label, le label utilise .custom-control-label class, la valeur de l'attribut for de label doit correspondre à l'id de la case à cocher.</p>
　　<form action="/action_page.php">
　　　　<div　class="custom-contrôle custom-checkbox mb-3">
　　　　　　<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
　　　　　　<label　class="custom-control-label for="customCheck">Case à cocher personnalisée</label>
　　　　</div>
　　　　<input type="checkbox" id="defaultCheck" name="example2">
　　　　<label for="defaultCheck">Case à cocher par défaut</label>
　　　　<br>
　　　　<button　type="submit"　class="btn　btn-primary">Soumettre</button>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Bouton radio personnalisé

Si vous souhaitez personnaliser un bouton radio, vous pouvez définir <div> en tant que parent, la classe est .custom-control et .custom-radio, le bouton radio est placé en tant que sous-élément à l'intérieur de ce <div> à l'intérieur, puis le bouton radio est réglé sur type="radio", la classe est .custom-control-input.

Le texte du bouton radio utilise label 标签，标签使用 .custom-control-label 类，label 的 for la valeur de l'attribut doit correspondre à l'id du bouton radio id。

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>Bouton radio personnalisé</h2>
　　<p>Si vous souhaitez personnaliser un bouton radio, vous pouvez définir le div en tant que parent, la classe est .custom-control et .custom-radio, la case à cocher est placée en tant que sous-élément à l'intérieur de ce div, puis le bouton radio est réglé sur type="radio", la classe est .custom-control-input.</p>
　　<p>Le texte du bouton radio utilise le balise label, le label utilise .custom-control-label class, la valeur de l'attribut for de label doit correspondre à l'id du bouton radio.</p>
　　<form action="/action_page.php">
　　　　<div　class="custom-contrôle custom-radio">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio" name="example1">
　　　　　　<label　class="custom-control-label for="customRadio">Bouton radio personnalisé</label>
　　　　</div>　　　　
　　　　<input type="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">Case à cocher par défaut</label>
　　　　<br>
　　　　<button　type="submit"　class="btn　btn-primary">Soumettre</button>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Affichage des contrôles personnalisés sur la même ligne

Nous pouvons utiliser .custom sur l'élément externe-control-Classe inline pour envelopper les contrôles de formulaire personnalisés, de sorte que les contrôles de formulaire personnalisés puissent s'afficher sur la même ligne :

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>Affichage des contrôles personnalisés sur la même ligne</h2>
　　<p>Nous pouvons utiliser .custom sur l'élément externe-control-Classe inline pour envelopper les contrôles de formulaire personnalisés, de sorte que les contrôles de formulaire personnalisés puissent s'afficher sur la même ligne :/p>
　　<form action="/action_page.php">
　　　　<div　class="custom-contrôle custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio1" name="example1">
　　　　　　<label　class="custom-control-label" for="customRadio1">Case à cocher personnalisée　1</label>
　　　　</div>
　　　　<div　class="custom-contrôle custom-radio custom-control-inline">
　　　　　　<input type="radio" class="custom-control-input" id="customRadio2" name="example2">
　　　　　　<label　class="custom-control-label" for="customRadio2">Case à cocher personnalisée　2</label>
　　　　</div>
　　　　<button　type="submit"　class="btn　btn-primary">Soumettre</button>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Menu de sélection personnalisé

Créer un menu de sélection personnalisé peut être fait en <select> ajouter .custom sur l'élément-Classe select :

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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 de sélection personnalisé</h2>
　　<p>Créer un menu de sélection personnalisé peut être fait en ajoutant .custom sur l'élément select-Classe select :/p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>Menu de sélection personnalisé</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Si nous devons définir la taille du menu de sélection personnalisé, nous pouvons utiliser .custom-select-sm, .custom-select-lg pour définir leur taille :

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>Taille du menu de sélection personnalisé</h2>
　　<p>Si nous devons définir la taille du menu de sélection personnalisé, nous pouvons utiliser .custom-select-sm, .custom-select-lg pour définir leur taille :/p>
　　<form>
　　　　<!--　petit　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>Menu de sélection personnalisé plus petit</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　grand　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>Menu de sélection personnalisé plus grand</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Contrôle glissant personnalisé

Nous pouvons dans input 　pour type="range" dans le champ d'entrée ajouter .custom-Classe range pour définir le contrôle glissant personnalisé:

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>Contrôle glissant personnalisé</h2>
　　<p>Nous pouvons ajouter .custom dans le champ d'entrée dont le type est "range"-range 类来设置自定义滑块控件:/p>
　　<form action="/action_page.php">
　　　　<label for="customRange">自定义滑块控件</label>
　　　　<input type="range" class="custom-range" id="customRange" name="points1">
　　　　<label for="defaultRange">默认滑块控件</label>
　　　　<input type="range" id="defaultRange" name="points2">
　　　　<p><button type="submit" class="btn btn-primary">Soumettre</button></p>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

自定义文件上传控件

我们可以在父元素添加 .custom-file 类，然后在　input 设置为 type="file" 并添加 .custom-file-input:

上传控件的文本使用 label 标签，标签使用 .custom-file-label 类，label 的 for 属性值需要匹配上传控件 id。

Bootstrap4 示例

<!DOCTYPE html>
<html>
<head>
　　<title>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>自定义文件上传控件</h2>
　　<p>我们可以在父元素添加　.custom-file　类，然后在　input　设置为　type="file"　并添加　.custom-control-label:</p>
　　<form action="/action_page.php">
　　　　<p>Style personnalisé de téléchargement de fichier :</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">Choisir un fichier</label>
　　　　</div>
　　　　
　　　　<p>Style par défaut de téléchargement de fichier :</p>
　　　　<input　type="file"　id="myFile"　name="filename2">
　　
　　　　<div　class="mt-3">
　　　　　　<button　type="submit"　class="btn　btn-primary">Soumettre</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

Voyons si ça marche ‹/›

L'effet après l'exécution est le suivant:

Bootstrap4 Diaporama Bootstrap4 Groupes de champs d'entrée