Beug bootstrap ou navigateur
Résolu
thibautB
Messages postés
148
Statut
Membre
-
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention -
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 :
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>
2 réponses
-
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.
-
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...)-
Tu as un exemple ici :
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_carousel2&stacked=h -
-
-
