So erstellen Sie die Standard-Bootstrap-Navbar und -Schaltfläche für mobile Geräte
Veröffentlicht: 2022-02-16
Bootstrap ist ein HTML-, CSS- und JavaScript-Framework. Mit ihm können Sie ganz einfach Mobile-First-Responsive-Websites erstellen. Es bietet Ihnen viele voreingestellte CSS-Stile für Webelemente, einschließlich Navigationsleisten.
In diesem Tutorial erfahren Sie, wie Sie auf einfache Weise eine einfache, auf Bootstrap reagierende Navigationsleiste erstellen. Dann lernen Sie, wie Sie einen Bootstrap Standard Navbar Button für mobile Geräte verwenden.
Um Bootstrap nutzen zu können, müssen Sie es zuerst installieren. Für die Zwecke dieses Tutorials können Sie es überall auf Ihrem lokalen PC installieren – es muss kein Webserver sein. Machen wir es zusammen.
Schritt 1. Bootstrap herunterladen
- Gehen Sie zu getboostrap.com und klicken Sie auf die Schaltfläche „Bootstrap herunterladen“:
- Klicken Sie auf der nächsten Seite „Erste Schritte“ auf eine weitere Schaltfläche „Bootstrap herunterladen“:
- Speichern Sie diese Datei irgendwo auf Ihrer Festplatte:
Schritt 2. Installieren Sie Bootstrap auf Ihrem lokalen PC
- Entpacken Sie diese Datei
- Benennen Sie den resultierenden Ordner in Bootstrap um
Schritt 3. Erstellen Sie eine einfache index.html -Datei
- Erstellen Sie in Ihrem Bootstrap -Ordner eine index.html -Datei mit dem folgenden Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>Schritt 4. Erstellen Sie eine responsive Navigationsleiste
- Erstellen Sie direkt unter dem öffnenden Body-Div ein neues Div mit der Bootstrap-Klasse des Containers :
<div class="container"><!-- Start navbar container div -->
- Drücken Sie einige Male die Eingabetaste, um etwas Platz zu schaffen und dieses neue Div zu schließen:
</div><!-- Finish navbar container div -->
- Erstellen Sie in Ihrem neuen Container -Div das Nav -Tag für Ihre neue Navbar:
<nav class="navbar navbar-default">
- Drücken Sie auf Ihrer Tastatur mehrmals die Eingabetaste und schließen Sie das Tag:
- Erstellen Sie innerhalb des Nav -Tags ein weiteres Container -Div und beginnen Sie mit der Erstellung des eigentlichen Inhalts der Navbar:
<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>
- Löschen Sie das Tag <h1> und seinen Inhalt.
- Suchen Sie, wo Ihr Navbar-Header- Div schließt, und erstellen Sie direkt darunter ein weiteres Div ohne Klassen.
- Beginnen Sie in diesem Div eine ungeordnete Liste, die die tatsächlichen Elemente Ihrer responsiven Navigationsleiste enthält:
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
- Speichern Sie Ihre index.html-Datei.
- Öffnen Sie diese Datei in Ihrem Browser. Sie sollten jetzt Ihre responsive Navigationsleiste sehen. Sie sind fast bereit, es zur standardmäßigen mobilen Navigationsleiste zu machen. Bevor Sie dies jedoch tun, lassen Sie uns es etwas verbessern.
- Bitte gehen Sie zurück zu Ihrer index.html -Datei.
- Ändern Sie in Ihrem Nav -Tag die Standardeinstellung in Invers , um den folgenden Code zu erhalten:
<nav class="navbar navbar-inverse">
- Speicher die Datei.
- Gehen Sie zurück zu Ihrer Website und aktualisieren Sie die Seite. Ihre Navigationsleiste sieht jetzt etwas schöner aus:
Gut erledigt! Ihre responsive Navigationsleiste ist jetzt bereit, damit Sie weiter daran arbeiten können.
Sehen Sie sich das Video unten an, um zu erfahren, wie Sie die soeben erstellte Navigationsleiste durch die standardmäßige Bootstrap-Menüschaltfläche für mobile Benutzer ersetzen.