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

                            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