Bootstrap4 Grund教程

Bootstrap4 Slideshow Bootstrap4 Eingabegruppe

Bootstrap4 Angepasstes Formular

　　 Bootstrap4 Man kann einige Formularstile anpassen, um die Standardstile des Browsers zu ersetzen.

Angepasster Checkbox

Wenn ein Checkbox angepasst werden soll, kann <div> als übergeordnetes Element eingestellt werden, mit der Klasse .custom-control und .custom-Checkbox, der als Unterlement im <div> platziert wird, und der Checkbox wird eingestellt type="checkbox", die Klasse ist .custom-control-input.

Der Text des Kontrollkästchens wird verwendet label 标签，标签使用 .custom-control-label 类，label 的 for der Wert der Attribute muss mit der "id" des Kontrollkästchens übereinstimmen.

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>Benutzerdefiniertes Kontrollkästchen</h2>
　　<p>Wenn ein benutzerdefiniertes Kontrollkästchen angepasst werden soll, kann die "div" als übergeordnetes Element gesetzt werden, die Klasse ist .custom-control und .custom-checkbox, das Kontrollkästchen wird als Unterlement in der "div"-Box platziert, und das Kontrollkästchen wird auf "type="checkbox"" und "class=".custom" gesetzt-control-input.</p>
　　<p>Der Text des Kontrollkästchens wird mit dem Label-Tag verwendet, das Label verwendet .custom-control-label-Klasse, der Wert der Attribut "for" des Labels muss mit der "id" des Kontrollkästchens übereinstimmen.</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">Benutzerdefiniertes Kontrollkästchen</label>
　　　　</div>
　　　　<input type="checkbox" id="defaultCheck" name="example2">
　　　　<label for="defaultCheck">Standardkastchen</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Benutzerdefinierter Radiobutton

Wenn ein benutzerdefinierter Radiobutton angepasst werden soll, kann <div> als übergeordnetes Element gesetzt, die Klasse ist .custom-control und .custom-radio, der Radiobutton wird als Unterlement in der "div"-Box platziert <div> in der "div"-Box platziert, und der Radiobutton wird auf type="radio", die Klasse ist .custom-control-input.

Der Text des Radiobuttons wird verwendet label 标签，标签使用 .custom-control-label 类，label 的 for der Wert der Attribute muss mit der "id" des Radiobuttons übereinstimmen. 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>Benutzerdefinierter Radiobutton</h2>
　　<p>Wenn ein benutzerdefinierter Radiobutton angepasst werden soll, kann die "div" als übergeordnetes Element gesetzt werden, die Klasse ist .custom-control und .custom-radio, das Kontrollkästchen wird als Unterlement in der "div"-Box platziert, und der Radiobutton wird auf "type="radio"" und "class=".custom" gesetzt-control-input.</p>
　　<p>Der Text des Radiobuttons wird mit dem Label-Tag verwendet, das Label verwendet .custom-control-label-Klasse, der Wert der Attribut "for" des Labels muss mit der "id" des Radiobuttons übereinstimmen.</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">Benutzerdefinierter Radiobutton</label>
　　　　</div>　　　　
　　　　<input type="radio" id="defaultRadio" name="example2">
　　　　<label for="defaultRadio">Standard-Radio-Button</label>
　　　　<br>
　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Anzeige der benutzerdefinierten Steuerelemente in einer Zeile

Wir können .custom auf externen Elementen verwenden-control-inline-Klasse, um benutzerdefinierte Formularelemente einzuhüllen, so dass benutzerdefinierte Formularelemente in einer Zeile angezeigt werden können:

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>Anzeige der benutzerdefinierten Steuerelemente in einer Zeile</h2>
　　<p>Wir können .custom auf externen Elementen verwenden-control-inline-Klasse, um benutzerdefinierte Formularelemente einzuhüllen, so dass benutzerdefinierte Formularelemente in einer Zeile angezeigt werden können:</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">benutzerdefinierter Radio-Button<　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">benutzerdefinierter Radio-Button<　2</label>
　　　　</div>
　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

benutzerdefiniertes Auswahlmenü

Das Erstellen eines benutzerdefinierten Auswahlmenüs kann <select> Element hinzufügen .custom-select-Klasse:

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>Benutzerdefiniertes Auswahlmenü</h2>
　　<p>Das Erstellen eines benutzerdefinierten Auswahlmenüs kann durch Hinzufügen von .custom zum select-Element erfolgen-select-Klasse:</p>
　　<form>
　　<select name="cars" class="custom-select-sm">
　　　　<option selected>Benutzerdefiniertes Auswahlmenü</option>
　　　　<option value="Google">Google</option>
　　　　<option value="w3codebox">w3codebox</option>
　　　　<option value="Taobao">Taobao</option>
　　</select>
　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Wenn wir die Größe des benutzerdefinierten Auswahlmenüs einstellen möchten, können wir .custom verwenden-select-sm, .custom-select-lg, um ihre Größe 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>Größe des benutzerdefinierten Auswahlmenüs</h2>
　　<p>Wenn wir die Größe des benutzerdefinierten Auswahlmenüs einstellen möchten, können wir .custom verwenden-select-sm, .custom-select-lg, um ihre Größe zu setzen:</p>
　　<form>
　　　　<!--　klein　-->
　　　　<select name="cars" class="custom-select-sm">
　　　　　　<option selected>Ein ziemlich kleines benutzerdefiniertes Auswahlmenü</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　　
　　　　<!--　groß　-->
　　　　<select name="cars" class="custom-select-lg">
　　　　　　<option selected>Ein ziemlich großer benutzerdefinierter Auswahlmenü</option>
　　　　　　<option value="Google">Google</option>
　　　　　　<option value="w3codebox">w3codebox</option>
　　　　　　<option value="Taobao">Taobao</option>
　　　　</select>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

benutzerdefinierter Schieberegler

Wir können input 　für type="range" zu den Eingabefeldern hinzufügen .custom-Die Klasse "range", um benutzerdefinierte Schieberegler 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>Benutzerdefinierter Schieberegler</h2>
　　<p>Wir können .custom zu den Eingabefeldern hinzufügen, deren Typ auf "range" eingestellt ist-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">Einsenden</button></p>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

自定义文件上传控件

我们可以在父元素添加 .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>Benutzerdefiniertes Upload-Dateistil:</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">Datei auswählen</label>
　　　　</div>
　　　　
　　　　<p>Standardmäßiges Upload-Dateistil:</p>/p>
　　　　<input type="file" id="myFile" name="filename2">
　　
　　　　<div class="mt-3">
　　　　　　<button type="submit" class="btn btn-primary">Einsenden</button>
　　　　</div>
　　</form>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das Ergebnis nach dem Ausführen ist wie folgt:

Bootstrap4 Slideshow Bootstrap4 Eingabegruppe