suchen

Heim  >  Artikel  >  Web-Frontend  >  Bootstrap implementiert reaktionsfähige Navigationsleisten-Effekt_Javascript-Fähigkeiten

Bootstrap implementiert reaktionsfähige Navigationsleisten-Effekt_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:22:591676Durchsuche

Um der Navigationsleiste reaktionsfähige Funktionen hinzuzufügen, muss der Inhalt, den Sie ausblenden möchten, in ein dc6dce4a544fdca2df29d5ac0ea9906b 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 45a2772a6b6107b401db3c9b82c049c2 mit der Klasse .icon-bar erzeugen sogenannte Hamburger-Buttons. Diese wechseln zu Elementen in .nav-collapse dc6dce4a544fdca2df29d5ac0ea9906b. 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>

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

Stellungnahme：
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
Vorheriger Artikel：Warum kann js Dezimaloperationen nicht korrekt verarbeiten? _Javascript-KenntnisseNächster Artikel：Warum kann js Dezimaloperationen nicht korrekt verarbeiten? _Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen