[Résolu] Bootstrap et responsive design par Meroll - page 1

Bonjour,

Je suis en train de me remémorer bootstrap, en mettant en place un design simple one page. Cependant, mon responsive design ne réponds pas : en effet, le contenu se recroqueville sur lui même (et donc l'écrire devient très petite) au lieu de rendre quelque chose de responsive et de correct.

Voici mon code HTML

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
	<nav class="navbar navbar-default">
	  <div class="container-fluid">

	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <ul>
		      <li>
		     	 <a class="navbar-brand" id="logo" href="#">LOGO</a>
		      </li>
	      </ul>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      
	      <ul class="nav navbar-nav navbar-right">
	   			  <li><a href="#">Lorem</a></li>
			      <li><a href="#">Ipsum</a></li>
			      <li><a href="#">Dolor sit amet</a></li>
			      <li><a href="#">Consectetuer adipiscing</a></li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
</div>

<div class="container">
	<div class="row top">
		<h1 class="heading-row_top"> Titre de section </h1>
		<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 top-left">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et <b>magnis dis parturient montes</b>, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.<br /><br />
			Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
		</div>

		<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 top-right">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.</p>
		</div>
	</div>
	</div>

<div class="row content">
	<div class="container">
	<div class="heading"><h1>Titre de section</h1></div>
	
	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 article">
		<h2> Titre de l'article</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 article">
		<h2>Titre d'article vraiment très très très long</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 article">
		<h2> Titre de l'article</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
	</div>

	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-lg-offset-2 article">
		<h2> Titre de l'article</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
	</div>
	<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-lg-offset-1 article">
		<h2> Titre de l'article</h2>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
	</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

En gros, il ya un dezoom de plus en plus important lorsque l'écran rétrécit. De ce fait, on ne vois pas le texte et le responsive ne réponds pas.

Merci d'avance

-
Edité par Meroll 26 juillet 2017 à 17:30:14

Meroll

26 juillet 2017 à 17:29:57

Tom Martin

26 juillet 2017 à 21:42:45

Salut, il te manque une information pour faire fonctionner bootstrap entre tes deux balise <head> et </head> à savoir :

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<!--[if gt IE 8]><!-->
<link href="css/bootstrap.min.css" rel="stylesheet">

Bon la deuxième n'est pas nécessaire vue que tu fais appel à un CDN mais je le met quand même
Cordialement Thomas.

-
Edité par Tom Martin 26 juillet 2017 à 21:44:06

26 juillet 2017 à 21:52:10

Tom Martin a écrit:

Salut, il te manque une information pour faire fonctionner bootstrap entre tes deux balise <head> et </head> à savoir :
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link href="css/bootstrap.min.css" rel="stylesheet">
Bon la deuxième n'est pas nécessaire vue que tu fais appel à un CDN mais je le met quand même
Cordialement Thomas.

-
Edité par Tom Martin il y a 7 minutes

Je te remercie INFINIMENT, j'étais bloqué sur ce problème idiot alors que tout me semblais bon.

Merci encore.

27 juillet 2017 à 19:46:05

Mais je t'en pris le forum est là pour ça bonne continuation.

Bootstrap et responsive design

Bootstrap et responsive design

Supprimer

Modérer

Signaler le message aux modérateurs