快捷導(dǎo)航

Boostrap實(shí)現(xiàn)的登錄界面實(shí)例代碼

更新時(shí)間：2016年10月09日 17:12:10 作者：GoGoCoder

Bootstrap它是一個(gè)開(kāi)源的web開(kāi)發(fā)前端框架。本界面使用的Bootstrap是v3.3.5版本。這篇文章給大家?guī)?lái)了詳細(xì)的實(shí)現(xiàn)代碼，非常不錯(cuò)，感興趣的朋友一起看看吧

Bootstrap它是一個(gè)開(kāi)源的web開(kāi)發(fā)前端框架。

這幾天我看了下Bootstrap的官方文檔?？吹狡渲械腂asic-form,突然想實(shí)現(xiàn)下登錄界面。然后想了下實(shí)現(xiàn)的思路，于是就打開(kāi)了桌面的H5 builder碼起來(lái)。代碼實(shí)現(xiàn)起來(lái)其實(shí)不難，但是碰到個(gè)問(wèn)題，就是Bootstrap的布局控制好像用.col類(lèi)難以實(shí)現(xiàn)居中顯示，雖然可以用modal（模態(tài)框）實(shí)現(xiàn)彈出居中,但是我暫時(shí)不想用modal框。發(fā)現(xiàn)問(wèn)題后，第一想法是自己再定義個(gè)css進(jìn)行一個(gè)控制。但是又不知道行業(yè)內(nèi)的大牛是不是只用Bootstrap就能實(shí)現(xiàn)，而我只是沒(méi)發(fā)現(xiàn)實(shí)現(xiàn)的方法。然后倔強(qiáng)地想要試試只用Bootstrap實(shí)現(xiàn)，后來(lái)各種google，百度，半小時(shí)過(guò)去了。沒(méi)找到方法，所以我也只能自己寫(xiě)css進(jìn)行布局一個(gè)div居中。其實(shí)，也不是我不懂css，只是單純地想實(shí)現(xiàn)下。好了，廢話(huà)少說(shuō)，上個(gè)圖坐鎮(zhèn)。界面寫(xiě)得不好看，如有錯(cuò)誤請(qǐng)大方指正。（背景圖不會(huì)PS，是用別人的，若有侵權(quán)請(qǐng)給我發(fā)郵件或者留言，我立馬換圖?。?/p>

好了，感覺(jué)登錄框不夠居中。如有更好的方法，請(qǐng)告知我謝謝！

本界面使用的Bootstrap是v3.3.5版本。

基本代碼：

style.css(我的css用于控制登錄框那個(gè)外部的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>用戶(hù)登錄</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>請(qǐng)登錄</h2>
</div>
<div class="col-lg-10">
<input type="text" class="form-control" name="username" placeholder="請(qǐng)輸入賬戶(hù)名" required autofocus/>
</div>
<div class="col-lg-10"></div>
<div class="col-lg-10">
<input type="password" class="form-control" name="password" placeholder="請(qǐng)輸入密碼" 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上有問(wèn)題,代碼也沒(méi)做對(duì)IE瀏覽器的支持，的確做法不對(duì)，我會(huì)后期更新的。

以上所述是小編給大家介紹的Boostrap實(shí)現(xiàn)的登錄界面實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: