[Bootstrap] ne fonctionne pas correctement !

Par Bruce, il y a 8 ans

Les bases HTML/CSS

Salut à tous,

Alors j'ai un gros problème avec bootstrap qui m'exaspère. Certaines fonctionnalités de bootstrap fonctionnent sur mon pc mais pas toutes, comme vous pouvez le voir (sur mes 2 screenshots ci dessous) le système de grid et les buttons fonctionnent parfaitement mais les glyphicons ne s'affichent pas, le menu s'affiche en verticale au lieu d'horizontale et le carousel déconne complètement.

Et c'est pas tout, en fait que 1 fonctionnalités sur 2 fonctionne sur mon bootstrap. J'ai testé sur un autre pc avec le même code et j'ai eu le même problème donc le problème vient surement du code mais je vois aucun problème dans mon code. J'ai fouiller pendant un week-end entier les forums mais rien y fait je ne trouve même pas une personne ayant eu un problème similaire au mien !

Si quelqu'un pourrait m'aider ça serait super :)

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bootstrap exercice</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <link rel="stylesheet" href="css/style.css"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> </head> <body> <div class="container"> <!--- menu -----> <nav class="navbar navbar-default"> <div class="navbar-inner"> <a href="" class="nav navbar-nav">Menu</a> </div> <div> <ul class="nav navbar-nav"> <li><a href="#">Accueil</a></li> <li><a href="#">Prefense</a></li> <li><a href="#">cours en ligne</a></li> <li><a href="#">Boutisue</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav> <!--- menu ---> <div class="row"> <div id="block1" class="col-lg-4"> <h1>Ma Page en Bootstrap</h1> <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsum, ipsa quibusdam illum maxime ab? Ratione libero hic, minus distinctio ipsum. Ex numquam ut maxime quod excepturi delectus, in dolores nisi autem odit at minima, voluptatibus veniam quos omnis nam tenetur quis facere impedit ratione soluta recusandae iste accusantium quaerat. Laboriosam ad similique, totam libero. Officia odio, minus quo corporis sapiente dolorem obcaecati qui, est, sit consequuntur culpa! Autem nesciunt molestias cum velit nulla sunt temporibus. Voluptas culpa hic, laboriosam commodi, sint provident quam dignissimos qui, molestiae quis consequatur ea suscipit maiores, doloremque aspernatur fugit. Non dolorum, ipsum eos perspiciatis.</p> </div> <div id="block2" class="col-lg-4"> <h1>Ma Page en Bootstrap</h1> <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsum, ipsa quibusdam illum maxime ab? Ratione libero hic, minus distinctio ipsum. Ex numquam ut maxime quod excepturi delectus, in dolores nisi autem odit at minima, voluptatibus veniam quos omnis nam tenetur quis facere impedit ratione soluta recusandae iste accusantium quaerat. Laboriosam ad similique, totam libero. Officia odio, minus quo corporis sapiente dolorem obcaecati qui, est, sit consequuntur culpa! Autem nesciunt molestias cum velit nulla sunt temporibus. Voluptas culpa hic, laboriosam commodi, sint provident quam dignissimos qui, molestiae quis consequatur ea suscipit maiores, doloremque aspernatur fugit. Non dolorum, ipsum eos perspiciatis.</p> </div> <div id="block3" class="col-lg-4"> <h1>Ma Page en Bootstrap</h1> <p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsum, ipsa quibusdam illum maxime ab? Ratione libero hic, minus distinctio ipsum. Ex numquam ut maxime quod excepturi delectus, in dolores nisi autem odit at minima, voluptatibus veniam quos omnis nam tenetur quis facere impedit ratione soluta recusandae iste accusantium quaerat. Laboriosam ad similique, totam libero. Officia odio, minus quo corporis sapiente dolorem obcaecati qui, est, sit consequuntur culpa! Autem nesciunt molestias cum velit nulla sunt temporibus. Voluptas culpa hic, laboriosam commodi, sint provident quam dignissimos qui, molestiae quis consequatur ea suscipit maiores, doloremque aspernatur fugit. Non dolorum, ipsum eos perspiciatis.</p> </div> </div> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <div class="dropdown"> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Fruits</button> <ul class="dropdown-menu"> <li>pomme</li> <li>poire</li> <li>orange</li> </ul> </div> <!---pop-up---> <a href="" class="btn btn-info btn-lg" data-toggle="modal" data-target="#popup">Activer pop-up</a> <div class="modal fade" id="popup"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4>Produit non disponible</h4> <button type="button" class="close" data-dismiss="modal">x</button> </div> <div class="modal-body"> <p>produit non disponible, désolé pour le désagrément</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> <!---pop-up---> <span class="glyphicon glyphicon-print"></span> <span class="glyphicon glyphicon-cutlery"></span> </div> <!--carousel--> <div id="slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slide" dat-slide-too="0" class="active"></li> <li data-target="#slide" dat-slide-too="1"></li> <li data-target="#slide" dat-slide-too="2"></li> <li data-target="#slide" dat-slide-too="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="img/images2.jpg"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/images2.jpg"> <div class="carousel-caption"> </div> </div> <div class="item"> <img src="img/images2.jpg"> <div class="carousel-caption"> </div> </div> </div> <a href="#slide" class="left carousel-control" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> </div> <!--carousel--> </body> </html>

