Pulsante Bootstrap/Dropdown

Hi Sto cercando di creare un pulsante a discesa utilizzando il bootstrap. Ma non sembra uscito correttamente?Pulsante Bootstrap/Dropdown

<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>

Un jsfiddle è qui http://jsfiddle.net/UrgP8/

Tutte le idee?

Grazie,

fonte

2012-12-21 felix001

Sembra un problema di javascript: per cominciare hai incluso bootstrap-dropdown.js e bootstrap.min.js dovresti averne solo bisogno, ma questo non risolve il problema nel violino ... – Agush

si sta caricando una notevole quantità di risorse esterne in jsfiddle incollando ciò che è praticamente la sorgente html di bootstrap completo nella visualizzazione HTML.

Ecco una versione molto più originale che carica solo tre file esterni.

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

il codice HTML di base è la stessa (SO non mi lasciava spedire senza mettere in codice ...)

<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>

Nota che jQuery viene caricato tramite pannello di quadro di jsFiddle, bootstrap css e js vengono caricati tramite il BootstrapCDN:

//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

Che cosa succede se si salva l'html come una pagina, e si esegue in un browser?

<!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>

fonte

2012-12-22 00:40:03 mg1075

Grazie per il tuo risposta. Sembra che tutti lavorino in jsfiddle ma non appena provo direttamente all'interno di un browser ottengo lo stesso problema? – felix001

@ felix001 - non sono sicuro di cosa intendi. Ho incollato il codice, con alcuni altri elementi rimossi, che era nel jsfiddle. Cosa succede quando lo si esegue in un browser? – mg1075

Molte grazie, funziona ora penso che stavo caricando gli script js. – felix001

Ok trovato quello che sembra essere il problema nel vostro violino.

E 'che si sta caricando:

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

ho cambiato in:

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

e che in fondo risolto. Potete vedere qui: http://jsfiddle.net/6hPMb/1/

Ma oltre a questo, il problema che ho citato nei commenti si ferma, si sta caricando entrambi bootstrap-dropdown.js e bootstrap.min.js

Si dovrebbe usare solo uno.

fonte

2012-12-22 00:55:32 Agush

Pulsante Bootstrap/Dropdown

risposta

Problemi correlati