Bootstrap它是一個開源的web開發前端框架。
這幾天我看了下Bootstrap的官方文檔。看到其中的Basic-form,突然想實現下登錄界面。然後想了下實現的思路,於是就打開了桌面的H5 builder碼起來。代碼實現起來其實不難,但是碰到個問題,就是Bootstrap的布局控制好像用.col類難以實現居中顯示,雖然可以用modal(模態框)實現彈出居中,但是我暫時不想用modal框。發現問題後,第一想法是自己再定義個css進行一個控制。但是又不知道行業內的大牛是不是只用Bootstrap就能實現,而我只是沒發現實現的方法。然後倔強地想要試試只用Bootstrap實現,後來各種google,百度,半小時過去了。沒找到方法,所以我也只能自己寫css進行布局一個div居中。其實,也不是我不懂css,只是單純地想實現下。好了,廢話少說,上個圖坐鎮。界面寫得不好看,如有錯誤請大方指正。(背景圖不會PS,是用別人的,若有侵權請給我發郵件或者留言,我立馬換圖!)。
好了,感覺登錄框不夠居中。如有更好的方法,請告知我謝謝!
本界面使用的Bootstrap是v3.3.5版本。
基本代碼:
style.css(我的css用於控制登錄框那個外部的div居中):
body { background:url(../img/login_bg_0.jpg) #f8f6e9; } .mycenter{ margin-top: 100px; margin-left: auto; margin-right: auto; height: 350px; width:500px; padding: 5%; padding-left: 5%; padding-right: 5%; } .mycenter mysign{ width: 440px; } .mycenter input,checkbox,button{ margin-top:2%; margin-left: 10%; margin-right: 10%; } .mycheckbox{ margin-top:10px; margin-left: 40px; margin-bottom: 10px; height: 10px; }
login.html(登錄的界面html代碼):
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>用戶登錄</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/style.css" /> <script src="js/bootstrap.min.js"></script> </head> <body> <form action="login.php" method="post"> <div class="mycenter"> <div class="mysign"> <div class="col-lg-11 text-center text-info"> <h2>請登錄</h2> </div> <div class="col-lg-10"> <input type="text" class="form-control" name="username" placeholder="請輸入賬戶名" required autofocus/> </div> <div class="col-lg-10"></div> <div class="col-lg-10"> <input type="password" class="form-control" name="password" placeholder="請輸入密碼" required autofocus/> </div> <div class="col-lg-10"></div> <div class="col-lg-10 mycheckbox checkbox"> <input type="checkbox" class="col-lg-1">記住密碼</input> </div> <div class="col-lg-10"></div> <div class="col-lg-10"> <button type="button" class="btn btn-success col-lg-12">登錄</button> </div> </div> </div> </form> </body> </html>
【注意】本代碼在chrome浏覽器上顯示正常,但是在IE8上有問題,代碼也沒做對IE浏覽器的支持,的確做法不對,我會後期更新的。
以上所述是小編給大家介紹的Boostrap實現的登錄界面實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!