Let me show you the renderings first. If you feel that it is pretty good, please continue to refer to the implementation ideas for detailed explanation.
layout
1. Half of each of the left and right (col-md-6)
2. The left login box accounts for half of the left side
3. On the right are the precautions for logging in to the system
HTML elements used
Well
Input-group
Button (btn-success)
HTML code
<div style="margin-top:30px;"><div style="border-right:1px solid #ddd;"><div><h3>User login</h3><div><span id="sizing-addon1"><i aria-hidden="true"></i></span><input type="text" placeholder="user name" aria-describedby="sizing-addon1"></div><div><span id="sizing-addon1"><i></i></span><input type="password" placeholder="password" aria-describedby="sizing-addon1"></div><div style="text-align:center;"><input type="radio" name="kind" value="tea"> teacher<input type="radio" name="kind" value="stu"> student</div><button type="submit">Login</button></div></div><div><h3>Welcome to use the student homework management system</h3><ul><li>Students use the student number</em> to log in. The initial password is <em>6 1</em>. Please modify the password in time after logging in. The teacher please use the work number</em> to log in. The initial password is <em>6 1</em>. Please modify the password in time after logging in.</li></ul></div></div>
CSS Code
.input-group{margin:10px 0px;//The upper and lower margins of the input box are 10px, and the left and right are 0px}h3{padding:5px;border-bottom:1px solid #ddd;//h3 font bottom border}li{list-style-type:square;//The list item icon is a small square margin:10px 0;//The upper and lower margins are 10px}em{//The emphasized style color:#c7254e;font-style: inherit;background-color: #f9f2f4;}The above is what the editor introduced to you to use BootStrap to implement the user login interface UI. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support to Wulin.com website!