Navbar Dropdown in Bootstrap 3

Ich habe vor kurzem angefangen zu lernen und mit Bootstrap 3. Ich dachte, ich würde beginnen mit etwas einfaches - eine header-und eine dropdown-bar. Ich benutzt den code aus der Bootstrap-website.

Begann ich mit der basic Bootstrap-Vorlage, dann die bootstrap navbar. Das ist mein code bisher.

<!DOCTYPE html>
<html>
  <head>
    <title>WEBSITE NAME</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

<h1>WEBSITE NAME</h1>

    <nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a></li>
      <li><a href="#">Software</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
      <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Dem dropdown-Menü ist absolut überhaupt nicht - Sie schweben oder klicken. Was muss ich tun?

EDIT: ich benutzt den Safari web inspector und die Ressource "jquery.js" rot ist (Angabe fehlt). Dieser kommt aus den Linien:

Ich Schreibe dies, basierend auf dem Standard-basic-Seite, von der Bootstrap-Website. Ich bin mir nicht sicher, was zu ändern Sie den Pfad, um es zu korrigieren. Es gibt keine 'jquery.js' Datei in den Projekt-Ordner zur Verfügung gestellt.

Es gibt eine Menge von änderungen zwischen Bootstrap-und Bootstrap-3(.2.3). Überprüfen Sie immer, ob die Klassen sind in Ihrer css-Datei. Nicht sicher, ob dies der Fall ist, gerade jetzt, aber es könnte sich lohnen zu prüfen

InformationsquelleAutor | 2013-10-20

1

Erfolg!

Bemerkte ich, dass die 'code.jquery.com/jquery.js' Datei nicht erreichbar war in der Safari web inspector. Das Problem war diese Zeile:
```
<script src="//code.jquery.com/jquery.js"></script>
```
Die Datei konnte nicht erreicht werden. Für einige Grund, der http: ein Teil fehlte. Ändern Sie den code,
```
<script src="http://code.jquery.com/jquery.js"></script>
```
wurde das Problem behoben! Huzzah!

Zusätzliche Anmerkung: ich finde, dass, wenn diese waren ausgeführt online und nicht lokal, http: Teil wäre nicht erforderlich.
- Wie Sie sagen, 'http:" nicht "fehlt" - so was nennt man ein 'Protokoll-unabhängige Referenz. Es wird verwendet, um sicherzustellen, dass wenn Sie sind derzeit auf eine http-Seite der asset-wird geladen über http und wenn man auf eine https-Seite es geladen wird über https (also die Vermeidung von mixed-content-Warnungen). Wie Sie wurden, die die Seite anzeigen, die auf eine 'file:///' - url, dann wird dieser Sie verursacht haben Probleme...
InformationsquelleAutor
0

Lief ich Ihr code nach dem herausnehmen der "html5shiv" und "reagieren.min" Referenzen und das dropdown-Menü funktioniert einwandfrei. Ich vermute, die jQuery und Bootstrap JS Dateien, deren Datei-Pfade falsch angegeben.
- In welcher Abteilung sind Sie speziell beziehen?
- Ganz unten "src" Verweise. Sie verweist auf die richtigen Pfade?
InformationsquelleAutor Lloyd Banks

Abschnitt:-

<ul class="nav navbar-nav navbar-right">
  <li><a href="https://twitter.com/"><span class="glyphicon glyphicon-comment"></span> Twitter</a></li>
  <li><a href="https://youtube.com/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
    </ul>
  </li>
</ul>

hat eine extra </ul> und </li> das ist wahrscheinlich nicht die Ursache Ihres Problems, aber nicht helfen...

InformationsquelleAutor dav1dsm1th

0

Ich geladen habe exakt diese Datei auf meinem WAMP-server lokal und alles funktionierte einwandfrei:
Möchten Sie vielleicht, dies zu ändern am unteren Rand der Seite:
src="http://code.jquery.com/jquery.js"
Es ist nichts falsch mit Ihrem code und den HTML5 shiv und respond.js hat nichts zu tun mit dem Menü nicht funktioniert...

Könnten Sie jedoch möchten, verwenden Sie Google Chrome, und verwenden Sie das element untersuchen um sicherzustellen, dass Ihre Referenz-Punkte korrekt sind.

Hover funktioniert nicht out of the box in BS3, können Sie eine benutzerdefinierte javascript, dass die Arbeit... ich benutze es hier: http://thisamericanjourney.com/
bewegen Sie den Mauszeiger über das über den Menüpunkt:
//Dies ermöglicht dem Benutzer, den Mauszeiger über das Menü ohne Klick auf
```
   $(function() {


$('ul.nav li.dropdown').hover(function() {
    $('.dropdown-menu', this).fadeIn('fast');
}, function() {
    $('.dropdown-menu', this).fadeOut('fast');
});

    }); 
```
- Ich habe alle Dateien auf meinem Rechner (lokal). Ich habe alles in der "dist" - Ordner. Dort sind die drei Ordner css, fonts und js, und mein 'index.html' - Datei. Für was es Wert ist, ich benutze den Safari web-browser.
- Was empfehlen Sie ich tun, die Zeile " <script src="//code.jquery.com/jquery.js"></script>' ?
- Ja GENAU 🙂 Das war das, was ich Ihnen sagen will,... Froh zu sehen, Sie bekam es funktioniert! Ich habe versucht, Ihnen zu sagen, in meinem post hier: möchten Sie vielleicht, dies zu ändern am unteren Rand der Seite: src="code.jquery.com/jquery.js" mit einem absoluten Pfad zu jQuery 🙂
- Leute, ich habe fast das gleiche Problem! dropdown funktioniert nicht auf neuesten Chrome, aber Safari funktioniert es 🙁
InformationsquelleAutor WebDev67

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.