Partage

Exercices du cours Bootstrap / Vos questions

6 avril 2018 à 19:27:16

Pas de soucis  je n y manquerai pas pour les préoccupations
6 avril 2018 à 20:46:28

Salut,

Quelqu'un à une info à propos de la sortie du nouveau cours Bootstrap pour la version 4 ?

J'ai lu qu'il était rédigé et moi je suis impatient de le lire pour apprendre les nouveautés parce que la doc en Anglais, c'est gentil mais au bout de 10 lignes, je m'endors en plus de comprendre un mot sur deux ... trois ....

M'enfin, si une gentil personne s'est cassé le C** à faire un gros travail pour nous rendre service, ben se serai bien qu'il soit ajouté à la liste des cours, et je pense même que le cour actuel doit rester en ligne pendant encore pas mal de temps car beaucoup d'entre nous utilise encore la V3.

Bref, j'espère qu'ils ne feront pas une actualisation du cour mais belle et bien une création d'un nouveau cour

....et merci OpenClassRooms, ça urge !!!

6 avril 2018 à 22:10:16

d

-
Edité par mathiashanquiniaux 6 avril 2018 à 22:11:09

6 avril 2018 à 22:17:38

heuuu et c'est pour cette réponse sans aucun intérêt que tu poste ????
7 avril 2018 à 20:51:47

<div class="container">
        <div class="row">
          <div class="main-login main-center">
            <legend class="text-center legende"><h2>Inscription</h2></legend>
            <form method="post" action="#" calss="formPatient">
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control txt" name="nomU" placeholder="Entrer votre nom" id="name" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control txt" name="prenomU" placeholder="Entrez votre prénom" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                    <input type="radio" class="sexe" name="sexeU" value="F"> Homme
                    <input type="radio" class="sexe" name="sexeU" value="H"> Femme
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control txt" name="ageU" placeholder="Entrez votre age" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control txt" name="poidsU" placeholder="Entrez votre poids">
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="text" class="form-control txt" name="residenceU" placeholder="Entrez votre ville ou quartier de residence" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="email" class="form-control txt" name="e-mailU" placeholder="Entrez votre e-mail" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="password" class="form-control txt" name="passU" placeholder="Entrez votre mot de passe" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                  <div class="input-group">
                    <input type="password" class="form-control txt" name="passUconfirme" placeholder="Confirmer votre mot de passe" required>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="cols-sm-10">
                    <input type="submit" class="btn btn-primary btn-lg btn-block" id="button" name="send" value="Enregistrer">
                </div>
              </div>
            </form>
            <a href="connection.php" class="text-center already">Déjà inscrit</a>
          </div>

        </div>
      </div>

Bsr svp une me serais très utile.. J'arrive pas a change la couleur du texte dans les input de type text.. voila le css
.txt {
	font-size: 17px;
	padding-top: 7px;
	width: 423px !important;
	text-align: center;
	background: transparent;
	color: white !important !important;
}
.main-login {
	background: #fff;
	border-radius: 2px;
	box-shadow: 0px 2px 2px rgba(0,0,0,0.3);
	margin-left: 20px;
}
.form-control {
	height: auto !important;
	padding: 8px 12px;
}
.input-group {
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21);
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.21)!important;
}
#button {
	margin-top: 33px;
	border-radius: none !important;
	width: 380px !important;
	background: #03c2ff;
	border: 2px white solid;
}
#button:hover {
	margin-top: 33px;
	border-radius: none !important;
	width: 380px !important;
	background: #005ab7;
	border: 2px white solid;
}
.main-center {
	margin-top: 10px;
	margin: 0 auto;
	max-width: 500px;
	padding: 10px 40px;
	background: url(../../v/img/diag9.jpg);
	box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}
.login-button {
	margin-top: 5px;
}
.sexe {
	margin-left: 98px !important;
	font-size: 17px !important;
}
.btn-block {
	margin-left: 20px !important;
}
.already {
	margin-left: 175px;
	color: white;
}
.legende {
	color: #dedcda;
}
#zovel tech
8 avril 2018 à 9:46:39

Bonjour,

Pour info j'ai commencé à mettre en ligne le cours Bootstrap 4 sur mon blog.

8 avril 2018 à 20:44:23

Un grand merci à vous Bestmomo

Zovel Tech.Inc , tu devrais peut-être essayer de cibler ton objet  comme ça

.form-group .txt {
....
}

mais essaye de comprendre avant en faisant un clique droit dans la fenêtre de ton navigateur puis examiner l'élément (sous Firefox)

-
Edité par florianboy01 8 avril 2018 à 20:50:14

9 avril 2018 à 14:36:17

Bonjour,

J'essaie d'utiliser les icônes de glyphicons mais les classes données sur leur site ne semblent plus correspondent à celles du cour. Du coup je n'arrive pas à me servir de leurs icônes, ils ne sont pas pris en compte.
Pour info, j'utilise Bootstrap v3.3.7.
Merci pour votre aide.

-
Edité par yoZencolere 9 avril 2018 à 14:37:07

9 avril 2018 à 15:34:59

Bonjour,

Impossible de te répondre sans voir ton code, nous ne sommes malheureusement pas devins. ;)

Tu dois nous aider à t'aider....

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
11 avril 2018 à 12:35:40 - Message modéré pour le motif suivant : Message complètement hors sujet


abraham.kb98@gmail.com
11 avril 2018 à 17:13:14

Bonjour,

Concernant l'activité 3, toutes les images du carrousel ont des dimensions de 1280x848 sauf "archi3" qui fait 1275x848, est-ce fait exprès pour qu'on redimensionne les images?

Cordialement,

Jean.

-
Edité par Jean_40 11 avril 2018 à 17:13:36

14 avril 2018 à 12:37:15

Bonjour, @Jean_40

Me souviens ne pas les avoir modifiées.

Jean-Yff
15 avril 2018 à 3:41:53

En effet, je me souviens qu'une image n'avait pas les même dimension que les autres.

Perso, je ne me suis pas fait chier, j'ai tout "tronçonner" pour qu'elles aient toutes les mêmes dimensions et éviter le petit "saut" désagréable au changement d'image.

A voir sous réserve si cela fonctionne d'imposer des dimensions directement dans le code, dans l'immédiat, j'ai pas le temps ni l'envie (fatigué) de tester ...

16 avril 2018 à 13:09:49

Oui, ce n'est pas un critère de notation apparemment.

Merci.

Pour ceux qui n'ont pas encore fait l'activité 3, la "créativité" est prise en compte, donc quand on vous suggère de changer la police et autres, faites-le.

25 avril 2018 à 19:10:43 - Message modéré pour le motif suivant : Le flood est strictement interdit


27 avril 2018 à 14:54:17

Bonjour monsieur, s'il plait je voudrais savoir comment utiliser les fichiers du dossier "fonts" ( les glyphicons) de bootstrap dans ma page web
27 avril 2018 à 16:00:55

erreur, à supprimer.dsl.

-
Edité par yoZencolere 27 avril 2018 à 16:11:19

28 avril 2018 à 16:47:16

Bonjour, J'ai un souci avec l'activité 3 : quand j'écris le code du carrousel, on dirait que mon éditeur (notepad++) ne reconnaît pas les attributs "data-ride", "data-target" et "data-slide-to". Ils restent en noir au lieu de s'écrire en rouge, pourtant je pense avoir écrit le code correctement? Au niveau du carrousel, on voit bien les chevrons et les indicateurs, mais ceux-ci ne fonctionnent pas quand on clique dessus.

voici mon code:

<div id="carousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel" data-slide-to="1"></li>
                        <li data-target="#carousel" data-slide-to="2"></li>
                        <li data-target="#carousel" data-slide-to="3"></li>
                    </ol>

-
Edité par Sandie Emonts 28 avril 2018 à 16:48:14

29 avril 2018 à 0:32:47

Utilise les chevrons pour insérer ton code ... bouton </>

Merci

30 avril 2018 à 11:53:49

J'ai réussi à faire fonctionner le carrousel correctement, j'avais écrit "carousel-slide" au lieu de "carousel slide". Par contre notepad++ écrit toujours les attributs en noir. Je ne sais pas du tout ce que ça signifie?
3 mai 2018 à 14:06:28

Bonjour

je ne comprends pas la class navbar-nav ! car quand on regarde dans le fichier de Bootstrap, la flex-direction est 'column' donc liste en colonne alors que dans l'exemple, on a une liste en ligne...

8 mai 2018 à 23:20:43

Bonsoir,

Je suis actuellement sur l'activité partie 3 et je voulais savoir si il y avait carte blanche pour les titres des photos dans le carrousel car je ne vois aucune infos à ce sujet.

Merci beaucoup par avance pour votre réponse !

9 mai 2018 à 18:24:44

Bonjour

Le cours Prenez en main Bootstrap se base sur la version 3.3.7 de Bootstrap n'est il pas obsolète ?

La version 4.0.0 est sortie on est à la version 4.1.1 je me demander donc si le cours ne dois pas de nouveau être mis à jour. Comme le dis le créateur du cours le dis dans le chapitre 1 "(le code qu'on a écrit pour une mise en page devient rapidement obsolète pour les nouvelles versions)"

"Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. Un site écrit avec la version 2 doit être totalement réécrit pour cette nouvelle version, mais ce n'est évidemment pas une obligation."

9 mai 2018 à 19:47:19

Bonjour, 

je me permets de revenir vers vous concernant l'activité 3 du module "Prenez en main Bootstrap" car après avoir épluché le forum et le web, je n'arrive toujours pas à trouver les solutions à mes divers problèmes et étant novice je vous avoue que je suis un peu perdue et je commence à m'arracher les yeux de la tete !! De plus je suis passé par ce cours pour essayer de valider "Découper er intégrer une maquette" qui est également compliqué pour moi ... Cela fait un bout de temps que je n'avance plus car je suis seule avec mes cours et je souhaiterais vraiment comprendre pour avancer au mieux.

Je vous expose mes questions :

(j'utilise un mac comme support pour info)

Problème n°1 = Lorsque j'ouvre ma page sur Chrome, celle-ci affiche bien l'onglet de navigation lorsque l'on réduit le support. Lorsque je passe sur Safari, aucun ajustement ne se fait et l'onglet n'apparait pas. 

Problème n°2 = Je n'arrive pas à décaler mon texte dans la navbar, afin de reproduire l'effet escompté (qui semble être un peu centré), celui-ci se cale à gauche, impossible de le faire changer de place meme en essayant avec des col-* ...

Problème n°3 = qui m'a l'air récurrent sur le forum : les images du carrousel ! Je ne comprends pas pourquoi elles n'occupent pas toute la largeur de l'écran ...? Et les chevrons ne reste pas sur l'image selon la proportion de la taille de l'écran. 

Je pense que le restant demandé est correct, mais si toute fois vous observez une erreur dans mon code n'hésitez pas à m'en faire part :)

Bonne continuation à vous tous et merci par avance pour vos précieux conseils. @bestmomo

Voici mon code de l'activité 3 :  

