Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercices du cours Bootstrap / Vos questions

    1 février 2019 à 15:29:22

    Bonjour, 

    Est ce que le cours Bootstrap va être mis à jour pour la version 4.x.x ?

    Ou bien est ce que un nouveau cours va apparaitre car bootstrap à bien évolué et fait appel popper.js et a dit adieu au glyficons donc je pense qu'il y a eu beaucoup de changement.

    • Partager sur Facebook
    • Partager sur Twitter
      7 février 2019 à 12:59:40

      Bonjour, 

      Je suis entrain de suivre le cours "Prenez en main bootstrap" et je m'entraine afin de bien le comprendre. 

      J'essaie de créer un mini site avec des arrières plans pour avoir un site responsive.

      J'ai plusieurs problèmes : 

      1 - La taille de la police de s'adapte pas ? 

      2- Est-ce que je suis sur le bon chemin ? 

      Le code html, ci-dessous et le code css après : (Merci pour vos réponses) Jonathan 

      <!doctype html>
      <html>
      <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" href="css/styles.css">
      <link rel="stylesheet" href="css/bootstrap.css">
      <title>Document sans nom</title>
      </head>
      
      <body>
          
      <div class="container-fluid">
          
          <!-- SECTION PLAN01 -->
          
          <div class="row">
              <div id="planun" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <div class="col-lg-12">
                      <h1 class="text-center text">JE TEST AUTRE CHOSE</h1>
                      <h1>JE FAIS AUTRE CHOSE</h1>
                      <h1>JE FAIS AUTRE CHOSE</h1>
                  </div>
              </div>
          </div>
          
          <!-- SECTION PLAN01 -->
          
          <div class="row">
              <div id="plandeux" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
                  <h1>JE TEST JE TEST</h1>
              </div>
          </div>
      </div>    
      </body>
      </html>
      
      @charset "UTF-8";
      /* CSS Document */
      
      #planun
      {
          background-image:url("../images/plan01.jpg");
          background-repeat: no-repeat;
          background-size: 100%;
          color: blue;
      
      
      }
      #plandeux
      {
          background-image:url("../images/plan02.jpg");
          background-repeat: no-repeat;
          background-size: 100%;
      }
      
      
      
      
      
      
      
      @media (max-width: 768px) {
          #planun
          {
              color: red;
          }
          
         
      @media (max-width: 992px) {
        
      }
      @media (max-width: 1200px) {
        
      }  
      
      
      
      
      
      
      



      • Partager sur Facebook
      • Partager sur Twitter
        8 février 2019 à 17:00:42

        Radojphotography a écrit:

        Bonjour, 

        Je suis entrain de suivre le cours "Prenez en main bootstrap" et je m'entraine afin de bien le comprendre. 

        J'essaie de créer un mini site avec des arrières plans pour avoir un site responsive.

        C'est bon, j'ai trouvé. 





        • Partager sur Facebook
        • Partager sur Twitter
          11 février 2019 à 12:01:18

          Bonjour à tous, 

          J'ai une question, j'avais fait toute ma mise en forme sur bootstrap sur le html dabord puis sur le css en commencant par le large device  tout etait ok puis modifier mes codes css tabette et smaartphoone et ca a tt bougé sur le large device

          jai utilisé les médias queries. Je vous joins un bout ci dessous. 

          comment faites vous ?

          merci 

          <!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 */
              
             /* Styles de base */
          
             body {
               font-family: 'Bitter', serif;
               background-color: #eef;
               background-color: #C4D7ED;
             }
          
             nav img {
               width: 100%;
             }
           
          
          
          
          
             
               /* Styles pour les smartphones */
             
               .aa
                {
                  margin-top: 30px;
                  margin-bottom: 30px;
                }
                .aab h1
                {
                  margin-left: 50px;
                  font-size: 20pt;
                }
          
                          .footer
                 {
                   margin-top: 30px;
                   margin-bottom: 30px;
                 
                    
                 }
               
                       .btn-circle
                 {
                   width: 40px;
                   height: 40px;
                   padding: 10px 16px;
                   font-size: 16px;
                   line-height: 1.32;
                   border-radius: 23px;
                 }
                 #left
                 {
                
                 }
                 .baa{
                  padding: 0;
                  margin: 0;
                 }
                }
          
          
          
          
          
                /* Styles pour les tablettes */
                @media (min-width: 768px) {
              .aa
                {
                  margin-top: 30px;
                  margin-bottom: 30px;
                }
          
          
                          .footer
                 {
                   margin-top: 20px;
                   margin-bottom: 20px;
                   position: flex;
                   justify-content: center;
                   align-content: center;
                    
                 }
               
                       .btn-circle
                 {
                   width: 50px;
                   height: 50px;
                   padding: 10px 16px;
                   font-size: 18px;
                   line-height: 1.33;
                   border-radius: 25px;
                 }
                
                .bc
                {
             
                 margin:0px;
                 padding: 0px;
                }
                .baa
                {
                  padding: 0px;
                  margin:0px;
                  
                }
                #left
                {
                  padding: 0px;
                  margin:0px;
                }
                .bba
                {
                 margin:0px;
                 padding-right: 0px;
                  padding-left: 10px;
                  padding-bottom: 4px;
                  padding-top: 10px;
                    
                }
                #side1
                {
                  padding: 0px;
                  margin:0px;
                }
          
                #side2
                {
                  padding-right: 0px;
                  padding-bottom: 0px;
                  margin-top:0px;
                }
                
                }
          
          
          
          
          
          
          
          
                /* Styles pour les écrans moyens et grands */
                @media (min-width: 992px) {
                .aa
                {
                  margin-top: 30px;
                  margin-bottom: 30px;
                }
                .aab h1
                {
                  font-size: 35pt;
                }
                .baa
                {
                  padding: 0px;
                }
                #left
                {
                  
                  padding-top: 10px;
                  padding-left: 0px;
                  margin: 0;
          
                }
                .ba
                {
                 
              
               padding: 0px;
          
               
                }
                .bba
                {
                 
              padding-top: 0px;
              padding-left: 0px;
              padding-right: 0px;
              padding-bottom: 15px;
                
                }
                
                          .footer
                 {
                   margin-top: 20px;
                   margin-bottom: 20px;
                   position: flex;
                   justify-content: center;
                   align-content: center;
                    
                 }
               
                       .btn-circle
                 {
                   width: 50px;
                   height: 50px;
                   padding: 10px 16px;
                   font-size: 18px;
                   line-height: 1.33;
                   border-radius: 25px;
                 }
                }

          et mon html

           </head>
          
            <body>
          
           
                <div class="container a">
                             
                 <header>
                   <div class="row aa">    
                       <div class="hidden-xs col-sm-3 col-md-4 col-lg-4 aaa">
          
                          <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
          
                       </div>
          
          
                       <div class="text-center col-xs-12 col-sm-9 col-md-8 col-lg-8 aab">
          
                           <h1>La maison de l'architecte</h1>  
          
                        </div>  
                    </div>                
          
                  </header>
                  
                  
               </div>   
            
              <div class="container-fluid b">
                 <nav>
            
                   <div class="row ba">    
                       
          
                              <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 baa">
                                <div id="left">
                                    <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations" ></a>
                                </div>
                              </div>
          
                       
                       
                              <div class="row bb "> 
                                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 bba"> 
                                  
                                      <div id="side1">
                                        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                                      </div>
          
                                      <div class="hidden-sm 
                                      "  id="side2">
                                                <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                                      </div>
                                 </div>          
                              
                                      <div class="row hidden-xs col-sm-6 hidden-md hidden-lg bc">    
                                            
                                                <div  id="side2">
                                                <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                                                </div>
                                           
          
                                      </div>  
                              </div>   
                          
                    </div>
                  
                  </nav>
               </div>   
          
             <footer>
                         <div class="row footer">
                             
                          <div class="   col-xs-10 col-xs-offset-2 col-sm-offset-4 col-sm-8 col-md-offset-5 col-md-7 col-lg-offset-5 col-lg-7">  
                      
                          <a class="btn btn-primary btn-circle" href="#"><i class="fa fa-twitter fa-2x"></i></a>
                          <a class="btn btn-primary btn-circle" href="#"><i class="fa fa-facebook fa-2x"></i></a>
                          <a class="btn btn-primary btn-circle" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                          <a class="btn btn-primary btn-circle" href="#"><i class="fa fa-flickr fa-2x"></i></a>
                          <a class="btn btn-primary btn-circle" href="#"><i class="fa fa-spotify fa-2x"></i></a>
                            </div>
          
                        </div>  
             </footer>
            </body>
          
          </html>




          -
          Edité par Lavachequiboude 11 février 2019 à 18:38:12

          • Partager sur Facebook
          • Partager sur Twitter
            12 février 2019 à 17:04:35

            Salut,

            Je crois qu’il te manque le media-queries du smartphone ?!.

            il est indiqué « style pour smartphone », mais pas de media queries ?! 

            Mais je ne suis pas sur.

            Radoj. 

            • Partager sur Facebook
            • Partager sur Twitter
              12 février 2019 à 18:35:10

              Hi 

              merci de ta réponse,

              alors effectivement mais dans le cours c'est bien marqué qu'il est en automatique et que l' on pas besoin de le définir. 

              Mais quand j'ai modifié sur les formats tablette ça a aussi modifié sur large ...

              • Partager sur Facebook
              • Partager sur Twitter
                25 février 2019 à 22:23:00

                Bonsoir, Je suis entrain d 'apprendre le html 5 et le CSS3 j'ai envoyé une activité bien fait mais l'un des correcteur ma donner une note pas juste. et il a tout gâcher je travail depuis 15 jours pour obtenir cette certificat. J'attent la réponse du mentor merci d'avance.
                • Partager sur Facebook
                • Partager sur Twitter
                  27 février 2019 à 1:59:36

                  bonsoir SVP lorsque je copie la source  d'un menu a partir de bootstapCDN je n'arrive pas a voir les sous-menu

                  pourrai-je avoir une solution?

                  • Partager sur Facebook
                  • Partager sur Twitter
                    2 mars 2019 à 18:47:08

                    comment met on sublime text en noir
                    • Partager sur Facebook
                    • Partager sur Twitter
                      3 mars 2019 à 19:19:58

                      Bonjour,

                      je voudrais savoir un petit truc svp .. si quelqu'un d'O.C peut me répondre ce serai sympa ..

                      Pourquoi doit on en 02/2019 encore bosser sur la version 3 de Bootstrap ? La version 4 amène beaucoup de changements assez important et beaucoup plus pratique..

                      On dirait que le cours n'est pas à jour simplement !? On peut dire que oui ou non... Peut être que j'ai tord mais il serait dommage de passer encore pour le petit peuple gaulois toujours à la bourre !?

                      Je vois qu'à l'international , ils bossent avec B4 de plus il est tout de même plus intéressant d'apprendre la dernière version plutôt que de se coltiner tout une série de Bootstrap...  :(

                      Je veux dire que même si c'est recherché au niveau professionnel , ca reste un parti prit malgré tout !!

                      On pourrait tout à fait avoir une stratégie opposée ...

                      Personnellement je trouve ça inintéressant, et même si je me force à passer par Bootstrap parce que c'est quand même important de connaitre mais pourquoi ce taper les version 3.2 puis 3.3??

                      • Partager sur Facebook
                      • Partager sur Twitter

                      Web Developer apprenant ..  Le Savoir est un Tout! !  En faire son Expérience est le chemin vers la Connaissance ...

                      #believeInYourself

                      JoWd   |   still coding .

                        4 mars 2019 à 18:30:23

                        Coucou, comme je le dis juste avant (le 1er février 2019), ce cours n'est pas à jour ...

                        Cela le rend presque obsolète quand on voit tous les changements apportés sur la version 4.

                        En effet il serait peut être temps pour OpenClassRoom de mettre à jour ce cours, la concurrence l'a fait ;)

                        • Partager sur Facebook
                        • Partager sur Twitter
                          5 mars 2019 à 21:10:04

                          bonjour comment changer de code couleur sur sublime text sur mac
                          • Partager sur Facebook
                          • Partager sur Twitter
                            14 mars 2019 à 11:57:46

                            bonjour j'aimerais connaitre votre point de vue sur l'utilisation des templetes dans la création de site web. 

                            • Partager sur Facebook
                            • Partager sur Twitter
                              25 mars 2019 à 17:53:57

                              Bonjour,

                              julienMONNIN1 : Sur Mac, je ne sais pas mais sur Linux, menu Preferences => Color Scheme... mais tu peux aussi changer le thème menu Preferences => Theme ...

                              JulienOrjollet , Lvdevcom  : Pour Bootstrap 4, je sais que l'auteur du cour Bootstrap 3  a mis à jour le cour vers la version 4 mais aucune idée de la raison pour laquelle ce cour n'est pas accessible ici.

                              Vous pouvez toujours trouver en recherchant sur google "Lavarel tuto bootstrap" ....

                              • Partager sur Facebook
                              • Partager sur Twitter
                                2 avril 2019 à 1:48:18

                                salut, j'ai héberger un site web; j'ai utilisé bootstrap4  pour le design, la taille des textes du site et le rendu est très bon dans certain navigateur comme opéra mini...mais pas  jolie dans certains navigateur et les textes sont très petit..sur le téléphone

                                Merci d'avance pour votre réponses.

                                • Partager sur Facebook
                                • Partager sur Twitter
                                  5 avril 2019 à 15:46:23

                                  Bonjour,

                                  L'adresse du site ?

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    6 avril 2019 à 8:31:35

                                    Bonjour à tous ! :)

                                    J'ai une question, sur l’exercice bootstrap

                                    J’ai un problème avec le Titre, qui sur tablette et smartphone passe en dessous du logo, et j’ai également un problème avec la 3ème photo qui sort de la row sur ordinateur

                                    Pouvez vous m’aider stp ?

                                    Voici mon code

                                    <!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%;
                                          }
                                          [class*="col"] { margin-bottom: 20px; 
                                            padding-right:0;
                                          }
                                          .jumbotron {
                                            padding-left: 50px;
                                          }
                                          /* Styles pour les smartphones */
                                          #left, #side1, #side2 {
                                            padding: 10px 10px 0 10px;
                                          }
                                          footer {
                                            text-align: center;
                                          }
                                          .btn
                                            {
                                              width: 50px;
                                              height: 50px;
                                              border-radius: 25px;
                                              margin-top: 30px;
                                              margin-bottom: 15px;
                                              margin-right: 2px;
                                            }
                                          /* Styles pour les tablettes */
                                          @media (min-width: 768px) {
                                            #left{
                                              padding: 0;
                                            } 
                                          }
                                          /* Styles pour les écrans moyens et grands */
                                          @media (min-width: 992px) {
                                            #side1, #side2 {
                                              padding: 0 0 10px 10px;
                                            } 
                                          }
                                        </style>
                                      </head>
                                      <body>
                                        <div class="container-fluide">
                                      <header>
                                          <div class="jumbotron" style="background-color: #eef;">
                                            <div class ="row">
                                              <div class ="col-lg-2 col-sm1 hidden-xs">
                                                <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
                                          </div>
                                          <div class="col-lg-10 col-sm-11 col-xs-12">
                                            <h1 class="text-center">La maison de l'architecte</h1>       
                                          </div> 
                                        </div>
                                      </div>
                                      </header>
                                        <nav>
                                          <div class ="row">
                                           <div id="left">
                                              <div class="col-lg-8 col-sm-12 col-xs-12">
                                                <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
                                              </div>
                                          </div>
                                          <div class="row">
                                            <div id="side1">
                                              <div class="col-lg-4 col-sm-6 col-xs-12">
                                              <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                                              </div>
                                            </div>
                                          <div id="side2">
                                            <div class="col-lg-4 col-sm-6 col-xs-12">
                                            <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> <!--CONTAINER-->
                                      </body>
                                    </html>
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      6 avril 2019 à 14:58:25

                                      Bonjour,

                                      Pour tes problèmes tu peut utiliser la technique du kobayashi maru.

                                      Pour ton header vois le plus comme ca, le jumbotron est le header, et ce sont les offset qui vont faire le reste. 

                                      <header class="page-header row jumbotron">
                                           <div class=" col-lg-12">
                                            <div class="hidden-xs col-sm-1 col-md-1 col-lg-1">
                                            <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
                                            </div>
                                            <div class="col-xs-12 col-sm-offset-2 col-sm-7 col-md-offset-1 col-md-9 col-lg-offset-1 col-lg-9">
                                            <h1 class="h1-xs">La maison de l'architecte</h1>    
                                           </div>  
                                          </div>
                                      </header>

                                      pour ton image si tu examine la class "col" tu aperçois quelle a un margin-bottom de 20px.

                                      donc tu vire dans ton style tout çà

                                      [class*="col"] { margin-bottom: 20px;
                                              padding-right:0;
                                            }
                                            .jumbotron {
                                              padding-left: 50px;
                                            }

                                      et tu change le pading de ta règle @media

                                      #side1, #side2 {
                                                padding: 0 0 0 10px;
                                              }

                                      et à mon avis ca devrait le faire.

                                      • Partager sur Facebook
                                      • Partager sur Twitter

                                      Compos sui.

                                        8 avril 2019 à 12:05:36

                                        Super merci beaucoup pour ton aide :)
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          27 avril 2019 à 9:59:31

                                          Bonjour, je viens de finir l'exercice "Réaliser une page web simple"concernant l'activité "prenez en main boostrap" que j'ai réussi. Il y a un correcteur m'a laissé un message ou il me donne les erreurs qu'il a vu et me dit voir la correction type. J'ai cherché mais je ne trouve pas de correction type alors je voudrai savoir comment accéder à celle-ci car souhaitant progresser j'aimerai savoir ou je pourrai la consulter. Merci d'avance et bon week end.
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            29 avril 2019 à 8:34:48

                                            Bonjour @larpipixx,

                                            il y a toujours le corrigé type dans la page de correction une fois que tu as rendu ton devoir pour t'aider à corriger les exercices des autres. Une fois que tu as ta note elle n'est plus accessible. Je pense que c'est pour éviter les fuites car certain arrivent à rendre un copier coller de la correction. Pense à faire une copie de la correction et des exercices de tes pairs qui son intéressant. 

                                            Bonne continuation

                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                            A new life is starting!
                                              1 juin 2019 à 20:03:24

                                              merci ! à tester !
                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              http://dev-muss.fr  >>> à la recherche du savoir :-)
                                                2 juillet 2019 à 18:56:28

                                                Bonsoir, l'exercice 2 de bootstrap est il toujours valide en sachant qu'il fonctionne avec bootstrap 3.3.7 alors qu'avec la 4.3.1 ça ne fonctionne pas ( le css des .col n'est plus le même)

                                                J'avoue que je galère sur la mise en page des trois images en version .col-md. (.col-sm et .xs fonctionne)

                                                si je mets les deux petites images dans une <div class="col-md-4> je obtiens un résultat se rapprochant mais les images ne prennent pas 100% de la hauteur

                                                je vous montre mon code html :

                                                <!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 rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
                                                    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
                                                  <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'>
                                                  <link rel="stylesheet" href="style.css">
                                                
                                                </head>
                                                
                                                <body>
                                                  <div class="container-fluid">
                                                    <header>
                                                      <div class="d-flex ">
                                                        <div class="row align-items-center col-md-12">
                                                          <a class="col-sm-3 col-md-2 " href="#">
                                                            <div class="jumbotron"> <img class=" d-none d-sm-block" src="assets/img/maison.png" alt="logo"></div>
                                                          </a>
                                                          <h1 class="text-center col-md-8 col-sm-6">La maison de l'architecte</h1>
                                                        </div>
                                                      </div>
                                                    </header>
                                                
                                                    <nav class="row">
                                                      <div id="left" class="col-md-8 ">
                                                        <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
                                                      </div>
                                                      <div id="side1" class="col-md-4 col-sm-6">
                                                        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                                                      </div>
                                                      <div id="side2" class="col-md-4 col-sm-6">
                                                        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                                                      </div>
                                                
                                                    </nav>
                                                
                                                
                                                    
                                                
                                                
                                                    <footer class="row justify-content-center my-4">
                                                      <a class="btn btn-primary circle " href="#"><i class=" fa fa-twitter fa-2x"></i></a>
                                                      <a class="btn btn-primary circle " href="#"><i class=" fa fa-facebook fa-2x"></i></a>
                                                      <a class="btn btn-primary circle " href="#"><i class=" fa fa-google-plus fa-2x"></i></a>
                                                      <a class="btn btn-primary circle " href="#"><i class=" fa fa-flickr fa-2x"></i></a>
                                                      <a class="btn btn-primary circle " href="#"><i class=" fa fa-spotify fa-2x"></i></a>
                                                    </footer>
                                                  </div>
                                                  
                                                </body>
                                                
                                                </html>

                                                et mon css

                                                /* Reset Css */
                                                
                                                *,
                                                *:before,
                                                *:after {
                                                    margin: 0;
                                                    padding: 0;
                                                    box-sizing: border-box;
                                                }
                                                
                                                
                                                /* Styles de base */
                                                
                                                body {
                                                    font-family: 'Bitter', serif;
                                                    background-color: #eef;
                                                    color: #259;
                                                }
                                                
                                                .jumbotron {
                                                    margin-bottom: 0px;
                                                    background-color: #eef;
                                                }
                                                
                                                nav img {
                                                    width: 100%;
                                                }
                                                
                                                .circle {
                                                    background-color: #337ab7;
                                                    border-color: #2e6da4;
                                                    border-radius: 25%;
                                                    margin-right: 1rem;
                                                    width: 50px;
                                                    height: 50px;
                                                }
                                                
                                                .circle:hover {
                                                
                                                    background-color: #286090;
                                                    border-color: #204d74;
                                                }
                                                
                                                
                                                
                                                /* 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;
                                                    }
                                                }


                                                je vous remercie par avance de l'aide que vous pourrez m'apporter

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  3 juillet 2019 à 10:00:27

                                                  Bonjour Alexdahu,

                                                  tu dois mettre tes deux images de droite dans une <div> de class "col-md-4" et une <div> de class "row" et rajoute la class "col-md-12" pour tes side1 et 2.

                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  A new life is starting!
                                                    3 juillet 2019 à 12:25:42

                                                    bestmomo a écrit:

                                                    lafilledacote a écrit:

                                                    Oui je confirme qu'il vaut mieux prendre le CDN 3.2.0, car pour ma part, je n'arrive pas à reproduire les exemples à partir de Partie 1 "Premiers Pas" / Chapitre 2 "Une grille ?" / Exemple "Une seule rangée".


                                                    Bonjour,

                                                    La version 3.3 est récente et il faudra un peu de temps pour la mise à jour du cours...

                                                    Mais j'ai commencé à tester cette version (la 3.3.1) et pour moi tous les exemples des chapitres 2 et 3 fonctionnent parfaitement parce que la grille n'a pas été modifiée o_O.

                                                    -
                                                    Edité par bestmomo 27 décembre 2014 à 11:30:02


                                                    je te remercie infiniment je n'avais pas penser à mettre les deux images dans une row avec col-md-12
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      26 août 2019 à 20:06:21

                                                      Partie 3 organiser son Cv😷, j'arrive pas à placer le liseré

                                                      .  Comment le placer !

                                                      -
                                                      Edité par MaïkokeTraoré 26 août 2019 à 20:07:25

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        30 août 2019 à 12:03:56

                                                        Bonjour,

                                                        J'ai un problème avec la partie sur les Tigres. Je fais des copier/coller pour refaire les test sur mon PC et je possède des résultats différents que ceux affichés (souvent, on dirait que des fonctions ne sont pas prise en compte alors qu'elle sont bien écrite dans mon fichier, en HTML comme en CSS).

                                                        C'est notamment le cas pour l'affichage des images en format "XS". En effet, une fois que je diminue la fenêtre au minimum, au lieu de me mettre 4 lignes d'images, le navigateur me remet les images en format ajustées à la page et donc pixelisées. Pourtant, pour l'affichage par 3 et par 2, ça fonctionne... Donc je ne comprend pas (<div class="col-xs-4 col-sm-3 col-md-2">)...

                                                        Une autre chose qui ne fonctionne pas et qui se trouve dans mon fichier CSS, c'est le "pull-right". Et mon affichage pour la citation est différente de ce qui est mis en exemple dans le cours (voir images ci-dessous).

                                                        Est-ce que tout ces problèmes sont dus à la version de Bootstrap (4.3.1) ? :) 

                                                        Pour information, j'ai téléchargé les sources de Bootstrap (et donc pas la version "simplifiée"), j'utilise Chrome et je n'ai rien modifié dans le code CSS ni HTML par après.

                                                        Merci d'avance, 

                                                        Mathilde

                                                        Résultat à obtenirRésultat obtenu

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

                                                        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