lien screenshot du rendu :
https://imgur.com/a/sY8Vo (haut de page)
https://imgur.com/a/7yW2e (bas de page)

2 réponses

Lartak, il y a 8 ans

Bonjour.

les glyphicons ne s'affichent pas

Si tu regardes bien dans le css de bootstrap, il n'y a aucune classe concernant les glyphicons, donc si tu veux les utiliser, il te faut faire le lien avec le css pour les glyphicons.

le menu s'affiche en verticale au lieu d'horizontale

Dans le css de bootstrap, il n'y a ni la classe navbar-default, ni la classe navbar-inner, il est donc normal que si tu ne respectes pas un minimum les classes nécessaires, que ça ne fonctionne pas correctement.

le carousel déconne complètement

Il est largement conseillé de charger les javascripts vers la fin de la page html, soit juste avant la fermeture de la balise body, si tu regardes bien dans le Getting started, c'est d'ailleurs ce qu'ils font dans le Starter template.
Je te conseille donc vivement d'en suivre la procédure et tu devrais peut-être initialiser le carousel au niveau du javascript pour qu'il fonctionne, car je ne crois pas qu'il soit automatiquement activé, même sur les markers html.

Liek, il y a 8 ans

C'est toi qui fonctionne pas correctement, pas bootstrap !

"J'ai fouiller pendant un week-end entier les forums mais rien y fait je ne trouve même pas une personne ayant eu un problème similaire au mien !"

Si tu avais lu la doc correctement il t'aurait fallut 5min pour résoudre ton problème. Si personne n'a de problèmes similaires au tiens sur un framework utilisé par des millions de développeurs tous les jours, en général il faut se poser des questions.

Pour les glyphicons, c'est un peu bêbêtes, parceque aux dernières nouvelles y'a pas de glyphicons dans bootstrap 4 (uniquement dans bootstrap 3). Tu dois utiliser une librairie tierce comme material icons ou font awesome.

Et comme à dit mon prédécesseur, les scripts ça se charge pas dans le head, mais juste avant la fermeture de la balise body, exception faite de jquery ou d'autres libraires dans certain cas, ou sinon tu ajoutes l'attribut "async" dessus, ça evite que la page attende le chargement des scripts avant de s'afficher, c'est une bonne pratique bien connut.

Le carousel déconne pas, c'est toi. Lis bien la doc. Je remarque également une erreur conne, c'est que t'utilises une version ultra obsoléte de jquery, la 1.12, autant te dire, que c'est peut-être un peu normal que ça fonctionne pas mon ami.

PS : Désolé, je suis vénére, j'ai passé une mauvaise journée.