Bootstrap4 Grund教程

Bootstrap4 Navigationsleiste Bootstrap4 Einfügen

Bootstrap4 Navigation

Bootstrap bietet eine einfache und schnelle Methode zur Erstellung grundlegender Navigationselemente, wie z.B. Tabs und Pillen, die sehr flexibel und schön sind. Alle Navigationselemente von Bootstrap (Tabs und Pillen) teilen sich die gleiche grundlegende .nav Klasse und haben gleiche Grundmarken und -stile.

Wenn Sie eine einfache horizontale Navigationsleiste erstellen möchten, können Sie .nav Klasse, .nav zu jedem <li> Element hinzufügen-item Klasse, .nav zu jedem Link hinzufügen-link Klasse:

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>Navigation</h2>
　　<p>Einfache horizontale Navigation:</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Navigation Ausrichtung

.justify-content-center Klasse zur zentralen Anzeige der Navigation, .justify-content-end Klasse zur Rechtsausrichtung der Navigation.

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>Navigation</h2>
　　<p>Linksbereich linksbündig ausrichten (Standard):</p>
　　<ul　class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
　　
　　<p　class="text-center">Zentrierte Navigation:</p>
　　<ul　class="nav　justify-content-center">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
　　　　
　　<p　class="text-right">Rechtsbündige Navigation:</p>
　　<ul　class="nav　justify-content-end">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Vertikale Navigation

.flex-column-Klasse wird verwendet, um vertikale Navigation zu erstellen：

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>Vertikale Navigation</h2>
　　<p>.flex-column-Klasse wird verwendet, um vertikale Navigation zu erstellen：</p>
　　<ul　class="nav　flex-column">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Tab

Verwenden Sie .nav-tabs-Klasse kann die Navigation in Tabs umwandeln. Und markiert die ausgewählte Option mit .active-Klasse.

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>Tab</h2>
　　<p>Tab-Navigation:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Kapsel-Navigation

.nav-pills-Klasse kann die Navigationspunkte in Kapselform darstellen.

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>Kapsel</h2>
　　<p>Kapsel-Navigation:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Navi-gation in gleicher Breite

.nav-justified-Klasse kann die Navigationspunkte in gleicher Breite und gleicher Höhe anzeigbar einstellen.

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>Navi-gation in gleicher Breite</h2>
　　<p>.nav-justified-Klasse kann die Navigationspunkte in gleicher Breite und gleicher Höhe anzeigbar einstellen.</p>
　　<ul class="nav nav-pills　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul><br>
　　<p>Justizierte Tabs:</p>
　　<ul class="nav nav-tabs　nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Kapsel-Dropdownmenü

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>Kapsel-Navigationsleiste mit Dropdownmenü</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Dropdown</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Link　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

>Optionstabs-Dropdownmenü<

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>Optionstabs-Dropdownmenü</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　active"　href="#">Aktiv</a>
　　　　</li>
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-link　dropdown-toggle"　data-toggle="dropdown"　href="#">Dropdown</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Link　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Link　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Link　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link"　href="#">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link　disabled"　href="#">Deaktiviert</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Dynamische Optionstabs

Wenn Sie die Optionstabs dynamisch umschaltbar machen möchten, können Sie an jedem Link data-toggle="tab"-Eigenschaft. Fügen Sie dann .tab hinzu, um den Inhalt jeder Option hinzuzufügen-pane-Klasse.

Wenn Sie einen Einblenden-Effekt haben möchten, können Sie in .tab-pane nach hinzufügen 　 .fade-Klasse:

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>Optionen umschalten</h2>
　　<br>
　　<!--　Nav　tabs　-->
　　<ul class="nav nav-tabs"　role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab"　href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Kapsel-Dynamische Optionstabs

Für Kapsel-Dynamische Optionstabs müssen Sie nur die Daten in den obigen Beispielcode ändern-toggle Eigenschaft auf data-toggle="pill":

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>Kapsel-Optionstabs wechseln</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2HOME/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Navigationsleiste Bootstrap4 Einfügen