Bootstrap3 navbar-collapse n'apparaît pas avec cakephp

J'ai commencé à travailler avec le framephp cakephp il y a un mois. J'ai de la difficulté à créer une barre de navigation mobile. J'ai utilisé le Bootstrap suivant avec Cake: https://startbootstrap.com/template-overviews/round-about/Bootstrap3 navbar-collapse n'apparaît pas avec cakephp

Le problème est que navbar-collapse ne montre pas quand il est cliqué.

Les fichiers suivants sont liés CtP:

default.ctp

<?php$cakeDescription = 'BuySellSFSU';?> 
<!DOCTYPE html> 
<html> 
<head> 
<?= $this->Html->charset() ?> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title> 
    <?= $cakeDescription ?>: 
    <?= $this->fetch('title') ?> 
</title> 
<?= $this->Html->meta('icon') ?> 

<?= $this->Html->css('bootstrap.css') ?> 
<?= $this->Html->css('bootstrap.min.css') ?> 
<?= $this->Html->css('round-about.css') ?> 
<?= $this->Html->script('bootstrap.js') ?> 
<?= $this->Html->script('bootstrap.min.js') ?> 
<?= $this->Html->script('jquery.js') ?> 
<?= $this->Html->script('custom.js') ?> 

<?= $this->fetch('meta') ?> 
<?= $this->fetch('css') ?> 
<?= $this->fetch('script') ?> 
</head> 
<body> 
<!-- Navigation --> 
<?= $this->element('header') ?> 

<div id="content" class="container"> 

    <?= $this->Flash->render() ?> 
    <?= $this->fetch('content') ?> 

    <hr> 
    <!-- Footer --> 
    <?= $this->element('footer') ?> 
</div> 

</body> 
</html>

header.ctp

<!-- Navigation --> 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">BuySellStuffs</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <?php echo $this->Html->link('About', array('controller'=>'pages', 'action'=>'home', 'full_base'=>true)); ?> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav>

Le problème aka maux de tête lol

Merci pour l'aide, vraiment l'apprécier. : D

Source

2017-03-20 Dennis

Juste essayer de charger la jquery avant amorçage et retirer le bootstrap.min (css et js)

<?= $this->Html->script('custom.js') ?> 
<?= $this->Html->script('jquery.js') ?> 
<?= $this->Html->script('bootstrap.js') ?> 
<?= $this->Html->css('bootstrap.css') ?> 
<?= $this->Html->css('round-about.css') ?>

Source

2017-03-20 02:38:03 Scarlet

Merci, ça marche très bien. – Dennis

modifiez l'ordre bootstrap.min.js et jquery.js, n'incluez pas bootstrap.min.js et bootstrap.js, utilisez un seul.

Charge Jquery Avant Bootstrap js:

<?= $this->Html->script('jquery.js') ?> 
<?= $this->Html->script('bootstrap.min.js') ?>

Source

2017-03-20 02:21:12 gudboisgn

Merci, il fonctionne bien. – Dennis

Bootstrap3 navbar-collapse n'apparaît pas avec cakephp

Répondre

Questions connexes