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實現的登錄界面實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
