Come implementare la fisarmonica bootstrap di Twitter?

Sto cercando di implementare il plug-in di compressione di bootstrap di Twitter (http://twitter.github.io/bootstrap/2.3.2/javascript.html#collapse) e non riesco a farlo funzionare. Pensando che fosse qualcosa di sbagliato nel mio ambiente di sviluppo, ho creato un JSfiddle e ho ancora gli stessi problemi. Ecco il jsfiddle:Come implementare la fisarmonica bootstrap di Twitter?

http://jsfiddle.net/qdqrT/1/

Ecco il codice HTML che è stato copiato direttamente dall'esempio bootstrap.

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     Collapsible Group Item #1 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
     Collapsible Group Item #2 
     </a> 
    </div> 
    <div id="collapseTwo" class="accordion-body collapse"> 
     <div class="accordion-inner"> 
     Anim pariatur cliche... 
     </div> 
    </div> 
    </div> 
</div>

Il CSS e javscript sono stati presi direttamente dalla pagina Personalizza bootstrap, con solo il CSS e JS crollo, e il trasition JS (che è una dipendenza per il plugin crollo).

Qualcuno sa perché questo è rotto?

fonte

2013-04-10 larkfofty

Ho funzionato. Penso che potresti non includere tutte le risorse richieste.

ho finito tra cui una versione hosted di bootstrap CSS e JS da BootstrapCDN

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">

Ecco la versione di lavoro: http://jsfiddle.net/qdqrT/3/

fonte

2013-04-10 02:23:34 lightswitch05

Questo è fantastico, grazie per la risposta. Preferirei non includere l'intero framework di bootstrap solo per la funzione di compressione. Sono un po 'confuso sul motivo per cui il pacchetto di bootstrap personalizzato non funziona. – larkfofty

Avrei bisogno di guardarlo di più, ma penso che la tua versione non funzioni perché ti mancano alcune regole CSS applicabili, non perché ti manca javascript. – lightswitch05

ho provato con una versione più recente di bootstrap (3.3.4) e il codice nella domanda ha funzionato quando sono inclusi i file corretti.

Non è stato necessario utilizzare la versione CDN del bootstrap (ma è possibile se lo si desidera).

ho bootstrap in una sottodirectory e di seguito nel mio HTML:

<!-- Bootstrap CSS (put this in the header of your HTML file)--> 
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> 

<!-- Bootstrap Javascript (put this at the end of your HTML file)--> 
<script src="bootstrap/js/bootstrap.min.js"></script>

(mi rendo conto che la questione è vecchio, ma penso che la mia risposta è più aggiornato rispetto alla risposta accettata e spero che aiuterà qualcuno)

fonte

2015-03-23 14:29:11 paulo62

Come implementare la fisarmonica bootstrap di Twitter?

risposta

Problemi correlati