先看看勞動成果

布局

左右各一半（col-md-6）

左側登錄框占左側一半的10/12

右側是登錄系統的注意事項

使用到的BootStrap元素

• well

• 輸入框組（input-group）

• 按鈕（btn-success）

HTML代碼

<div?class="row"?style="margin-top:30px;"><div?class="col-md-6"?style="border-right:1px?solid?#ddd;"> <div?class="well?col-md-10"> <h3>用戶登錄</h3><div?class="input-group?input-group-md"><span?class="input-group-addon"?id="sizing-addon1"><i?class="glyphicon?glyphicon-user"?aria-hidden="true"></i></span><input?type="text"?class="form-control"?placeholder="用戶名"?aria-describedby="sizing-addon1"></div><div?class="input-group?input-group-md"><span?class="input-group-addon"?id="sizing-addon1"><i?class="glyphicon?glyphicon-lock"></i></span><input?type="password"?class="form-control"?placeholder="密碼"?aria-describedby="sizing-addon1"></div><div?class="well?well-sm"?style="text-align:center;"><input?type="radio"?name="kind"?value="tea">?老師<input?type="radio"?name="kind"?value="stu">?學生</div><button?type="submit"?class="btn?btn-success?btn-block">登錄</button></div> </div> <div?class="col-md-6"> <h3> 歡迎使用學生作業管理系統 </h3> <ul> <li>學生使用<em>學號</em>登錄，初始密碼為<em>6個1</em>，登錄后請及時修改密碼</li> <li>老師請使用<em>工號</em>登錄，初始密碼為<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{list-style-type:square;//列表項圖標為小正方形margin:10px?0;//上下外邊距是10px}em{//強調的樣式color:#c7254e;font-style:?inherit;background-color:?#f9f2f4;}

本文首發于頂求網，轉載請注明來源

轉載于:https://www.cnblogs.com/nerd/p/5757465.html

總結

以上是生活随笔為你收集整理的使用BootStrap制作用户登录UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。