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
24 juillet 2018 à 9:13:48

Bonjour,

je comprend pas pourquoi il faut pas mettre une div=row dans le nav contrairement au header et section ? comme dans le site exemple : 

<body>
    <div class="container">
      <nav class="navbar navbar-inverse" role="navigation">   
        <div class="navbar-header">   
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
....
 <header class="row">
        <div class="col-lg-12">
          <h1>Mon amour pour les tigres</h1>
        </div>
      </header>
      <section class="row">
        <div class="col-lg-12">
          <p>
            Je suis passionné par
....



Merci :)

L'internet c'est parti pour 1000 ans !
31 juillet 2018 à 13:45:12

Bonjour à tous,

je suis en train de suivre la 3eme partie du cours sur Bootstrap. Dans la section "Boutons pour attente de processus", j'ai testé le code donné et ça ne marche pas.

<a class="btn btn-primary" data-loading-text="Chargement...">Cliquez !</a>
$(function (){
  $('a').click(function () {
    with($(this)) {
      button('loading');
      setTimeout(function () {
        button('reset');
      }, 4000);
    }
  })
});

J'ai bien les librairies :Bootstrap, jQuery et jQuery UI, toutes en CDN.

Lorsque je clique sur le bouton, j'ai le message d'erreur :

"button is not defined"

Quelqu'un a t-il eu le même problème ? Merci


29 août 2018 à 18:21:18

Salut,

Je n'ai jamais testé ce type de bouton, je n'en avais même pas le souvenir !!

Maintenant, le cour est sur Bootstrap 3, es tu sur de bien charger les bonnes librairies et non celles pour bootstrap 4 ?

30 août 2018 à 10:17:03

Merci de ta réponse florianboy01 ! J'ai passé cet exemple vu qu'il ne voulait pas marcher ^^

Mais sinon, oui je charge les librairies en CDN et il s'agit de la version 3.3.7 de bootstrap.

-
Edité par James Averill 1 septembre 2018 à 11:04:41

9 octobre 2018 à 12:15:33

Bonjour, 

je dois intégrer une maquette (ci-dessous) avec bootstrap. 

J'ai fais mon wireframe et je me demandais comment faire pour la navigation. Doit elle faire partit des grilles ? Qui sont actuellement uniquement sur la "partie grise" avec tous les éléments ? 

Merci beaucoup 

18 octobre 2018 à 15:26:25

Bonjour,

Pour commencer je vous remercie pour ces cours qui sont très intuitifs et m'excuse si je ne suis pas au bonne endroit pour poser ma question.

Je voulais savoir si il y avait un réel intérêt a mettre le point d'interrogation dans cette exemple "ref=creation de lien">mis en rouge : 

<p>Bonjour. Souhaitez-vous visiter <ahref="https://openclassrooms.com"title="Vous ne le regretterez pas !"target="_blank">OpenClassrooms</a> ?</p>

Merci par avance et bonne journée,
18 octobre 2018 à 15:48:58

Bonjour,

Oui il y a un intérêt. "Souhaitez-vous visiter" est une question et une question se termine par un point d'interrogation.

Rien à voir avec Bootstrap, c'est une simple règle de ponctuation.

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
18 octobre 2018 à 16:55:41

D'accord, pardon je ne comprenais pas pourquoi le point d'interrogation était en dehors de la balise <a></a>, question bête désolé pour la pollution.

Il y a environ 20 heures

Bonjour,

Après plusieurs heures de recherches et de tests je viens chercher de l'aide. Je suis en train de faire la 1ere activité du cours prenez en main Bootstrap et je n'arrive pas à supprimer la marge de droite, elle a bien disparue à gauche mais reste toujours à droite. Pouvez-vous m'aider??

code html

<!DOCTYPE html>
<html lang="fr">

  <head>

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-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]-->

    <link rel="stylesheet" type="text/css" href="index.css"/>

  </head>

  <body>
    <div class="container-fluid">
    <header class="row">
    	<div class="jumbotron">
    		<div class="hidden-xs col-md-1">
				<a href="#"><img src="assets/img/maison.png" alt="logo"></a>
			</div>
			<div class="col-md-10">
    	  		<h1 class=text-center>La maison de l'architecte</h1>
			</div>
    </div>  
    </header>
    <nav class="row">
      <div id="left">
        <div class="col-xs-12 col-sm-12 col-md-8"><a href="#"><img src="assets/img/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 src="assets/img/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 src="assets/img/side2.jpg" alt="Notre ambition"></a></div>
      </div>
    </nav>

    <footer class="row">
      <a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
    </footer>
   
    </div>

  </body>

</html>

 CSS

    body {
        font-family: 'Bitter', serif;
        background-color: #eef;
        color: #259;
        padding: 0;
        margin: 0;
      }

      .container-fluid {
        padding: 0;
        margin: 0;
      }

      .jumbotron {
        background-color: inherit;
        padding-bottom: 8%;
      }

      nav img {
        width: 100%;
      }

      #left{
        padding: 0;
      }

      #side1{
        padding: 0;
      }

      #side2{
        padding: 0;
      }

      /* Styles pour les smartphones */
      @media (max-width: 767px) {
      #left, #side1, #side2 {
        padding: 10px 10px 0 10px;
      }

      /* Styles pour les tablettes */
      @media (min-width: 768px) and (max-width: 991px) {
        #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;
          margin-left: 10px;
          margin-right: -15px;
        } 
      }

Merci de votre aide

Il y a environ 19 heures

Salut celf !

Je pense que c'est un bug dû au "wrappage".

Essaye ceci : 

<body>
    <div class="container-fluid">
       <header class=" jumbotron row">
            <div class="hidden-xs col-md-1">
                <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
            </div>
            <div class="col-md-10">
                <h1 class=text-center>La maison de l'architecte</h1>
            </div> 
       </header>

.
.
.

avec après la suite de ton code.

Par contre fait attention, ton code est mal indenté. Tu risques d'avoir des problèmes pour t'y retrouver et en plus, dans le barème, il y a des points pour l'indentation ;)

Bonne chance !

Il y a environ 17 heures

Merci beaucoup James mais ça ne change rien ,toujours cette marge à droite uniquement

Pour l'indentation j'essaie de faire attention à chaque fois mais j'ai tellement refait ce code pour supprimer cette marge que je dois avoir les yeux qui se croisent o_O

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