Partage

Exercices du cours Bootstrap / Vos questions

4 juin 2018 à 2:28:01

Salut tout le monde, c'est michelD225 j'ai un soucis concernant le cours PRENEZ EN MAIN BOOTSTRAP à l'étape 2 où il est question d'avoir ce rendu (déclarer une seule rangée avec deux éléments qui occupent tout l'espace)

 Mais mon navigateur affiche :

Voici le code css :

body {
  padding-top: 10px;
}
[class*="col-"], footer {
  background-color: lightgreen;
  border: 2px solid black;
  border-radius: 6px;
  line-height: 40px;
  text-align: center;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

html

<!DOCTYPE html>
<html>
  <head>
    <link href="assets/css/bootstrap.css" rel="stylesheet">
    <link href="assets/css/tuto.css" rel="stylesheet">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-4">4 colonnes</div>
        <div class="col-lg-8">8 colonnes</div>
      </div>
    </div>
  </body>
</html>


Merci, attends vos réponses.

11 juin 2018 à 16:08:29

Bonjour ! C'est pourtant juste !

Essaie quand même avec md à la place le lg, c'est peut être ton écran qui est plus petit que 1200px.

-
Edité par Anto2 11 juin 2018 à 16:08:55

13 juin 2018 à 22:58:11

Merci ça passe super bien.
17 juin 2018 à 19:10:47

Bonjour à tous et à toutes,

Si je fais appel à vous aujourd'hui, c'est parce que je me retrouve confronté à un problème que je ne parviens pas à résoudre concernant Bootstrap.

Comment fais t'on pour qu'une image prenne la totalité de l'espace (hauteur et largeur) des colonnes qui la contienne? Cela peut paraître idiot mais je ne parviens pas, malgré mes nombreuses recherches, à comprendre la logique de Bootstrap concernant la taille des images.  

J'ai besoin de cette info afin de parvenir à rendre le travail de l'activité 2 du cours. Afin de vous aider à comprendre mon problème, je vais transmettre ci-dessus l'ébauche de mon code (j'ai encadrer les container afin de mieux me repérer visuellement, d'ailleurs je ne comprends pas non plus pourquoi, si on applique un container à body ce dernier est décaler vers la droite par rapport à ceux du header nav et footer). Je pense avoir saisi l'utilisation des colonnes (dites le moi, si ce n'est pas le cas), mais je ne parvients jamais à obtenir le rendu attendu concernant les images, elles se mettent à l'endroit voulu mais leurs tailles n'est pas la bonne. Je vais vous fournir également une copie du travail attendu(moyens et grands écrans, tablettes, téléphones). 

Je vous serait vraiment reconnaissante de bien vouloir prendre quelques minutes pour m'aider.

<!DOCTYPE html>
<html>
 
  <head>
 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La maison de l'architecte</title>
    <meta name="description" content="Le site de la maison de l'architecture">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
 
    <style type="text/css">
 
      /* Styles de base */
      body {
        font-family: 'Bitter', serif;
        background-color: #eef;
        color: #259;
      }
      nav img {
        width: 100%;
        height: auto;
      }
 
      .btn-lg {
        width: 50px;
        height: 50px;
        border-radius: 25px;
      }
 
      .container{
        text-align: center;
        border: 5px blue inset;
      }
 
      /* Styles pour les smartphones */
      #left, #side1, #side2 {
        padding: 10px 10px 0 10px;
      }
 
      /* Styles pour les tablettes */
      @media (min-width: 768px) {
        #left{
          padding: 0;
        }
        #side1 {
          padding: 10px 5px 0 0;
        }
        #side2 {
          padding: 10px 0 0 5px;
        }
      }
 
      /* Styles pour les écrans moyens et grands */
      @media (min-width: 992px) {
        #side1, #side2 {
          padding: 0 0 10px 10px;
        }
      }
  
    </style>
 
  </head>
 
 
  <body>
 
 
    <header>
 
      <div class="container">
 
        <div class="hidden-xs col-sm-1 col-md-1"><a href="#"><img src="maison.png" alt="logo"></a></div>
        <div class="col-xs-12 col-sm-11 col-md-11"><h1>La maison de l'architecte</h1></div>
 
      </div>
    </header>
 
 
    <nav>
 
      <div class="container">   
  
        <div id="left"><div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img class="photo" src="city1.jpg" alt="Nos réalisations"></a></div></div>
      
        <div id="side1"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side1.jpg" alt="Nos projets"></a></div></div>
    
        <div id="side2"><div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side2.jpg" alt="Notre ambition"></a></div></div>
 
      </div>  
    </nav>
 
 
    <footer>
 
      <div class="container">  
 
        <a class="btn btn-primary btn-lg" href="#"><i class="fa fa-twitter fa-2x"></i></a>
        <a class="btn btn-primary btn-lg" href="#"><i class="fa fa-facebook fa-2x"></i></a>
        <a class="btn btn-primary btn-lg" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
        <a class="btn btn-primary btn-lg" href="#"><i class="fa fa-flickr fa-2x"></i></a>
        <a class="btn btn-primary btn-lg" href="#"><i class="fa fa-spotify fa-2x"></i></a>
 
      </div>
    </footer>
 
 
  </body>
 
