Déjame mostrarte las representaciones primero. Si cree que es bastante bueno, continúe referiéndose a las ideas de implementación para una explicación detallada.
disposición
1. La mitad de cada de la izquierda y derecha (Col-MD-6)
2. El cuadro de inicio de sesión izquierdo cuenta para la mitad del lado izquierdo
3. A la derecha están las precauciones para iniciar sesión en el sistema
Elementos html utilizados
Bien
Grupo de entrada
Botón (BTN-Success)
Código HTML
<div style = "margin-top: 30px;"> <div style = "border-right: 1px solid #ddd;"> <div> <h3> inicio de sesión de usuario </h3> <div> <span id = "dimensionador-don1"> <i aria-hidden = "true"> </i> </span> <input type = "texter" name = "nombre de usuario" "nombre de usuario" "" Nombre de usuario "" "Nombre de usuario" "" aria-descripcedby = "dimension-addon1"> </div> <div> <span id = "dimension-addon1"> <i> </i> </span> <input type = "contraseña" poskholder = "contraseña" aria-descripción-descrito = "dimension-addon1"> </div> <divsy style = "text-align: center;"> <input type = "name" name "name" tea "tea" tea "tea" tea "tea" tea "tea" tea "tea" ty "tye" tyte = "tea" " maestro <input type = "radio" name = "kind" valor = "stu"> alumno </div> <botón type = "enviar"> Iniciar sesión </botón> </div> <div> <h3> Bienvenido a usar el sistema de gestión de tareas del estudiante </h3> <ul> <li> Los estudiantes usan el número de estudiante </em> para iniciar sesión. La contraseña inicial es <em> 6 1 </em>. Modifique la contraseña a tiempo después de iniciar sesión. El maestro utiliza el número de trabajo </em> para iniciar sesión. La contraseña inicial es <em> 6 1 </em>. Modifique la contraseña a tiempo después de iniciar sesión. </li> </ul> </div> </div>
Código CSS
.input-group {margin: 10px 0px; // Los márgenes superiores e inferiores del cuadro de entrada son 10px, y la izquierda y la derecha son 0px} H3 {relleno: 5px; border-bottom: 1px sólido #ddd; // h3 font fondo} li {list-type: square; // El ítem de la lista es un margen pequeño cuadrado pequeño: 10px 0px 0; Los márgenes más bajos son 10px} EM {// El color de estilo enfatizado: #C7254E; Font-Style: Herherit; Background-Color: #F9F2F4;}Lo anterior es lo que el editor le presentó para usar Bootstrap para implementar la interfaz de usuario de la interfaz de inicio de sesión del usuario. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!