Beug bootstrap ou navigateur [Résolu/Fermé]

thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 15 oct. 2016 à 01:58 - Dernière réponse : jordane45 19319 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 décembre 2017 Dernière intervention
- 16 oct. 2016 à 11:50
Bonsoir,
Je travaille en ce moment sur le squelette de mon site avec bootstrap et quand j'éxècute mon fichier php la barre pou défilé de bas en haut à droite disparait et tous mon code beug et je ne sais pas pourquoi (Ps: je suis sur firefox).
Voici mon code :

<!DOCTYPE html>
<html lang="fr">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--concerne IE-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!--concerne portable-->

<title> Resline </title>

<link href="bootstrap3/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap3/css/personalisation_aprecus.css" rel="stylesheet">

</head>

<body>

<!-- Menu -->

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header"> <!-- titre sur le Menu-->
<a class="navbar-brand" href="#" rel="nofollow noopener noreferrer" target="_blank"> Resline </a>
</div>
<ul class="nav navbar-nav"> <!--met sur une ligne-->
<li class="active"> <a href="#" rel="nofollow noopener noreferrer" target="_blank"> Restaurant </a> </li>
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank"> Service </a></li>
<li> <a href="#" rel="nofollow noopener noreferrer" target="_blank"> Pour en savoir plus </a></li>
</ul>

<form class="navbar-form navbar-right inline-form"> <!--recherche-->

<div class="form-group">

<input type="search" class="input-sm form-control" placeholder="Recherche">

<button type="submit" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-eye-open"></span> Chercher</button>

</div>

</form>
</div>

</nav>

<!-- sidebard -->

<div class="container">
<div class="row">
<div class="col-lg-3" >
<ul class="list-group">
<li class="list-group-item"> Accueil </li>
<li class="list-group-item"> Article </li>
<li class="list-group-item"> Commentaire </li>
</ul>
</div>

<!-- Slider -->

<div class="col-lg-9">
<div id="carousel" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">

<div class="item active"> <img alt="" src="image/Restaurant_deux.jpg"></div>

<div class="item"> <img alt="" src="image/Restaurant_deux.jpg"></div>

<div class="item"> <img alt="" src="image/Restaurant_3.jpg"></div>

</div>

<a class="left carousel-control" href="#carousel" rel="nofollow noopener noreferrer" target="_blank" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

</a>

<a class="right carousel-control" href="#carousel" rel="nofollow noopener noreferrer" target="_blank" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

</a>

</div>

</div>
</div>
</div>

<!-- Article -->

<!-- footer -->

<script src="bootstrap3/js/bootstrap.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>
<script>
$(function () {
$('.carousel').carousel({ interval: 2000 });
$('#first').click(function() { $('.carousel').carousel(0); });
$('#previous').click(function() { $('.carousel').carousel('prev'); });
$('#pause').click(function() { $('.carousel').carousel('pause'); });
$('#play').click(function() { $('.carousel').carousel('cycle'); });
$('#next').click(function() { $('.carousel').carousel('next'); });
$('#last').click(function() { $('.carousel').carousel(2); });
});
</script>

</body>
</html>




Afficher la suite 

10 réponses

jordane45 19319 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 décembre 2017 Dernière intervention - 15 oct. 2016 à 18:16
0
Utile
4
Bonjour,

Dans ton code je ne vois pas l'import de JQUERY

De plus, tu ne dois utiliser que l'un des JS suivants :
<script src="bootstrap3/js/bootstrap.js"></script>
<script src="bootstrap3/js/bootstrap.min.js"></script>

Soit le min (qui est compressé) soit l'autre... pas les deux.


thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 15 oct. 2016 à 19:42
ok j'ai garder le bootstrap .js mais le carousel ne fonctionne toujours pas, je pense qu c'est le code
thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 15 oct. 2016 à 19:45
ça ouvre une nouvel page quand j'appuie sur le chevrons
thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 15 oct. 2016 à 23:11
ah non ça ne fait rien je vais essayer de chercher par moi même mais si tu trouve met moi sur la piste
jordane45 19319 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 décembre 2017 Dernière intervention - 16 oct. 2016 à 01:02
Je viens de voir une autre chose qui me chiffonne...
Je vois dans ton code que tu fais appel à des éléments dont les ID sont first, previous, pause..etc....
Hors.. dans le code HTML je ne vois aucun de ces éléments....
thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - Modifié par jordane45 le 16/10/2016 à 01:16
0
Utile
4
oui et j'ai changé ce qui donne :
En html :
<div class="row marge-bas">

                <div class="col-lg-12">
                    <div class="bs-example">
            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
                <!-- Indicateur -->
                <ol class="carousel-indicators">
                    <li class="slide_1 active"></li>
                    <li class="slide_2"></li>
                    <li class="slide_3"></li>
                </ol>

                <!-- Image pour le slider -->
                <div class="carousel-inner">
                    <div class="active item">
                        <img src="image/Restaurant_deux.jpg" alt="...">
                        <div class="carousel-caption">
                            <h3>Caption Text</h3>
                        </div>
                    </div>
                    <div class="item">
                        <img src="image/Restaurant_3.jpg" alt="...">
                        <div class="carousel-caption">
                            <h3>Caption Text</h3>
                        </div>
                    </div>
                    <div class="item">
                        <img src="image/Restaurant_deux.jpg" alt="...">
                        <div class="carousel-caption">
                            <h3>Caption Text</h3>
                        </div>
                    </div>
                </div>

            </div>

            <!-- Controle pour ce diriger sur le slider -->
                        <a class="carousel-control left">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                        </a>
                        <a class="carousel-control right">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </a>
            </div>
            </div>
            </div>


En js

    $(document).ready(function(){
        // Activate carousel
        $("#myCarousel").carousel();

        // Enable carousel control
        $(".left").click(function(){
            $("#myCarousel").carousel('prev');
        });
        $(".right").click(function(){
            $("#myCarousel").carousel('next');
        });

        // Enable carousel indicators
        $(".slide_1").click(function(){
            $("#myCarousel").carousel(0);
        });
        $(".slide_2").click(function(){
            $("#myCarousel").carousel(1);
        });
        $(".slide_3").click(function(){
            $("#myCarousel").carousel(2);
        });
    });


Mais ça ne marche toujours pas :(


EDIT : Ajout du LANGAGE dans les balises de code (histoire qu'il y ait la couleur...)
jordane45 19319 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 décembre 2017 Dernière intervention - 16 oct. 2016 à 01:18
thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 16 oct. 2016 à 01:20
ok il me manquer le fichier jquery qui est <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>mais tu sais comment on peut l'avoir en local ?
jordane45 19319 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 18 décembre 2017 Dernière intervention > thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 16 oct. 2016 à 11:50
Le jquery.. c'est bien ce que je t'avais indiqué dans ma première réponse :-)
thibautB 144 Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 16 oct. 2016 à 01:38
ok Mercis en tout cas :)