Bootstrap/Dropdown-Button

Hi Ich versuche, eine Dropdown-Taste mit Bootstrap zu erstellen. Aber es scheint einfach nicht richtig heraus zu kommen?Bootstrap/Dropdown-Button

<div class="btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Action 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Foo</a></li> 
     <li><a href="#">Bar</a></li> 
    </ul> 
</div>

A jsfiddle ist hier http://jsfiddle.net/UrgP8/

Irgendwelche Ideen?

Danke,

Quelle

2012-12-21 felix001

Es scheint wie ein Javascript-Problem: für den Anfang sind Sie Bootstrap-dropdown.js und bootstrap.min.js enthalten sollten Sie nur eine, aber das löst nicht das Problem in der Geige ... – Agush

Sie sind eine kräftige Menge externer Ressourcen in jsfiddle Laden durch Einfügen, was HTML-Quellcode in die HTML-Ansicht praktisch die volle Bootstrap ist.

Hier ist eine viel einfachere Version , die nur drei externe Dateien lädt.

http://jsfiddle.net/BqKNV/65/

Die Basis html gleich ist (SO ließ mich nicht schreiben, ohne Code zu setzen ...)

<div class="dropdown btn-group"> 
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Action 
     <span class="caret"></span> 
    </a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Foo</a></li> 
     <li><a href="#">Bar</a></li> 
    </ul> 
</div>

Beachten Sie, dass jQuery über jsFiddle Framework-Panel geladen wird, Bootstrap css und js werden über die BootstrapCDN geladen:

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
// netdn a.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js

Was passiert, wenn Sie diesen HTML als Seite speichern, und es in einem Browser laufen?

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <title> - jsFiddle demo</title> 
     <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script> 
     <script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script> 
     <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> 
    </head> 
    <body> 
     <div class="dropdown btn-group"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
      Action 
      <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">Foo</a></li> 
      <li><a href="#">Bar</a></li> 
     </ul> 
     </div> 
    </body> 
    </html>

Quelle

2012-12-22 00:40:03 mg1075

Vielen Dank für Ihre Antwort. Es scheint so zu sein, dass sie alle in Action arbeiten, aber sobald ich direkt in einem Browser versuche, bekomme ich das gleiche Problem? – felix001

@ felix001 - nicht ganz sicher, was du meinst. Ich habe den Code eingefügt und einige weitere Elemente entfernt, die in der Datei enthalten waren. Was passiert, wenn Sie das in einem Browser ausführen? – mg1075

Vielen Dank, es funktioniert jetzt Ich denke es war wie ich die js Skripte geladen habe. – felix001

Ok gefunden, was scheint das Problem in Ihrer Geige zu sein.

Es ist, dass Sie laden:

<link href="http://flip.hr/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

habe ich es zu:

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />

Und dass es im Grunde gelöst. Sie können es hier sehen: http://jsfiddle.net/6hPMb/1/

Aber außer, dass das Problem, das ich in den Kommentaren erwähnt steht noch, Sie laden beide Bootstrap-dropdown.js und bootstrap.min.js

Sie sollten nur eins verwenden.

Quelle

2012-12-22 00:55:32 Agush

Bootstrap/Dropdown-Button

Antwort

Verwandte Themen