Permettez-moi de vous montrer les rendus en premier. Si vous pensez que c'est assez bon, continuez à vous référer aux idées de mise en œuvre pour des explications détaillées.
mise en page
1. La moitié de chacun de la gauche et de la droite (Col-MD-6)
2. La boîte de connexion gauche explique la moitié du côté gauche
3. À droite, les précautions de connexion au système
Éléments HTML utilisés
Bien
Groupe d'entrée
Bouton (BTN-Success)
Code html
<div style = "margin-top: 30px;"> <div style = "border-right: 1px solide #ddd;"> <div> <h3> Login de l'utilisateur </h3> <v> <span id = "size-addon1"> <i aria-hidden = "true"> </i> </span> <entrée type = "text" PlaceHolder = "nom d'utilisateur" aria----------------------drigedBy = "sizing-addon1"> </div> <v> <span sany id = "sizing-addon1"> <i> </i> </span> <introut-type = "mot de passe" placeholder = "mot de passe" aria-descripturedy = "size-addon1"> </ div> <div style = "Text-align: Center;"> <fort type = "NAMELLE =" TEAT = "TEAT" enseignant <entrée type = "radio" name = "kind" value = "Stu"> Student </div> <Button Type = "soume"> Login </futton> </div> <div> <h3> Bienvenue pour utiliser le système de gestion des devoirs pour les étudiants </h3> <ul> <li> Les étudiants utilisent le numéro d'étudiant </em> pour se connecter. Le mot de passe initial est <em> 6 1 </em>. Veuillez modifier le mot de passe à temps après la connexion. L'enseignant, veuillez utiliser le numéro de travail </em> pour se connecter. Le mot de passe initial est <em> 6 1 </em>. Veuillez modifier le mot de passe à temps après la connexion. </li> </ul> </div> </div>
Code CSS
.input-group {marge: 10px 0px; // Les marges supérieures et inférieures de la zone d'entrée sont 10px, et la gauche et la droite sont 0px} h3 {padding: 5px; border-bottom: 1px solide #ddd; // h3 Font border border} li {list-style-Type; Les marges supérieures et inférieures sont 10px} em {// la couleur de style mettant l'accent: # C7254E; Style de police: hérité; fond-couleur: # f9f2f4;}Ce qui précède est ce que l'éditeur vous a présenté pour utiliser Bootstrap pour implémenter l'interface de connexion de l'utilisateur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!