Bootstrap4 Grund教程

Bootstrap4 Navigation Bootstrap4 Dropdown-Menü

Bootstrap4 Falten

Bootstrap4 Falten können einfach das Anzeigen und Verbergen des Inhalts realisieren.

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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">
　　<h2> Einfaches Klapplayout:/h2>
　　<p> Nach dem Klicken auf die Schaltfläche wird der Inhalt zwischen Anzeigen und Verbergen umgeschaltet.</p>
　　<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Einfaches Collapse</button>
　　<div id="demo" class="collapse">
　　　　Ich bete für dich, opfere dich für dich,
Wir haben alle im Leben und im Leben zufällige Erfahrungen. Wir haben ein kleines Leben,
Ich mache derzeit eine Praktikumsstelle, die mir nicht passt.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Beispielanalyse

.collapse Klasse wird verwendet, um ein Klappelement zu spezifizieren (Beispiel: <div>); Nach dem Klicken auf die Schaltfläche wird zwischen Verbergen und Anzeigen umgeschaltet.

Um das Verbergen und Anzeigen des Inhalts zu steuern, müssen Sie auf dem <a> oder <button> Element data hinzufügen-toggle="collapse" Attribut. data-Ziel="#id" Attribut entspricht dem eingeklappten Inhalt (<div id="demo">).

Hinweis: <a> Auf dem Element können Sie das Attribut href verwenden, um data zu ersetzen-Ziel Eigenschaften:

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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">
　　<h2> Einfaches Klapplayout:/h2>
　　<a href="#demo" class="btn btn-primary" data-toggle="collapse"> Einfaches Klapplayout:/a>
　　<div id="demo" class="collapse">
　　　　Ich bete für dich, opfere dich für dich,
Wir haben alle im Leben und im Leben zufällige Erfahrungen. Wir haben ein kleines Leben,
Ich mache derzeit eine Praktikumsstelle, die mir nicht passt.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Standardmäßig ist der eingeklappte Inhalt verborgen. Sie können die Klasse .show hinzufügen, um den Inhalt standardmäßig anzuzeigen:

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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">
　　<h2> Einfaches Klapplayout:/h2>
　　<p> Sie können die Klasse .show hinzufügen, um den Inhalt standardmäßig anzuzeigen:/p>
　　<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Einfaches Collapse</button>
　　<div id="demo" class="collapse show">
　　　　Ich bete für dich, opfere dich für dich,
Wir haben alle im Leben und im Leben zufällige Erfahrungen. Wir haben ein kleines Leben,
Ich mache derzeit eine Praktikumsstelle, die mir nicht passt.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Das folgende Beispiel zeigt ein einfaches Akkordeon durch Erweiterung der Karten-Komponente.

Hinweis: Verwenden Sie data-parent-Attribut, um sicherzustellen, dass alle collapse-Elemente unter dem angegebenen Elternelement sind, damit es ermöglicht wird, dass bei der Anzeige eines collapse-Options die anderen Options ausgeblendet werden.

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</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">
　　<h2>Faltbares Beispiel</h2>
　　<p><strong>Hinweis:</strong>Verwenden Sie den <strong>data-parent</strong>Um sicherzustellen, dass alle collapse-Elemente unter dem angegebenen Elternelement sind, damit es ermöglicht wird, dass bei der Anzeige eines collapse-Options die anderen Options ausgeblendet werden.</p>
　　<div id="accordion">
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="card-link" data-toggle="collapse" href="#collapseOne">
　　　　　　　　　　Option 1
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseOne" class="collapse show" data-parent="#accordion">
　　　　　　　　<div class="card-body>
　　　　　　　　　　#1　Inhalt: Grund教程(oldtoolbag.com)　--　Lernen Sie die Grundlagen, um weiter voranzukommen!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
　　　　　　　　Option zwei
　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseTwo" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body>
　　　　　　　　　　#2　Inhalt: Grund教程(oldtoolbag.com)　--　Lernen Sie die Grundlagen, um weiter voranzukommen!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　　<div class="card">
　　　　　　<div class="card-header">
　　　　　　　　<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
　　　　　　　　　　Option drei
　　　　　　　　</a>
　　　　　　</div>
　　　　　　<div id="collapseThree" class="collapse" data-parent="#accordion">
　　　　　　　　<div class="card-body>
　　　　　　　　　　#3　Inhalt: Grund教程(oldtoolbag.com)　--　Lernen Sie die Grundlagen, um weiter voranzukommen!!
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　</div>
</div>
　　　　
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Navigation Bootstrap4 Dropdown-Menü