Heim > Artikel > Web-Frontend > Welche Arten der Navigation bietet Bootstrap?
Welche Arten der Navigation bietet Bootstrap?
- (*-*)浩Original
- 2019-07-12 10:37:354386Durchsuche
Bootstrap kann eine Vielzahl von Navigationsfunktionen erstellen, darunter: grundlegende Navigation auf Etikettenbasis und Kapseletiketten, gestapelte oder vertikale Navigation auf Etikettenbasis und Kapseletiketten, Dropdown-Menüs basierend auf Etiketten und Kapseletiketten, Verwendung Navigationslisten zum Erstellen einer gestapelten Navigation und JavaScript zum Erstellen einer anklickbaren Navigation (verschiedene Richtungen).
Grundlegende Tags (empfohlenes Lernen: Bootstrap-Video-Tutorial)
Zwei CSS-Klassen. nav und .nav-tabs werden verwendet, um eine grundlegende tabulatorbasierte Navigation zu erstellen. In der Bootstrap-Version v2.0.1 werden Stile für die CSS-Klasse .nav in den Zeilennummern 2176 bis 2220 deklariert (die auch einige verwandte Stile enthalten). Die Zeilennummern 2222 bis 2267 enthalten Stile für .nav-Tabs.
Das folgende Beispiel zeigt, wie Sie Bootstrap verwenden, um eine einfache Tag-basierte Navigation zu erstellen.
<div class="container"> <div class="row"> <div class="span6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Einfache Kapsel-Tags
Sobald Sie wissen, wie Sie mit Bootstrap eine grundlegende tagbasierte Navigation erstellen, ist es einfach, eine grundlegende kapselbasierte Navigation zu erstellen. Anstatt hier die Klasse .nav-tabs zu verwenden, verwenden Sie hier die Klasse .nav-pills. Die Stile für .nav-pills befinden sich in Bootstrap.css in den Zeilen 2222 bis 2224 und werden in Bootstrap.css in den Zeilen 2268 bis 2280 noch einmal wiederholt (in letzter Instanz verwendet).
Das folgende Beispiel zeigt, wie man eine einfache Navigation basierend auf Kapsel-Tags erstellt.
Bootstrap Basic Capsule Tag-basiertes Navigationsbeispiel
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Gestapelte oder vertikale Tags
Um gestapelte oder vertikale Tags zu erstellen, müssen Sie für die Navigation mit Registerkarten hinzufügen Fügen Sie Ihrem Markup die Klassen .nav-stacked, .nav und .nav-tabs hinzu, die standardmäßig eine horizontale tabulatorbasierte Navigation erstellen. Die Zeilennummern 2281 bis 2309 enthalten den .nav-stacked-Stil. Hier ist ein Beispiel.
Beispiel für eine gestapelte oder vertikale tab-basierte Bootstrap-Navigation
<div class="container"> <div class="row"> <div class="span8"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Tab-basiertes Dropdown-Menü
Mit dem Bootstrap-Menü können Sie ein tab-basiertes Dropdown-Menü erstellen Navigation. Sie benötigen neben den Klassen .nav und .nav-tabs vier CSS-Klassen – .dropdown, .dropdown-toggle, .dropdown-menu und .caret. In bootstrap.css (Version 2.0.1) enthalten die Zeilennummern 1545 bis 1547 den Klassenstil .dropdown, die Zeilennummern 1548 bis 1553 den Stil .dropdown-toggle und die Zeilennummern 1576 bis 1632 den Stil .dropdown-menu. Die Zeilennummern 1554 bis 1575 enthalten den .caret-Stil. Im Demo-Beispiel wird auch eine andere CSS-Klasse .divider verwendet, ist aber nicht erforderlich.
Natürlich müssen Sie in Ihrer HTML-Datei auf drei JavaScript-Dateien verweisen – jquery.js, bootstrap-dropdown.js und application.js. Alle diese befinden sich im Ordner docs/assets/js/.
Das Folgende ist ein Beispiel.
Beispiel für Bootstrap-Tag-basierte Dropdown-Menünavigation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 基于标签的下拉菜单的导航实例</title>
<meta name="description" content="Bootstrap 基于标签的下拉菜单的导航实例">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div>
<div>
<div>
<ul class="nav nav-tabs">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a data-toggle="dropdown" href="#">FrontEnd<b></b></a>
<ul>
<li><a href="#">Twitter Bootstrap</a></li>
<li><a href="#">Google Plus API</a></li>
<li><a href="#">HTML5</a></li>
<li></li>
<li><a href="#">Examples</a></li>
</ul>
</li>
<li><a data-toggle="dropdown" href="#">BackEnd<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">PostgreSQL</a></li>
<li></li>
<li><a href="#">Live Demos</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>
Weitere technische Artikel zum Thema Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr zu erfahren!
Das obige ist der detaillierte Inhalt vonWelche Arten der Navigation bietet Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!