Bootstrap implementiert reaktionsfähige Navigationsleisten-Effekt_Javascript-Fähigkeiten-js-Tutorial-php.cn

Um der Navigationsleiste reaktionsfähige Funktionen hinzuzufügen, muss der Inhalt, den Sie ausblenden möchten, in ein

mit den Klassen .collapse, .navbar-collapse eingeschlossen werden. Die reduzierte Navigationsleiste ist eigentlich eine Schaltfläche mit der Klasse .navbar-toggle und zwei Datenelementen. Das erste ist data-toggle, das JavaScript mitteilt, was mit der Schaltfläche geschehen soll, und das zweite ist data-target, das angibt, zu welchem Element gewechselt werden soll. Drei mit der Klasse .icon-bar erzeugen sogenannte Hamburger-Buttons. Diese wechseln zu Elementen in .nav-collapse

. Um diese Funktionen zu nutzen, müssen Sie das Bootstrap Collapse-Plugin einbinden.
Rendering:

Das folgende Beispiel zeigt dies:

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap 实例 - 响应式的导航栏</title> 
 <link href="bootstrap.min.css" rel="stylesheet"> 
 <script src="jquery-2.1.4.min.js"></script> 
 <script src="bootstrap.min.js"></script> 
</head> 
<body> 
 
<nav class="navbar navbar-default" role="navigation"> 
 <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse"> 
   <span class="sr-only">切换导航</span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
   <span class="icon-bar"></span> 
  </button> 
  <a class="navbar-brand" href="#">12345</a> 
 </div> 
 <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">iOS</a></li> 
   <li><a href="#">fgghh</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    Java <b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">vgghhr</a></li> 
    <li><a href="#">dg</a></li> 
    <li><a href="#">sfg</a></li> 
    <li class="divider"></li> 
    <li><a href="#">分离的链接</a></li> 
    <li class="divider"></li> 
    <li><a href="#">另一个分离的链接</a></li> 
   </ul> 
   </li> 
  </ul> 
 </div> 
</nav> 
 
 
</body> 
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Verwandte Etiketten：

bootstrap 导航

Quelle：php.cn

Vorheriger Artikel：Warum kann js Dezimaloperationen nicht korrekt verarbeiten? _Javascript-Kenntnisse Nächster Artikel：Implementierung eines Monatsauswahl-Plug-Ins basierend auf jQuery mit Quellcode download_jquery

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors