Bootstrap4 Grundtutorials

Bootstrap4 Brotkrümelnavigation Bootstrap4 Navigation

Bootstrap4 Navigationsleiste

　　 Verwenden Sie die Bootstrap-Navigationsleistenkomponente, um eine responsive Navigationsüberschrift für Ihre Website oder Anwendung zu erstellen. Diese responsiven Navigationsleisten sind zunächst auf Geräten mit kleinen Ansichten (wie Smartphones) gefaltet, erweitern sich jedoch, wenn der Benutzer auf den Schalter klickt. Aber auf Mittelschirmen und großen Geräten wie Laptops oder Desktop-Computern ist sie wie gewohnt horizontal.

Die Navigationsleiste befindet sich in der Regel oben auf der Seite.

Wir können die Klasse .navbar verwenden, um eine Standardnavigationsleiste zu erstellen, gefolgt von: .navbar-expand-Verwenden Sie die Klassen xl|lg|md|sm, um eine responsive Navigationsleiste zu erstellen (große Bildschirme sind horizontal ausgerichtet, kleine Bildschirme sind vertikal gestapelt).

Die Optionen in der Navigationsleiste können mit dem <ul>-Element verwendet werden und die Klasse hinzufügen. Fügen Sie dann .nav auf dem <li>-Element hinzu-Klasse item, verwenden Sie .nav auf dem <a>-Element-Klasse link:

示例

<!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>
<nav class="navbar navbar-expand-sm bg-hell">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Einfaches Beispiel für eine Navigationsleiste</h2>
　　<p>Die Navigationsleiste befindet sich in der Regel oben auf der Seite.</p>
　　<p>Wir können die Klasse .navbar verwenden, um eine Standardnavigationsleiste zu erstellen, gefolgt von: .navbar-expand-Verwenden Sie die Klassen xl|lg|md|sm, um eine responsive Navigationsleiste zu erstellen (große Bildschirme sind horizontal ausgerichtet, kleine Bildschirme sind vertikal gestapelt).</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Vertikale Navigationleiste

Durch Entfernen der .navbar-expand-xl|lg|md|sm-Klassen zur Erstellung einer vertikalen Navigationleiste:

示例

<!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>
<nav class="navbar bg-hell">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Vertikale Navigationleiste</h2>
　　<p>Die Navigationleiste befindet sich normalerweise im Header der Seite.</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Verschiedenefarbige Navigationleisten

Sie können die folgenden Klassen verwenden, um verschiedenefarbige Navigationleisten zu erstellen: .bg-primär, .bg-erfolgreich, .bg-informativ, .bg-warnend, .bg-gefährlich, .bg-sekundär, .bg-dunkel und .bg-hell).

Hinweis: Für dunkle Hintergründe muss die Textfarbe heller gesetzt werden, für helle Hintergründe muss die Textfarbe dunkler gesetzt werden.

示例

<!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">
　　<h2>Verschiedenefarbige Navigationleisten</h2>
　　<p>Für dunkle Hintergründe muss die Textfarbe heller gesetzt werden, für helle Hintergründe muss die Textfarbe dunkler gesetzt werden.</p>
</div>
<nav class="navbar navbar-expand-sm bg-helle navbar-hell">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-primäre navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-erfolgreiche navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-informative navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-warnende navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-gefährliche navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
<nav class="navbar navbar-expand-sm bg-sekundäre navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-item active">
　　　　　　<a class="nav-link" 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>
</nav>
</body>
</html>

Testen Sie es heraus ‹/›

Aktivierung und Deaktivierung: Sie können die Klasse "active" auf dem <a>-Element hinzufügen, um die ausgewählte Option hervorzuheben. Die Klasse "disabled" wird verwendet, um den Link nicht klickbar zu machen.

Marke/Logo