</html>



17 juin 2018 à 22:46:23

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01 Transitionl//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<meta http-equiv= "Content−Type" content="text/html; charset=utf-8"/>
		<title>My first HTML document</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<div class="part"></div>
		<div class="part-right"></div>

	</body>
</html>
18 juin 2018 à 4:21:30

salut PurpleWindow si tu veux que sa prenne tout l'espace met un balise

<div class="col-lg-12"></div>

Pour ton information il est mieux de tout mettre dans un balise 

<div class="container"


que de mettre à chaque fois cette balise 

Tu peux aussi mettre la class container-fluid pour que l'élément prenne tout l'espace 

<div class="container-fluid"></div>

Je sais pas si j'ai correctement répondu à ta question mais si tu en a d'autre ou que le problème subsiste informe nous ;)

-
Edité par ValentinoFolio 18 juin 2018 à 4:30:51

18 juin 2018 à 20:48:59

Je voudrais commencer par te dire un grand merci ! C'est vraiment sympa d'avoir pris le temps de me répondre!

Donc à force de recherche j'ai trouvé la cause de mon problème :

erreur dans ce code :

<nav> 

      <div class="container"> 

        <div id="left">
          <div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img class="photo" src="city1.jpg" alt="Nos réalisations"></a>
          </div> 
        </div>
        <div id="side1">
          <div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side1.jpg" alt="Nos projets"></a>
          </div> 
        </div>
        <div id="side2">
          <div class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side2.jpg" alt="Notre ambition"></a>
            </div> 
        </div>

      </div>  

 Pas dans celui-ci :

<nav> 

      <div class="container"> 

        <div id="left" class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img class="photo" src="city1.jpg" alt="Nos réalisations"></a>
        </div>
        <div id="side1" class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side1.jpg" alt="Nos projets"></a>
        </div>
        <div id="side2" class="col-xs-12 col-sm-6 col-md-4"><a href="#"><img class="photo" src="side2.jpg" alt="Notre ambition"></a>
        </div>

      </div>  
     
    </nav>

image correspondante mauvais rendu (marge au-dessous des images de droite) (le vert correspond aux colonnes, le gris et l'encadrement bleu au container):

image correspondante bon rendu :

Et encore une fois merci à toi Valentino, même s'il ne me donnait pas la réponse, ton message m'a permis de voir les choses différemment et de trouver la solution.


-
Edité par PurpleWindow 27 juin 2018 à 18:35:12

19 juin 2018 à 16:32:21

bestmomo a écrit:

@Django71

Le jumbotron c'est parce qu'il y a déjà des marges prévues et une mise en forme du H1. Quant au centrage jette un œil à la classe text-center.



19 juin 2018 à 21:05:31 - Message modéré pour le motif suivant : Toute forme de publicité est interdite


http://dev-muss.fr  >>> à la recherche du savoir :-)
12 juillet 2018 à 18:23:20

bonjour a tout et à toutes, je suis un nouveau dans la forum. j'ai besoin de vos aides pour mieux comprendre la fonctionnalité des cours et exercices. svp aidez moi vivement. merci d'avance

Exercices du cours Bootstrap / Vos questions

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown