IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Layout Bootstrap


Sujet :

Framework CSS Bootstrap

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    146
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 146
    Points : 69
    Points
    69
    Par défaut Layout Bootstrap
    Salut ! Ça va faire + de 2h que je galère avec Bootstrap avec le layout ! Je me mélange les pinceaux dans mon code j'essaye des choses, je retourne la doc mais je capte pas super bien comment ça marche...

    Mon projet est sur ReactJS mais c'est pas très important pour avoir de l'aide

    Voici le code :

    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <main className="row">     
          <section className="login col-4">         
            <h2 className="logtitle row justify-content-center">Connecte toi !</h2>
            <form className="col justify-content-center">
              <div className="maillog col align-self-center">
                <img className="mailsvg" src={mailsvg}/>
                <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail"/>
              </div>
              <div className="passlog">
                <img className="locksvg" src={locksvg}/>
                <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass"/>
              </div>
              <div>
                <div>
                  <input type="checkbox" className="logmemory" name="memory" checked/>
                  <label for="memory">Se souvenir de moi</label> 
                </div>
                <div>
                  <Link className="loglost" to="#">Mot de passe oublié</Link> 
                </div>             
              </div>
              <input type="submit" className="logsubmit" value="Se connecter"/>
          </form>         
       </section>
       <section className="register col-8"></section>     
    </main>


    Sur la première ligne, je mets en row mes 2 sections, sur l'élément parent... jusque là pas de souci, les width des 2 sections sont réglés avec un col-4 pour la partie gauche et col-8 pour la partie droite ! Ok ! Jusqu'à la c'est relativement simple et clair ! Mais c'est après que ça se complique... j'arrive à centrer le H2 en lui disant directement row et justify-content-center ! Là déjà je pige moyen car le h2 n'a pas d'élément enfant donc pourquoi le row et justify-content-center font effet sur lui directement ?? Après on rentre dans un form qui est composé de 4 éléments (3 divs et 1 input de type submit) qui doivent être en column et centré dans cette section... Bon ok.. On va mettre col au form et je veux que tous les éléments enfants de la balise form soit centrés... Ok d'après la doc faut mettre justify-content-center aussi.... Mais je suis en col donc ça marche pas ! Dans ma console ça me dit que le justify content n'est pas pris en compte car il ne s'agit pas d'un élément flex blablabla --'... donc je vais essayer avec align-items-center... marche pas non plus... Bref je vais pas expliquer tous mes essais que je fais depuis 2 - 3h mais là j'abdique ! Il parait que le CSS est plus simple avec Bootstrap haha.... Plus sérieusement je veux bien une explication ! Merci

    ps:dsl les modos si je ne suis pas dans la bonne partie du fofo !

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 740
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 740
    Points : 39 949
    Points
    39 949
    Par défaut
    Bonjour,
    avec BootStrap il est toujours utile de préciser la version que l'on utilise !

    Il parait que le CSS est plus simple avec Bootstrap haha....
    Comprendre BootStrap nécessite de comprendre d'abord le CSS, le HTML ne devant pas être en reste ceci pour te dire que :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <main className="row">
    ne permet pas d’attribuer une class, quelque soit sa provenance, à un élément.

    Fait des essais avec
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <main class="row">
    et on reparle éventuellement !

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    146
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 146
    Points : 69
    Points
    69
    Par défaut
    Salut et merci de ta réponse ! Ma version de Bootstrap est la 5.0.1

    Alors effectivement je pensais qu'il fallait absolument utiliser le terme className au lieu de class quand on travaille sur React ! J'ai donc essayé avec class="row" et il n'y a pas de changement... que j'utilise class ou className ne semble pas influer sur le CSS de ma page.

    Par exemple :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <main class="row">      
          <section class="login col-4">...</section>
          <section class="register col-8">...</section>
    </main>

    et

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <main className="row">      
          <section className="login col-4">...</section>
          <section className="register col-8">...</section>
    </main>

    donne le même résultat...

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 740
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 740
    Points : 39 949
    Points
    39 949
    Par défaut
    ... que j'utilise class ou className ne semble pas influer sur le CSS de ma page.
    effectivement j'en ai occulté cette information, pourtant bien visible, tellement j'ai eu du mal à lire ta prose exempte de retour chariot.

    J'en ai conclu que tu cherchais à centrer tous les éléments dans le conteneur <section>, il te faut dans ce cas utiliser à bon escient la classe text-center qui devrait être suffisante pour peu que tu supprimes tous ce qui te sert à rien soit :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <section className="login col-4 text-center">  <!-- uniquement ici -->
      <h2 className="logtitle">Connecte toi !</h2>
      <form className="col">
        <div className="maillog">
          <img className="mailsvg" src="{mailsvg}/">
          <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail">
        </div>
        <div className="passlog">
          <img className="locksvg" src="{locksvg}/">
          <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass">
        </div>
        <div>
          <div>
            <input type="checkbox" className="logmemory" name="memory" checked="">
            <label for="memory">Se souvenir de moi</label>
          </div>
          <div>
            <link className="loglost" to="#">Mot de passe oublié
          </div>
        </div>
        <input type="submit" className="logsubmit" value="Se connecter">
      </form>
    </section>

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    146
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 146
    Points : 69
    Points
    69
    Par défaut
    Effectivement text-center centre bien mon H2, mais je pense qu'il me manque encore des class bootstrap dans mon code pour arriver à ce que je veux car mon <form> prend toute la largeur de la section:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
       <main className="row">  
          <section class="login col-4 text-center">          
            <h2 class="logtitle">Connecte toi !</h2>
            <form class="form col align-self-center">
              <div class="maillog">
                <img className="mailsvg" src={mailsvg}/>
                <input type="text" className="logmail" placeholder="Adresse mail ou téléphone" name="LogMail"/>
              </div>
              <div className="passlog">
                <img className="locksvg" src={locksvg}/>
                <input type="password" className="logpass" placeholder="Mot de passe" name="LogPass"/>
              </div>
              <div className="checklost">
                <div className="">
                  <input type="checkbox" className="logmemory" name="memory"/>
                  <label for="memory">Se souvenir de moi</label>  
                </div>
                <div className="">
                  <Link className="loglost" to="#">Mot de passe oublié</Link>  
                </div>              
              </div>
              <input type="submit" className="logsubmit" value="Se connecter"/>
            </form>          
          </section>

    css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    main{
      font-family: 'Poppins', sans-serif;
    }
    .mailsvg, .locksvg{
      fill: var(--violet);
      width: 20px;
    }
    .form{
      /* display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around; */
    }
    .login{
      /* display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10rem 0; */
    }
    .logtitle{
      color: var(--violet);
      font-weight: 700;
      margin-bottom: 8rem;
    }
    .maillog, .maillog>*,.passlog, .passlog>*{
      background: var(--gris);
    }
    .maillog, .passlog{
      height: 2.5rem;
      margin: 0.5rem 0;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      color: var(--font);
    }
    .checklost{
      width: 100%;
      height: 2rem;
      margin: 0.5rem 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
    }
    .checklost label{
      margin-left: 0.5rem;
    }
    .loglost{
      font-style: italic;  
      color: var(--violet);
      text-decoration: none;
      border-bottom: var(--violet) 1px solid;
    }
    .logsubmit{
      background: var(--jaune);
      padding: 0.4rem 1rem;
      border: none;
      color: var(--violet);
      font-weight: 500;
      margin-top: 5rem;
    }

    j'ai commenté les parties layout vanilla pour que bootstrap puisse prendre le relai pour les éléments parent (main,section et form) pour le moment mais ça ne donne pas le résultat voulu :

    Nom : 1.PNG
