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 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 Javascript
使用AngularJS2中的指令实现按钮的切换效果
Mar 27 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
js的新生代垃圾回收知识点总结
Aug 22 Javascript
js实现简单进度条效果
Mar 25 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
深入理解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
php模拟登陆的实现方法分析
2015/01/09 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
JavaScript中的eval()函数使用介绍
2014/12/31 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
2018/02/08 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
pip命令无法使用的解决方法
2018/06/12 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
C#面试题
2016/05/06 面试题
六一儿童节活动策划方案
2014/01/27 职场文书
不假外出检讨书
2014/01/27 职场文书
葬礼司仪主持词
2014/03/31 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
趣味运动会开幕词
2015/01/28 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
python3读取文件指定行的三种方法
2021/05/24 Python
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
python运算符之与用户交互
2022/04/13 Python