Bootstrap4 教程基础知识

Bootstrap4 Groupe de champs de saisie

Nous pouvons utiliser .input-La classe group est utilisée pour ajouter plus de styles aux champs de saisie du formulaire, tels que les icônes, le texte ou les boutons.

Utiliser .input-group-La classe prepend peut ajouter des informations textuelles à l'avant de la case de saisie, .input-group-ajouter après la classe append à la case de saisie.

Enfin, nous devons également utiliser .input-group-La classe text est utilisée pour définir le style du texte.

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>Groupe de champs de saisie</h2>
　　<p> .input-group .input-La classe group est utilisée pour ajouter plus de styles aux champs de saisie du formulaire, tels que les icônes, le texte ou les boutons, .input-group-prepend class pour ajouter en premier, .input-group-append ajouter à la fin.</p>
　　<p>Utiliser .input-group-text class pour définir le style du texte.</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="Nom d'utilisateur" 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">Soumettre</button>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Voici l'effet de exécution :

Taille de la zone de saisie

Utiliser .input-group-sm class pour définir une zone de saisie petite, .input-group-lg class pour définir une zone de saisie grande :

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">
　　<h1>Taille de la zone de saisie</h1>
　　<p>Utiliser .input-group-sm class pour définir une zone de saisie petite, .input-group-lg class pour définir une zone de saisie grande :/p>
　　<form>
　　　　<div　class="input-group　mb-3　input-group-sm">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Petit</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">Par défaut</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">Grand</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Voici l'effet de exécution :

Plusieurs zones de saisie et textes

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>Plusieurs zones de saisie et textes</h2>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Person</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control" placeholder="Prénom">
　　　　　　<input　type="text"　class="form-control" placeholder="Nom de famille">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div　class="input-group　mb-3">
　　　　　　<div　class="input-group-prepend">
　　　　　　　　<span　class="input-group-text">Un</span>
　　　　　　　　<span　class="input-group-text">Deux</span>
　　　　　　　　<span　class="input-group-text">Trois</span>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

Voici l'effet de exécution :

Cases à cocher et boutons radio

Les informations textuelles peuvent être remplacées par des cases à cocher et des boutons radio :

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>Cases à cocher et boutons radio</h2>
　　<p>Les informations textuelles peuvent être remplacées par des cases à cocher et des boutons radio :</p>
　　<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>

测试看看 ‹/›

运行后效果如下：

Ajouter un groupe de boutons à la zone de saisie

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">
　　<h1>Ajouter un groupe de boutons à la zone de saisie</h1>
　　<div　class="input-group　mb-3">
　　　　<div　class="input-group-prepend">
　　　　　　<button class="btn btn-outline-secondary" type="button">Basic Button</button>　　
　　　　</div>
　　　　<input　type="text"　class="form-control" placeholder="Some text">
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control" placeholder="Search">
　　　　<div　class="input-group-append">
　　　　　　<button class="btn btn-success" type="submit">Go</button>　　
　　　　　</div>
　　</div>
　　<div　class="input-group　mb-3">
　　　　<input　type="text"　class="form-control" placeholder="Something clever..">
　　　　<div　class="input-group-append">
　　　　　　<button class="btn btn-primary" type="button">OK/button>　　
　　　　　　<button class="btn btn-danger" type="button">Cancel/button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

设置下拉菜单

添加下拉菜单不需要使用 .dropdown 类。

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>
　　添加下拉菜单不需要使用　.dropdown　类。</p>
　　<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">
　　　　　　　　　　选择网站
　　　　　　　　</button>
　　　　　　　　<div class="dropdown-menu">
　　　　　　　　　　<a class="dropdown-item" href="https://www.google.com">GOOGLE</a>
　　　　　　　　　　<a class="dropdown-item" href="https://fr.oldtoolbag.com">w3codebox</a>
　　　　　　　　　　<a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a>
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input　type="text"　class="form-control" placeholder="网站地址">
　　　　</div>
　　</form>
</div>
</body>
</html>

测试看看 ‹/›

运行后效果如下：

输入框组标签

设置标签，标签的 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>在输入框组通过在输入框组外围的　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 控件表单