Bootstrap bietet verschiedene Optionen zum Erstellen von Navigationsmenüs, z. B. Tabs und vertikale Pillen. Um diese Art von Navigationsmenüs in Bootstrap zu erstellen, können wir die integrierten Klassen und Komponenten verwenden, die das Framework bietet und funktionelles Navigationsmenü, das auf allen Geräten gut funktioniert.
In dieser Art von Menüs stellt jede Registerkarte einen anderen Abschnitt der Website dar. Die Pillen werden horizontal angeordnet, wenn auf eine Registerkarte geklickt wird.
Laden Sie die CSS- und JavaScript-Dateien von Bootstrap.
Fügen Sie ein Containerelement mit der Überschrift „Tutorialspoint“ hinzu.
Erstellen Sie ein Navigationsmenü mit 3 Registerkarten.
Deklarieren Sie jede Registerkarte.
Fügen Sie zu jeder Registerkarte Inhalte hinzu.
Laden Sie die Bootstrap-JavaScript- und jQuery-Dateien.
<!DOCTYPE html> <html> <head> <title>Tabbed Pill Navigation Menu Example</title> <!-- Add Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <!-- Container for the navigation menu and content --> <div class="container mt-4"> <!-- Page title --> <h1>Tutorialspoint</h1> <!-- Navigation menu with tabs as pills --> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <!-- Home tab --> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a> </li> <!-- Profile tab --> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <!-- Contact tab --> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a> </li> </ul> <!-- Content for each tab --> <div class="tab-content" id="pills-tabContent"> <!-- Home tab content --> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <h1>Home</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Profile tab content --> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <h1>Profile</h1> <p>Lorem ipsum dolor sit amet.</p> </div> <!-- Contact tab content --> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet.</p> </div> </div> </div> <!-- Add Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
Vertikale Registerkarten hingegen sind eine Art Navigationsmenü, bei dem Links vertikal statt horizontal angeordnet sind. Dies trägt zu einem reibungslosen Benutzererlebnis bei.
Erstellen Sie einen Container mit dem Titel „Tutorialspoint“.
Der Container sollte eine Zeile und zwei Spalten haben.
Die erste Spalte enthält das vertikale Navigationsmenü, während die zweite Spalte den Inhalt des ausgewählten Menüpunkts anzeigt.
Das Menü wird mithilfe der Klassen „nav“ und „nav-pill“ erstellt, wodurch die Menüelemente in einem pillenähnlichen vertikalen Stil angezeigt werden.
Jedes Element ist ein Ankertag mit einem eindeutigen „href“, das auf ein „Tab-Panel“ verweist, das den entsprechenden Inhalt anzeigt.
Der Inhalt jedes Menüs wird in einem „Tab-Bereich“ angezeigt, der in eine Klasse „Tab-Inhalt“ eingebettet ist.
Der JavaScript-Code enthält die jQuery-Bibliothek und einige Bootstrap-JavaScript-Plugins, damit das Menü funktioniert.
<!DOCTYPE html>
<html>
<head>
<title>Vertical Pill Navigation Menu</title>
<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Add jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Add Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Add Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
background-color: #f8f9fa;
}
/* Style for nav links */
.nav-pills .nav-link {
color: #fff;
background-color: #61a4f0;
border-radius: 0;
margin: 5px 0;
font-weight: bold;
padding: 10px;
border: none;
transition: all 0.2s ease-in-out;
}
/* Style for active and hover nav links */
.nav-pills .nav-link:hover,
.nav-pills .nav-link.active {
background-color: #007bff;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/* Remove focus outline from nav links */
.nav-pills .nav-link:focus {
box-shadow: none;
outline: none;
}
/* Style for tab content */
.tab-content {
background-color: #fff;
padding: 20px;
border-radius: 0 4px 4px 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="container">
<h1>Tutorialspoint</h1>
<div class="row">
<div class="col-md-3">
<!-- Vertical navigation pills -->
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-9">
<!-- Tab content -->
<div class="tab-content" id="v-pills-tabContent">
<!-- Home tab -->
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h3>Home</h3>
<p>Welcome to the home page!</p>
</div>
<!-- Profile tab -->
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>Profile</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Messages tab -->
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>Messages</h3>
<p>Lorem ipsum dolor.</p>
</div>
<!-- Settings tab -->
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<h3>Settings</h3>
<p>Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Add Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Diese Arten von Menüs können die Benutzeroberfläche und das Benutzererlebnis Ihrer Website verbessern.
Zu den alternativen Umsetzungsmöglichkeiten gehören:
Erstellen Sie ein benutzerdefiniertes Menü mit benutzerdefinierten CSS- und Javascript-Funktionen.
Neben Bootstrap bieten CSS-Frameworks wie Materialise und Bulma ähnliche Funktionen.
Wir können auch einige Bibliotheken von Drittanbietern wie jQuery UI, UIkit und Semantic UI verwenden, um diese Art von Navigationsmenü zu erstellen.
Das obige ist der detaillierte Inhalt vonErstellen Sie in Bootstrap Pillen-Navigationsmenüs mit Registerkarten und vertikalen Pillen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Einstellungen der Java-Umgebungsvariablen
So verwenden Sie fusioncharts.js
Lösung für fehlgeschlagenes WIN10-Update
So lösen Sie das Problem, dass MySQL Link 10060 meldet
Was passiert, wenn die IP-Adresse nicht verfügbar ist?
odm
Der Unterschied zwischen großer Funktion und maximaler Funktion
Gründe, warum phpstudy nicht geöffnet werden kann
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
