使用BootStrap實現(xiàn)用戶登錄界面UI
先給大家展示下效果圖,如果大家感覺還不錯,請繼續(xù)參考實現(xiàn)思路詳解。
布局
1.左右各一半(col-md-6)
2.左側(cè)登錄框占左側(cè)一半的10/12
3.右側(cè)是登錄系統(tǒng)的注意事項
使用到的HTML元素
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> 歡迎使用學生作業(yè)管理系統(tǒng) </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{//強調(diào)的樣式 color:#c7254e; font-style: inherit; background-color: #f9f2f4; }
以上所述是小編給大家介紹的使用BootStrap實現(xiàn)用戶登錄界面UI,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Bootstrap實現(xiàn)登錄校驗表單(帶驗證碼)
- jfinal與bootstrap的登錄跳轉(zhuǎn)實戰(zhàn)演習
- php bootstrap實現(xiàn)簡單登錄
- 分享Bootstrap簡單表格、表單、登錄頁面
- Bootstrap彈出帶合法性檢查的登錄框?qū)嵗a【推薦】
- bootstrap flask登錄頁面編寫實例
- PHP實現(xiàn)登錄注冊之BootStrap表單功能
- 基于Bootstrap實現(xiàn)下拉菜單項和表單導航條(兩個菜單項,一個下拉菜單和登錄表單導航條)
- Bootstrap中文本框的寬度變窄并且加入一副驗證碼圖片的實現(xiàn)方法
- Bootstrap實現(xiàn)前端登錄頁面帶驗證碼功能完整示例
相關文章
Javascript document.referrer判斷訪客來源網(wǎng)址
用簡單幾行的javascript,就可抓到使用的來源,以及作出一些防范的措施。2009-12-12深入淺析JavaScript中prototype和proto的關系
prototype,每一個函數(shù)對象都有一個顯示的prototype屬性,而proto每個對象都有一個名為_proto_內(nèi)部隱藏屬性。本文給大家介紹JavaScript中prototype和proto的關系,需要的朋友參考下2015-11-11淺談js中用$(#ID)來作為選擇器的問題(id重復的時候)
下面小編就為大家?guī)硪黄獪\談js中用$(#ID)來作為選擇器的問題(id重復的時候)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02