Signaler

Beug bootstrap ou navigateur [Résolu]

Posez votre question thibautB 144Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - Dernière réponse le 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 
Utile
+0
moins plus
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 144Messages 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
Répondre
thibautB 144Messages 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
Répondre
thibautB 144Messages 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
Répondre
jordane45 15400Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 3 décembre 2016 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....
Répondre
Ajouter un commentaire
Utile
+0
moins plus
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 15400Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 3 décembre 2016 Dernière intervention - 16 oct. 2016 à 01:18
Tu as un exemple ici :
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel2&stacked=h
Répondre
thibautB 144Messages 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 ?
Répondre
jordane45 15400Messages postés mercredi 22 octobre 2003Date d'inscription ModérateurStatut 3 décembre 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 :-)
Répondre
thibautB 144Messages postés jeudi 7 mai 2015Date d'inscription 26 octobre 2016 Dernière intervention - 16 oct. 2016 à 01:38
ok Mercis en tout cas :)
Répondre
Ajouter un commentaire

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !