Partage
  • Partager sur Facebook
  • Partager sur Twitter

Exercices du cours Bootstrap / Vos questions

    27 décembre 2014 à 19:31:14

    oui cela marche aussi pour ma part avec la version 3.3.
    • Partager sur Facebook
    • Partager sur Twitter
      28 décembre 2014 à 21:34:50

      Bonjour,

      Je travaille sur le corps de l'activité 2. Je n'arrive pas à aligner le bas de l'image de droite avec le bas de la grande image de gauche.

      Je n'arrive pas nonplus à avoir la même marge entre toutes les photos. Quand je mets une marge entre les deux photos de droite elles dépassent de l'image de gauche. Si quelqu'un a une piste je suis preneur.

      Merci d'avance.

      • Partager sur Facebook
      • Partager sur Twitter
      Le hasard sourit aux esprits préparés
        28 décembre 2014 à 21:54:40

        @Django71

        Il y a plusieurs solutions mais la plus simple est de surcharger les paddings générés par Bootstrap pour les 3 cas (smartphones, tablettes et autres). Les emplacements avec des medias queries ont déjà été prévus au niveau des styles.

        • Partager sur Facebook
        • Partager sur Twitter
          28 décembre 2014 à 22:10:28

          Merci best momo,

          Dans le code il n'y a pas de media queries pour les smartphones déjà crée. je pensait qu'il ne fallait pas en créer un mais surcharger uniquement les medias queries prévus pour le tablettes et les écrans larges.

          • Partager sur Facebook
          • Partager sur Twitter
          Le hasard sourit aux esprits préparés
            28 décembre 2014 à 22:13:34

            code original:
            <!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.2.0/css/bootstrap.min.css" rel="stylesheet">
                <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.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%;
                  }
            
                  /* Styles pour les tablettes */
                  @media (min-width: 768px) {
            
                  }
            
                  /* Styles pour les écrans moyens et grands */
                  @media (min-width: 992px) {
            
                  }
             
                </style>
            
              </head>
            
              <body>
            
                <header>
                  <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
                  <h1>La maison de l'architecte</h1>        
                </header>
            
                <nav>
                  <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
                  <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                  <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                </nav>
            
                <footer>
                  <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>
            
              </body>
            
            </html>
            • Partager sur Facebook
            • Partager sur Twitter
            Le hasard sourit aux esprits préparés
              28 décembre 2014 à 22:15:21

              Finalement je dois créer un media queries pour les smartphones, est ce bien ça bestmomo?
              • Partager sur Facebook
              • Partager sur Twitter
              Le hasard sourit aux esprits préparés
                28 décembre 2014 à 22:19:06

                En fait je pensais qu'il ne fallait pas le faire. A mon sens comme bootstrap 3 est mobile first, les réglages de base était basé sur ce type de média.
                • Partager sur Facebook
                • Partager sur Twitter
                Le hasard sourit aux esprits préparés
                  28 décembre 2014 à 22:21:13

                  Oui Bootstrap est mobile first, ce qui ne signifie pas forcément qu'il n'y a rien à faire mais qu'il suffit de commencer par là ;)
                  • Partager sur Facebook
                  • Partager sur Twitter
                    28 décembre 2014 à 22:33:37

                    Merci encore pour tes précisions... Je vais essayer d'avancer avec ça.

                    En tout cas bravo pour ce cours, c'est vraiment passionnant. Je suis vraiment très intéressé par cette façon de faire du web, le "responsive design" et le "one-page" c'est vraiment très intuitif.

                    • Partager sur Facebook
                    • Partager sur Twitter
                    Le hasard sourit aux esprits préparés
                      29 décembre 2014 à 13:57:58

                      J'ai avancé sur le code pour la version smartphone. Tout se repartit bien au niveau des marges. Par contre j'ai choisi de mettre la totalité de la page dans un container-fluid pour occuper la totalité de l'espace, je ne sais pas si c'est une bonne solution. Par contre je ne comprends pas l'utilité d'utiliser un jumbotron pour le header, hormis peut être pour bénéficier des marges intégrées dans la class?

                      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.2.0/css/bootstrap.min.css" rel="stylesheet">
                          <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.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 */
                      
                            [class*="col"] { 
                              margin-bottom: 10px; 
                              padding-left: 10px;
                              padding-right: 10px;
                            }
                      
                            body {
                              font-family: 'Bitter', serif;
                              background-color: #eef;
                              color: #259;
                            }
                            nav img {
                              width: 100%;
                            }
                      
                            .btn {
                            width: 50px;
                            height: 50px;
                            border-radius: 25px;
                            }
                      
                            /* Styles pour les tablettes */
                            @media (min-width: 768px) {
                      
                            }
                      
                            /* Styles pour les écrans moyens et grands */
                            @media (min-width: 992px) {
                      
                            }
                       
                          </style>
                      
                        </head>
                      
                        <body>
                          <div class="container-fluid">
                            <header class="row">
                              <div class="hidden-xs col-sm-2">
                              <a href="#"><img src="assets/img/maison.png" alt="logo"></a>
                              </div>
                              <div class="col-xs-12 col-sm-8">
                              <h1 class="text-center">La maison de l'architecte</h1> 
                              </div>      
                            </header>
                      
                            <nav class="row">
                             <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 class="col-xs-12 col-sm-6 col-md-4">
                                <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                             </div>
                              <div class="col-xs-12 col-sm-6 col-md-4">
                               <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                             </div>
                            </nav>
                      
                            <footer class="row">
                                <div class="col-xs-12">
                                <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>
                                </div>
                            </footer>
                          </div>
                        </body>
                      
                      </html>

                      La seule chose qui me reste à régler c'est le centrage. j'ai utiliser un offset mais cela ne fonctionne pas.

                      Une petite validation de mon code ou des commentaires me serait bien utile.

                      Merci d'avance.

                      • Partager sur Facebook
                      • Partager sur Twitter
                      Le hasard sourit aux esprits préparés
                        29 décembre 2014 à 13:59:36

                        Je voulais dire le centrage des icônes dans le pied de page. Soit j'ai raté un détail pour le centrage mais je bloque à ce niveau.
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Le hasard sourit aux esprits préparés
                          29 décembre 2014 à 14:08:04

                          Salut,

                          Ce n'est pas difficile. faire une petite recherche tu verras résoudre le problème.

                          Bonne chance ;).

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Cordialement, MALEK Jamel
                            29 décembre 2014 à 18:54:48

                            Merci jamel pour ta réponse,

                            Par contre j'ai beau relire le cours, certes en diagonal, je n'arrive pas à trouver l'info pour le centrage des boutons. La solution serait peu être de faire un div devant celui qui contient les boutons mais à l'agrandissement ça ne tient pas la route.

                            Et pour la justification de l'utilisation du jumbotron???o_O

                            Merci d'avance.:)

                            • Partager sur Facebook
                            • Partager sur Twitter
                            Le hasard sourit aux esprits préparés
                              29 décembre 2014 à 21:45:16

                              @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.

                              • Partager sur Facebook
                              • Partager sur Twitter
                                30 décembre 2014 à 0:27:19

                                OK. :D

                                Pour le header et le pied de page c'est réglé. Ouf!!:p

                                Maintenant le corps. Ah Ah AH!!!

                                Les éléments se placent nickel. Maintenant il faut comprendre quel padding il faut surcharger. Il y a des gouttières automatiques sur le container-fluid, sur le row et sur les colonnes. Un vrai petit rubixcub.;)

                                Merci encore

                                • Partager sur Facebook
                                • Partager sur Twitter
                                Le hasard sourit aux esprits préparés
                                  30 décembre 2014 à 10:14:02

                                  Bonjour,

                                  Je pense que ce qui manque sur le cours, c'est un récap des classes Bootstrap qui vont bien.

                                  Car là pour faire les exercices après avoir tout lu, je galère beaucoup. *mémoire de poisson rouge*

                                  Donc pas d'autre solution que de se faire une fiche comme à l'ancienne. :)

                                  Bonne journée.
                                  Laura 

                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                  Love. Bisou.
                                    30 décembre 2014 à 10:28:29

                                    lafilledacote a écrit:

                                    Bonjour,

                                    Je pense que ce qui manque sur le cours, c'est un récap des classes Bootstrap qui vont bien.

                                    Car là pour faire les exercices après avoir tout lu, je galère beaucoup. *mémoire de poisson rouge*

                                    Donc pas d'autre solution que de se faire une fiche comme à l'ancienne. :)

                                    Bonne journée.
                                    Laura 

                                    tu as tout à fait raison.
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                    Cordialement, MALEK Jamel
                                      30 décembre 2014 à 12:19:08

                                      Voila: http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        30 décembre 2014 à 12:43:54

                                        jidan70 a écrit:

                                        Voila: http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description


                                        Merci.
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                        Cordialement, MALEK Jamel
                                          30 décembre 2014 à 12:52:13

                                          Merci beaucoup !
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                          Love. Bisou.
                                            30 décembre 2014 à 14:30:47

                                            j'avoue un petit mémento des classes comme à la fin du cours HTML/CSS serait parfait
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                            Seul ceux qui prennent le risque d'échouer spectaculairement réussiront brillamment.
                                              30 décembre 2014 à 14:47:07

                                              Franchement pour la repartition des marges pour le corps, j'ai beau me prendre la tête, impossible d'obtenir la mise en page voulue. j'ai bien compris qu'il fallait jouer sur le padding des colonnes mais à part pour la version smartphone, je galère pour les autres medias.

                                              J'ai organisé mon corps avec la structure suivante:

                                              <nav class="row">
                                              
                                                        <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 class="col-xs-12 col-sm-6 col-md-4">
                                                        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
                                                        </div>
                                              
                                                        <div class="col-xs-12 col-sm-6 col-md-4">
                                                        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
                                                        </div> 
                                              
                                              
                                                    </nav>

                                              Et voici les paddings pour la version smartphone:

                                              /*Styles pour les smartphones*/
                                              
                                                    @media (max-width: 768px){
                                              
                                                    [class*="col"] { 
                                                    padding-bottom: 10px;
                                                    padding-left: 10px;
                                                    padding-right: 10px;
                                                     }
                                              
                                                    }

                                              Pour la version tablette comme les deux élément de  la nav du bas sont tous les deux des col-sm-6 si je touche les paddings cela intervient sur les 2.

                                              Enfin suis un peu perdu. J'ai beau retourné ça dans tous les sens il y a toujours une marge sur la droite.

                                              Paddings pour la version tablette:

                                                    /* Styles pour les tablettes */
                                                    @media (min-width: 768px) {
                                              
                                                    [class*="col"] { 
                                                    padding-bottom: 10px;
                                                    padding-left: 0px;
                                                    padding-right: 10px;
                                                     }
                                              
                                                    }


                                              Help please!:(


                                              • Partager sur Facebook
                                              • Partager sur Twitter
                                              Le hasard sourit aux esprits préparés
                                                30 décembre 2014 à 16:58:33

                                                Salut,

                                                Si ce sont tous les deux des col-sm-6 et que tu veux un comportement différent alors il faut les distinguer autrement, par exemple avec un id, pour gérer les paddings indépendamment pour les tablettes. Utiliser Bootstrap ne doit pas faire oublier la gestion classique des styles. Une fois épuisé l'aspect "magique" du framework il faut bien mettre les mains dans le cambouis.

                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  30 décembre 2014 à 17:02:09

                                                  OK. Bonne nouvelle. Tout va être beaucoup plus simple!!! Enfin j'espère.
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter
                                                  Le hasard sourit aux esprits préparés
                                                    31 décembre 2014 à 18:19:26

                                                    Bonsoir à tout le monde,

                                                    @bestmomo.

                                                    Dans la partie consacrée aux composants intégrés, au sujet des barres de progression, tu dis :

                                                    "Pour changer un peu, j'ai prévu l'affichage du pourcentage. Remarquez l'utilisation de la classe pull-right pour envoyer cet affichage sur la droite."

                                                    et le code qui va avec :

                                                    <div class="container">
                                                      <div class="progress">
                                                        <div class="progress-bar progress-bar-info"></div>
                                                      </div>
                                                      <div class="progress">
                                                        <div class="progress-bar progress-bar-success"></div>
                                                      </div>
                                                      <div class="progress">
                                                        <div class="progress-bar progress-bar-warning"></div>
                                                      </div>
                                                      <div class="progress">
                                                        <div class="progress-bar progress-bar-danger"></div>
                                                      </div>
                                                      <div class="progress progress-striped">
                                                        <div class="progress-bar progress-bar-info"></div>
                                                      </div>
                                                      <div class="progress progress-striped">
                                                        <div class="progress-bar progress-bar-success"></div>
                                                      </div>
                                                      <div class="progress progress-striped">
                                                        <div class="progress-bar progress-bar-warning"></div>
                                                      </div>
                                                      <div class="progress progress-striped">
                                                        <div class="progress-bar progress-bar-danger"></div>
                                                      </div>
                                                      <input type="button" class="btn btn-primary" id="animer" value="Animer">
                                                    </div>

                                                    Or je ne vois pas la classe pull-right, et de plus tant l'image que la version en ligne ne montre l'affichage du pourcentage.

                                                    J'adore néanmoins ce cours et entend bien continuer l'apprentissage de ce merveilleux framework.

                                                    Je vous souhaite à toutes et tous, un peu en avance, tous mes voeux pour cette nouvelle année.

                                                    Bon réveillon

                                                    Alain


                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                    L'histoire ne consiste pas seulement en une succession de dates, mais elle raconte surtout qui vous êtes et d'où vous venez................
                                                      31 décembre 2014 à 20:03:14

                                                      @amlpq

                                                      Salut,

                                                      La phrase que tu cites fait référence au code qui précède et pour lequel est effectivement prévu un pourcentage envoyé à droite avec la classe pull-right.

                                                      Bon réveillon ;)

                                                      Pour info : J'ai fait le tour de tous les exemples du cours et tous sont fonctionnels avec la version 3.3.1 !

                                                      Maurice

                                                      -
                                                      Edité par bestmomo 31 décembre 2014 à 21:33:07

                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        31 décembre 2014 à 21:55:28

                                                        @ Mr Maurice

                                                        Salut,

                                                        pour le deuxième bloc texte et image, l'image doit être en haut ou bien le texte.

                                                        • Partager sur Facebook
                                                        • Partager sur Twitter
                                                        Cordialement, MALEK Jamel
                                                          1 janvier 2015 à 9:45:55

                                                          Bonjour à toutes et tous et meilleurs voeux pour 2015. @bestmomo, merci pour la réactivité et pour la réponse. Encore bravo pour ce cours Alain
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter
                                                          L'histoire ne consiste pas seulement en une succession de dates, mais elle raconte surtout qui vous êtes et d'où vous venez................
                                                            1 janvier 2015 à 10:31:41

                                                            Bonjour et tous mes vœux pour cette nouvelle année !

                                                            @Jamel

                                                            Je ne comprends pas de quel bloc tu parles...

                                                            Pour info : j'ai testé les exercices avec la version 3.3.1 et je n'ai constaté qu'un petit souci de différence de marges avec le Jumbotron mais de toutes façons les exercices sont à réaliser avec la version 3.2 dont le lien est déjà en place dans le code.

                                                            • Partager sur Facebook
                                                            • Partager sur Twitter
                                                              1 janvier 2015 à 11:06:16

                                                              bestmomo a écrit:

                                                              Bonjour et tous mes vœux pour cette nouvelle année !

                                                              @Jamel

                                                              Je ne comprends pas de quel bloc tu parles...

                                                              Pour info : j'ai testé les exercices avec la version 3.3.1 et je n'ai constaté qu'un petit souci de différence de marges avec le Jumbotron mais de toutes façons les exercices sont à réaliser avec la version 3.2 dont le lien est déjà en place dans le code.


                                                              Bonjour,

                                                              D'abords, une bonne nouvelle années à vous et toute la communauté .

                                                              Pour la partie Corps du page, on a trois blocs. Le deuxième qui contient le texte à gauche et l'image à droite pour les grands écrans. Ma question c'est lors de l'affichage pour les smartphones et les tablettes le texte s'affiche au dessus d'image. Ce que je constate d'aprés vos discutions c'est que je dois ajouter une classe pull-right ou bien push_right, c'est ça?  

                                                              • Partager sur Facebook
                                                              • Partager sur Twitter
                                                              Cordialement, MALEK Jamel

                                                              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