Deixe -me mostrar as renderizações primeiro. Se você acha que é muito bom, continue se referindo às idéias de implementação para uma explicação detalhada.
layout
1. Metade de cada uma das esquerda e direita (col-md-6)
2. A caixa de login esquerdo é responsável por metade do lado esquerdo
3. À direita estão as precauções para fazer login no sistema
Elementos HTML usados
Bem
Grupo de entrada
Botão (BTN-Success)
Código HTML
<div style = "margin-top: 30px;"> <div style = "direita da borda: 1px sólido #ddd;"> <div> <h3> login do usuário </h3> <div> <span id = "size-addon1"> <i aria-hidden = "true"> </i> </span> <input ""> text "> ARIA-DESCRIBEDBY = "Size-addon1"> </div> <div> <span id = "size-addon1"> <i> </i> </span> <input type = "senha" placeholder = "senha" ARIA-DESCRIBLEDBY = "size-Addon1"> </div> <div estilo ""-fall "; value = "Tea"> Professor <input type = "Radio" name = "Kind" value = "Stu"> Student </div> <botão tipo = "submeter"> login </botão> </div> <div> <h3> Bem -vindo a usar o sistema de gerenciamento de casa do aluno. Modifique a senha a tempo após o login. O professor, use o número de trabalho </em> para fazer login. A senha inicial é <em> 6 1 </em>. Modifique a senha a tempo após o login. </li></ul> </div> </div>
Código CSS
.input-group {margem: 10px 0px; // As margens superior e inferior da caixa de entrada são 10px, e a esquerda e direita são 0px} h3 {preenchimento: 5px; borda-bottom: 1px sólido #ddd; // h3 font border} li {list- style-typpe: As margens superiores e inferiores são 10px} em {// a cor do estilo enfatizada: #c7254e; estilo de fonte: herdado; colorido de fundo: #f9f2f4;}O exposto acima é o que o editor apresentou a você para usar o Bootstrap para implementar a interface de login do usuário. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!