먼저 렌더링을 보여 드리겠습니다. 꽤 좋다고 생각되면 자세한 설명을 위해 구현 아이디어를 계속 참조하십시오.
공들여 나열한 것
1. 각 왼쪽과 오른쪽의 절반 (COL-MD-6)
2. 왼쪽 로그인 박스는 왼쪽의 절반을 차지합니다.
3. 오른쪽에는 시스템에 로그인하는 예방 조치가 있습니다.
사용 된 HTML 요소
잘
입력 그룹
버튼 (btn-success)
HTML 코드
<div style = "margin-top : 30px;"> <div style = "Border-Right : 1px solid #ddd;"> <div> <h3> 사용자 로그인 </h3> <div> <span id = "sizing-addon1"> <i aria-hidden = "true"> </i> </span> <입력 유형 = "text" "place hellder" aria-describedby = "sizing-addon1"> </div> <div> <span id = "sizate-addon1"> <i> </i> </i> </i> </i> <input type = "placeholder ="packeter "aria-describedby ="sizing-addon1 "> </divectedby ="syize-addon1 "> </divealign : center;"<input; ""input; "" value = "tea"> 교사 <입력 유형 = "radio"name = "kind"value = "stu"> 학생 </div> <버튼 유형 = "제출"> 로그인 </div> </div> <div> <h3> 학생 숙제 관리 시스템을 사용하는 데 오신 것을 환영합니다. 로그인 한 후 제 시간에 비밀번호를 수정하십시오. 교사는 작업 번호를 사용하여 로그인하십시오. 초기 비밀번호는 <em> 6 1 </em>입니다. 로그인 한 후 시간에 비밀번호를 수정하십시오. </li> </ul> </div> </div>
CSS 코드
.Input-group {margin : 10px 0px; // 입력 상자의 상단 및 하부 마진은 10px이고 왼쪽과 오른쪽은 0px} h3 {padding : 5px; border-bottom : 1px solid #ddd; // h3 글꼴 바닥 테두리} li {listyle-type : // smarte icon; // the stalm steen a. 그리고 낮은 마진은 10px} em {// 강조된 스타일 색상 : #c7254e; font 스타일 : 상속; 배경색 : #f9f2f4;}위의 내용은 편집자가 Bootstrap을 사용하여 사용자 로그인 인터페이스 UI를 구현하도록 소개 한 것입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!