J'ai récupérer le code source de ma page de login dans les exemples fournies par le site Bootstrap. Lors de l'affichage, le formulaire s'étale sur tout l'écran et il n'est pas centré comme l'exemple fournie dans le site bootstrap.
Voici le code html :
et voici le code CSS :
Code : 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 <!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="https://getbootstrap.com/favicon.ico"> <title>Connexion</title> <!-- Bootstrap core CSS --> <link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="/css/signin.css" rel="stylesheet"> </head> <body> <div class="container"> <form class="form-signin" id="monform"> <h2 class="form-signin-heading">Veuillez vous connecter</h2> <label for="inputEmail" class="sr-only">Adresse email</label> <input type="email" id="inputEmail" class="form-control" placeholder="Adresse email" required autofocus> <label for="inputPassword" class="sr-only">Mot de Passe</label> <input type="password" id="inputPassword" class="form-control" placeholder="Mot de passe" required> <div class="checkbox"> <label> <input type="checkbox" value="remember-me"> souviens-toi de moi </label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">se connecter</button> </form> </div> <!-- /container --> </body> </html>
Comme je suis débutante en html5, je vous demande de bien vouloir m'aider en me proposant une aide.
Code : 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 body { padding-top: 40px; padding-bottom: 40px; background-color: #eee; } .form-signin { max-width: 330px; padding: 15px; margin: 0 auto; } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: 400; } .form-signin .form-control { position: relative; box-sizing: border-box; height: auto; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; }
Merci d'avance pour votre aide.
Batman
Partager