Affichages : 51
Taille : 17,3 Ko

    Et je cherche à faire comme ceci :

    Nom : 2.PNG
Affichages : 52
Taille : 17,9 Ko

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 740
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 740
    Points : 39 949
    Points
    39 949
    Par défaut
    mais je pense qu'il me manque encore des class bootstrap
    A priori je dirais plutôt que tu as des choses en trop dans ton CSS perso.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .maillog, .passlog{
      height: 2.5rem;
      margin: 0.5rem 0;
      padding: 0 0.5rem;
    /*  display: flex;            /* out */
    /*  flex-direction: row;      /* out */
    /*  align-items: center;      /* out */
    /*  justify-content: start;   /* out */
      color: var(--font);
    }
    cela devrait rétablir le centrage.

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    juillet 2008
    Messages
    146
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juillet 2008
    Messages : 146
    Points : 69
    Points
    69
    Par défaut
    Ça m'a centré mes inputs mais rien de plus

    Nom : 3.PNG
Affichages : 52
Taille : 14,4 Ko

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 740
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 740
    Points : 39 949
    Points
    39 949
    Par défaut
    Ça m'a centré mes inputs mais rien de plus
    c'était pas le but !

    Ceci étant, si tu utilises BootStrap pour ta mise en page, bonne chance, autant utiliser les règles qu'il fournit en ne créant que les « classes custom » qu'il ne gère pas.

    Ton formulaire pourrait ressembler à :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <main className="row">
      <section className="col-4 text-center">
        <form className="border border-dark p-4">
     
          <h2 className="fw-bold mb-4">Connecte toi !</h2>
     
          <div className="input-group-text mb-4">
            <img className="mailsvg" src={mailsvg} />
            <input type="text" className="form-control border-0 bg-transparent ms-2" placeholder="Adresse mail ou téléphone" name="LogMail" />
          </div>
     
          <div className="input-group-text mb-4">
            <img className="locksvg" src={locksvg} />
            <input type="password" className="form-control border-0 bg-transparent ms-2" placeholder="Mot de passe" name="LogPass" />
          </div>
     
          <div className="d-flex justify-content-between">
            <div>
              <input type="checkbox" className="logmemory" id="memory" name="memory" checked />
              <label className="" for="memory">Se souvenir de moi</label>
            </div>
            <Link className="loglost" to="#">Mot de passe oublié</Link>
          </div>
     
          <button className="btn btn-warning btn-block my-4" type="submit">Se connecter</button>
        </form>
      </section>
    </main>
    Après à toi de jouer avec les padding et/ou margin : Margin and padding

Discussions similaires

  1. Réponses: 2
    Dernier message: 10/03/2003, 17h20
  2. help please
    Par atom267 dans le forum CORBA
    Réponses: 2
    Dernier message: 24/01/2003, 11h41
  3. [Kylix] fichiers help kylix2 oe ??
    Par sdoura2 dans le forum EDI
    Réponses: 2
    Dernier message: 29/11/2002, 15h32
  4. Help :Problème de clignotement
    Par LE CHAKAL dans le forum Composants VCL
    Réponses: 6
    Dernier message: 14/08/2002, 11h53
  5. Help InnoSetup ou Installshield
    Par buzz dans le forum Outils
    Réponses: 4
    Dernier message: 30/07/2002, 16h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo