Partage
  • Partager sur Facebook
  • Partager sur Twitter

[Bootstrap] ne fonctionne pas correctement !

Sujet résolu
8 décembre 2017 à 19:32:43

Salut à tous,
Alors j'ai un gros problème avec bootstrap qui m'exaspère :colere2: 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>

-
Edité par tropopo1 8 décembre 2017 à 19:37:32

  • Partager sur Facebook
  • Partager sur Twitter
8 décembre 2017 à 20:21:18

Bonjour,

tu appelles les fichiers de Bootstrap 4. Il y a eu pas mal de changements, notamment la disparition des glyphicons.

Donc soit tu changes les appels vers la 3.3.7, soit tu lis la doc pour passer à la v4 sereinement (mais change quand même les appels, ça n'est plus en alpha depuis quelques temps).

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

8 décembre 2017 à 21:32:47

Merci beaucoup mon problème est résolu :)
  • Partager sur Facebook
  • Partager sur Twitter
8 décembre 2017 à 22:16:40

Par curiosité, quelle solution as-tu choisie ?
  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)

8 janvier 2018 à 13:29:40

je suis resté sur 3.3.7
  • Partager sur Facebook
  • Partager sur Twitter
27 février 2022 à 8:07:43

Bonjour moi aussi j'ai un problème similaire

Mon ordinateur ne reconnaît même pas les propriétés de bootstrap 

C'est à dire j'applique les propriétés de bootstrap dans le code HTML mais rien ne s'affiche sur la page

  • Partager sur Facebook
  • Partager sur Twitter
27 février 2022 à 14:55:13

Bonjour,

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter

Pas d'aide concernant le code par MP, le forum est là pour ça :)