Bootstrap4 Grund教程

Bootstrap4 benutzerdefiniertes Formular Bootstrap4 Formularelemente

Bootstrap4 Eingabefeldgruppe

Wir können .input verwenden-Die Klasse group wird verwendet, um zusätzliche Stile in die Eingabefelder der Formularfelder hinzuzufügen, wie z.B. Symbole, Text oder Schaltflächen.

Verwenden Sie .input-gruppe-Die Klasse prepend kann Textinformationen vor dem Eingabefeld hinzufügen, .input-gruppe-append-Klasse hinzufügen, um sie hinter dem Eingabefeld hinzuzufügen.

Schließlich müssen wir auch .input verwenden-gruppe-Die Klasse text wird verwendet, um den Stil des Textes zu setzen.

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>Eingabefeldgruppe</h2>
　　<p>　.input-group　.input-Die Klasse group wird verwendet, um zusätzliche Stile in die Eingabefelder der Formularfelder hinzuzufügen, wie z.B. Symbole, Text oder Schaltflächen, .input-gruppe-prepend Klasse vorne hinzufügen，.input-gruppe-append Hinzufügen am Ende.</p>
　　<p>Verwenden Sie .input-gruppe-text Klasse für den Textstil.</p>
　　
　　<form action="/action_page.php">
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">@</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="Benutzername" id="usr" name="username">
　　　　</div>
　　　　<div class="input-gruppe mb-3">
　　　　　　<input type="text" class="form-control" placeholder="E-Mail" id="mail" name="email">
　　　　　　<div class="input-gruppe-hinzufügen">
　　　　　　　　<span class="input-gruppe-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Einreichen</button>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Laufende Wirkung wie folgt：

Eingabefeldgröße

Verwenden Sie .input-gruppe-sm Klasse für kleine Eingabefelder, .input-gruppe-lg Klasse für große Eingabefelder：

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>Eingabefeldgröße</h1>
　　<p>Verwenden Sie .input-gruppe-sm Klasse für kleine Eingabefelder, .input-gruppe-lg Klasse für große Eingabefelder：</p>
　　<form>
　　　　<div class="input-gruppe mb-3　input-gruppe-sm">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">Klein</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">Standard</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
　　<form>
　　　　<div class="input-gruppe mb-3　input-gruppe-lg">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">Groß</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Laufende Wirkung wie folgt：

Mehrere Eingabefelder und 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>Mehrere Eingabefelder und Texte</h2>
　　
　　<form>
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">Person</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="First Name">
　　　　　　<input type="text" class="form-control" placeholder="Last Name">
　　　　</div>　　
　　</form>
　　
　　<form>
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<span class="input-gruppe-text">One</span>
　　　　　　　　<span class="input-gruppe-text">Two</span>
　　　　　　　　<span class="input-gruppe-text">Three</span>
　　　　　　</div>
　　　　　　<input type="text" class="form-control">
　　　　</div>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Laufende Wirkung wie folgt：

Auswahlkästchen und Radiobuttons

Textinformationen können durch Auswahlkästchen und Radiobuttons ersetzt werden：

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>Auswahlkästchen und Radiobuttons</h2>
　　<p>Textinformationen können durch Auswahlkästchen und Radiobuttons ersetzt werden：</p>
　　<form>
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<div class="input-gruppe-text">
　　　　　　　　　　<input type="checkbox">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="w3codebox">
　　　　</div>
　　</form>
　　
　　<form>
　　　　<div class="input-gruppe mb-3">
　　　　　　<div class="input-gruppe-prepend">
　　　　　　　　<div class="input-gruppe-text">
　　　　　　　　　　<input type="radio">　
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<input type="text" class="form-control" placeholder="GOOGLE">
　　　　</div>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Feld hinzufügen, Buttongruppe

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>Feld hinzufügen, Buttongruppe</h1>
　　<div class="input-gruppe mb-3">
　　　　<div class="input-gruppe-prepend">
　　　　　　danger" type="button">Cancel<-outline-secondary" type="button">Basic Button</button>　　
　　　　</div>
　　　　<input type="text" class="form-control" placeholder="Some text">
　　</div>
　　<div class="input-gruppe mb-3">
　　　　<input type="text" class="form-control" placeholder="Search">
　　　　<div class="input-gruppe-hinzufügen">
　　　　　　danger" type="button">Cancel<-success" type="submit">Go</button>　　
　　　　　</div>
　　</div>
　　<div class="input-gruppe mb-3">
　　　　<input type="text" class="form-control" placeholder="Something clever..">
　　　　<div class="input-gruppe-hinzufügen">
　　　　　　danger" type="button">Cancel<-<button class="btn btn/button>　　
　　　　　　danger" type="button">Cancel<-<button type="button" class="btn btn/button>　　
　　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

设置下拉菜单

在输入框中添加下拉菜单不需要使用 .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>
　　<p>在输入框中添加下拉菜单不需要使用 .dropdown 类。</p>
　　<form>
　　　　<div class="input-group mt-3　mb-3">
　　　　　　<div class="input-gruppe-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://de.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>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

输入框组标签

通过在输入框组外围的 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>Eingabegruppe Etikett</h2>
　　<p>Setzen Sie die Etiketten durch das Umfeld des Eingabegruppendurch das Etikett, das für die Eingabegruppe erforderlich ist, das Attribut for muss mit dem id des Eingabegruppendes übereinstimmen.</p>
　　<p>Durch Klicken auf das Etikett kann das Eingabefeld fokussiert werden:</p>
　　<form>
　　　　<etikett für="demo">Geben Sie hier Ihre E-Mail-Adresse ein:</etikett>
　　　　<div class="input-gruppe mb-3">
　　　　　　<input type="text" class="form-kontrolle" placeholder="E-Mail" id="demo" name="email">
　　　　　　<div class="input-gruppe-hinzufügen">
　　　　　　　　<span class="input-gruppe-text">@oldtoolbag.com</span>
　　　　　　</div>
　　　　</div>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Bootstrap4 benutzerdefiniertes Formular Bootstrap4 Formularelemente