<!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.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 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 {
        background: url('assets/img/fond.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
      }
      
      .jumbotron {
        background-color: rgba(0,0,0.5,0);
      }
      
      .navbar-inverse .navbar-brand {
        color: dimgrey;
      }
      .navbar-inverse .navbar-nav > li > a {
        color: dimgrey;
      }
      
      .container {
        padding-right: -15px;
        padding-left: -15px;
        margin-right: auto;
        margin-left: auto;
      }

      /* Images */
      
      img {
        width: 100%; 
       
      }
      
      /* Styles pour les tablettes */
      @media (min-width: 768px) {
        .container {
          width: 750px;
        }
      }
      
      /* Styles pour les écrans moyens et grands */
      @media (min-width: 992px) {
        .container {
          width: 970px;
        }
      }
      @media (min-width: 1200px) {
        .container {
          width: 1170px;
        }
      }
    
    </style>
  </head>

  
  <body id="page-top" data-spy="scroll" data-target=".navbar"> 
    <div class="container">

    <!-- Navigation 
    ================================================== -->
      <header class="navbar navbar-inverse navbar-fixed-top">
      
      <a href="#page-top" class="navbar-brand" >La maison de l'architecture</a>
     
      <div class="navbar-header">
        <button type="button" data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>
      
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="hidden"><a href="#page-top"></a></li>
          <li><a href="#accueil">Accueil</a></li>
          <li><a href="#qui">Qui sommes-nous ?</a></li>
          <li><a href="#contact">Contact</a></li>
          </ul>
      </div>
  
      </header>
    <!-- Caroussel
    ================================================== -->
    <div id="carousel" class="carousel slide" data-ride="carousel">
      
    <!-- Indicateurs d'image affichée -->
    
    <ol class="carousel-indicators">
      <li data-target="#carousel" data-slide-to="0" class="active"></li>
      <li data-target="#carousel" data-slide-to="1"></li>
      <li data-target="#carousel" data-slide-to="2"></li>
      <li data-target="#carousel" data-slide-to="3"></li>
    </ol>
    
    <!-- Initialisation carousel + titres images -->
      
      <div class="carousel-inner">
        <div class="item active"><img src="assets/img/archi1.jpg" alt="Architecture">
          <h1 class="carousel-caption">Un désign futuriste</h1>  
        </div>
        <div class="item"><img src="assets/img/archi2.jpg" alt="Architecture">
          <h1 class="carousel-caption">Des matériaux uniques au monde</h1>  
        </div>
        <div class="item"><img src="assets/img/archi3.jpg" alt="Architecture">
          <h1 class="carousel-caption">De l'originalité avant tout</h1>  
        </div>
        <div class="item"><img src="assets/img/archi4.jpg" alt="Architecture">
          <h1 class="carousel-caption">Des technologies de pointe</h1>  
        </div>
      </div>
    </div>
    
    <!-- Boutons de défilement du carousel -->
    
    <a class="left carousel-control" href="#carousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    
    

    <!-- Corps de page déjà codé
    ================================================== -->
    <div class="container">

      <div class="jumbotron row" id="accueil">
        <h1 class="text-center">Bienvenue dans notre espace</h1>
        <img class="col-sm-12 col-md-5" src="assets/img/accueil.jpg" alt="Accueil">     
        <p class="col-sm-12 col-md-7">Nous sommes spécialisés dans tous types de constructions et nous prenons en charge les projets de A à Z. Vous pouvez nous confier en toute confiance des projets de toutes dimensions, des plus simples aux plus osés. Notre équipe est efficace, réactive et compétente. Nous entretenons toujours un dialogue de tous les instants avec nos clients. Bien qu'à la pointe de notre activité nous pratiquons des prix rigoureux et adaptés à tous les budgets.</p>
      </div>

      <div class="jumbotron row" id="qui">
        <h1 class="text-center">Une équipe efficace</h1>
        <img class="col-sm-12 col-md-5 col-md-push-7" src="assets/img/equipe.jpg" alt="Equipe"> 
        <p class="col-sm-12 col-md-7 col-md-pull-5">Notre équipe est jeune, experte et motivée. Notre entreprise est certifiée ISO 9001. Nous cherchons en permanence à améliorer la qualité de nos services et nous sommes à l'écoute de nos clients.</p>
      </div>

      <div class="jumbotron" id="contact">
        <h1 class="text-center">Un message pour nous ?</h1>
        <form class="row">
          <div class="form-group col-lg-4">
            <input type="email" class="form-control" placeholder="Votre email">
          </div>
          <div class="form-group col-lg-8">
            <textarea class="form-control" rows="3" placeholder="Votre message"></textarea>
          </div>
          <div class="form-group col-lg-12">
            <button type="submit" class="btn btn-default pull-right">Envoyer</button>
          </div>
        </form>
      </div>

    </div>

    <!-- Pied de page
    ================================================== -->
    <footer class="row text-center">
      <a class="btn btn-default" href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-flickr fa-2x"></i></a>
      <a class="btn btn-default" href="#"><i class="fa fa-spotify fa-2x"></i></a>
    </footer>
    </div>
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- Javascript de Bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

    <script>
      // Scrollspy fluide
      $(function () {
        $('header a').on('click', function(e) {
          e.preventDefault();
          var hash = this.hash;
          $('html, body').animate({
            scrollTop: $(this.hash).offset().top
          }, 1000, function(){
            window.location.hash = hash;
          });
        });
      });
    </script>

  </body>

</html>



-
Edité par FaustineMerella 9 mai 2018 à 20:23:59

14 mai 2018 à 17:32:28

ValentinoFolio a écrit:

Bonjour

Le cours Prenez en main Bootstrap se base sur la version 3.3.7 de Bootstrap n'est il pas obsolète ?

La version 4.0.0 est sortie on est à la version 4.1.1 je me demander donc si le cours ne dois pas de nouveau être mis à jour. Comme le dis le créateur du cours le dis dans le chapitre 1 "(le code qu'on a écrit pour une mise en page devient rapidement obsolète pour les nouvelles versions)"

"Le passage à la version 3 a été une petite révolution avec de très nombreux changements, en particulier une refonte complète de la grille. Un site écrit avec la version 2 doit être totalement réécrit pour cette nouvelle version, mais ce n'est évidemment pas une obligation."

En attendant de le trouver sur OC :p

bestmomo a écrit:

Bonjour,

Pour info j'ai commencé à mettre en ligne le cours Bootstrap 4 sur mon blog.



16 mai 2018 à 7:34:47

Salut bestmomo merci pour l'information. Je vais allez regarder sa merci beaucoup !

-
Edité par ValentinoFolio 16 mai 2018 à 7:38:27

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