Boostrap实现的登录界面实例代码


Posted in Javascript onOctober 09, 2016

Bootstrap它是一个开源的web开发前端框架。

这几天我看了下Bootstrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路,于是就打开了桌面的H5 builder码起来。代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框。发现问题后,第一想法是自己再定义个css进行一个控制。但是又不知道行业内的大牛是不是只用Bootstrap就能实现,而我只是没发现实现的方法。然后倔强地想要试试只用Bootstrap实现,后来各种google,百度,半小时过去了。没找到方法,所以我也只能自己写css进行布局一个div居中。其实,也不是我不懂css,只是单纯地想实现下。好了,废话少说,上个图坐镇。界面写得不好看,如有错误请大方指正。(背景图不会PS,是用别人的,若有侵权请给我发邮件或者留言,我立马换图!)。

Boostrap实现的登录界面实例代码

好了,感觉登录框不够居中。如有更好的方法,请告知我谢谢!

本界面使用的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实现的登录界面实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
html读出文本文件内容
Jan 22 Javascript
JavaScript入门教程 Cookies
Jan 31 Javascript
浅谈EasyUI中编辑treegrid的方法
Mar 01 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
js实现全选和全不选
Jul 28 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 Vue.js
深入理解bootstrap框架之第二章整体架构
Oct 09 #Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 #Javascript
深入理解bootstrap框架之入门准备
Oct 09 #Javascript
微信小程序 http请求详细介绍
Oct 09 #Javascript
微信小程序 Flex布局详解
Oct 09 #Javascript
JavaScript实现Java中Map容器的方法
Oct 09 #Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 #Javascript
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
应届毕业生的自我鉴定
2013/11/13 职场文书
活动总结格式范文
2014/04/26 职场文书
幼儿教师求职信
2014/05/24 职场文书
企业承诺书怎么写
2014/05/24 职场文书
村级四风对照检查材料
2014/08/24 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
出生证明格式
2015/06/15 职场文书
消防演习感想
2015/08/10 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android