Heim >Web-Frontend >js-Tutorial >Beispiel für eine reaktionsfähige BootStrap-Navigationsleiste: Einführung_Javascript-Kenntnisse
Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung. Mit der reaktionsfähigen Navigationsleiste können Sie verschiedene Effekte auf verschiedenen Geräten anzeigen.
Lassen Sie mich den Code mit Ihnen teilen:
<header role="banner"> <nav role="navigation" class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html">Bootstrappin'</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div><!--/.container --> </nav> </header>
data-toggle=“collapse“ Erwartetes Verhalten
Der obige Inhalt ist ein Beispiel für die vom Herausgeber eingeführte responsive Navigationsleiste von BootStrap. Ich hoffe, dass er für alle hilfreich ist!