Sujet Précédent Sujet Suivant

Beug bootstrap ou navigateur

Résolu/Fermé
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 - 15 oct. 2016 à 01:58
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 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>




A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
15 oct. 2016 à 18:16
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.


0
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
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
0
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
15 oct. 2016 à 19:45
ça ouvre une nouvel page quand j'appuie sur le chevrons
0
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
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....
0
Réponse 2 / 2
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
Modifié par jordane45 le 16/10/2016 à 01:16
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...)
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
16 oct. 2016 à 01:18
Tu as un exemple ici :
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel2&stacked=h
0
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
Modifié par thibautB le 16/10/2016 à 01:24
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 ?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016
16 oct. 2016 à 11:50
Le jquery.. c'est bien ce que je t'avais indiqué dans ma première réponse :-)
0
thibautB Messages postés 140 Date d'inscription jeudi 7 mai 2015 Statut Membre Dernière intervention 26 octobre 2016 1
16 oct. 2016 à 01:38
ok Mercis en tout cas :)
0

Discussions similaires

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème replay "MYTF1" visionage vidéos
liliinfo06 -
Sandrine -

1 réponse
Comment trouver l'adresse IP d'un correspondant ?
chanfran -
mildiou123 -

1 réponse
[Navigation Internet] Trace de navigation
Cyril -
megot encore fumant -

10 réponses