.navbar-Die Klasse "brand" wird verwendet, um die Marke hervorzuheben/Logo:

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marke/logo　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marke/Logo</h2>
　　<p>.navbar-Die Klasse "brand" wird verwendet, um die Marke hervorzuheben/Logo:</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Falls ein Bild verwendet wird, kann "navbar" verwendet werden:-Die Klasse "brand" zur Anpassung der Bildgröße der Navigationleiste.

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marke/logo　-->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://static.oldtoolbag.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
　　</a>
　　
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marke　/　Logo</h2>
　　<p>Falls ein Bild verwendet wird, kann "navbar" verwendet werden:-Die Klasse "brand" zur Anpassung der Bildgröße der Navigationleiste.</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Collapse-Navigationleiste

In der Regel klappen wir die Navigationleiste auf kleinen Bildschirmen ein und zeigen die Navigationsoptionen durch Klicken an.

Um eine collapse-Navigationleiste zu erstellen, können Sie auf dem Button hinzufügen: data-um "einzuklappen" und "data"-Ziel="#"thetarget"-Klasse. Legen Sie dann die Navigationsinhalte (Links) in den div mit der Klasse um, deren id dem Button data-target durch den spezifizierten id:

示例

<!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>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
　　<a class="navbar-brand" href="#">Navbar</a>
　　<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
　　　　<span class="navbar-toggler-icon"></span>
　　</button>
　　<div class="collapse navbar-collapse" id="collapsibleNavbar">
　　　　<ul class="navbar-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>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>Faltbare Navigationsleiste</h2>
　　<p>Normalerweise falten wir die Navigationsleiste auf kleinen Bildschirmen ein und zeigen die Navigationsoptionen durch Klicken an.</p>
　　<p>Hinweis: Wenn Sie .navbar-expand-md-Klasse, die Navigationslinks immer versteckt und den Schaltknopf immer sichtbar hält.</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Die Navigationsleiste verwendet Dropdown-Menüs

Unter der Navigationsleiste können Dropdown-Menüs eingerichtet werden：

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marke　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　　　<!--　Dropdown　-->
　　　　<li class="nav-item dropdown">
　　　　　　<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
　　　　　　　　Dropdown-Link
　　　　　　</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>
　　</ul>
</nav>
<br>
　　
<div class="container">
　　<h2>Die Navigationsleiste verwendet Dropdown-Menüs</h2>
　　<p>Unter der Navigationsleiste können Dropdown-Menüs eingerichtet werden.</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Formular und Button der Navigationsleiste

Das Formular-Element "form" der Navigationsleiste verwendet Klassen, um das Layout des Eingabefelds und des Buttons zu gestalten：

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<input class="form-control" type="text" placeholder="Suche">
　　　　<button class="btn btn-success" type="button">Suche</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>Das Formular der Navigationsleiste</h2>
　　<p>Das Formular-Element "form" der Navigationsleiste verwendet "class="form-inline"-Klasse, um das Layout des Eingabefelds und des Buttons zu gestalten：</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Sie können auch andere Eingabefeld-Klassen verwenden, wie z.B. .input-group-addon" wird verwendet, um eine kleine Markierung vor das Eingabefeld hinzuzufügen.

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form class="form-inline">
　　　　<div class="input-group">
　　　　　　<span class="input">-group-<input type="text" class="form/span>
　　　　　　control" placeholder="Username">-<input type="text" class="form
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>导航表单</h2>
　　<p>　.input-group-addon 类用于在输入框前添加小标签。</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

示例

<!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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Links　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Link　2</a>
　　　　</li>
　　</ul>
　　<!--　Navbar text-->
　　<span class="navbar-text">
　　　　Navbar text
　　</span>
</nav>
<br>
<div class="container">
　　<h2>导航栏文本</h2>
　　<p>使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定：

示例

<!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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-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>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>固定导航栏</h2>
　　<p>Die Navigationsleiste kann oben oder unten am Header fest montiert werden.</p>
　　<h1>Seiteninhalt rollen, um die Wirkung zu betrachten.</h1>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

.fixed-bottom 类用于设置导航栏固定在底部：

示例

<!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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Link</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Feste Navigationsleiste unten</h2>
　　<p>Die Navigationsleiste kann oben oder unten am Header fest montiert werden.</p>
　　<h1>Seiteninhalt rollen, um die Wirkung zu betrachten.</h1>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Brotkrümelnavigation Bootstrap4 Navigation