使用bootstrap框架实现简单登录页面

实现思路：从上到下，从左到右
一开始没想到怎么实现的是验证码和图片那里，实现验证码和图片那一块的布局还是一个input控件和一张图片，使用bootstrap里的input控件默认情况下，是占一行的。
<div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"> </div>
去掉form-control就不占一行了，具体实现代码如下：

<div class="form-group"><label for="code">验证码</label><!--加了form-control input独占一行--><div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px"><img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div></div><div class="clearfix"></div><button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button><button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button>

登录页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><!--引入bootstrap核心样式--><link rel="stylesheet" href="../boot/css/bootstrap.min.css"><!--引入jquery核心js文件--><script src="../boot/js/jquery-3.5.1.min.js"></script><!--引入bootstrap核心js文件--><script src="../boot/js/bootstrap.min.js"></script>
</head>
<body><div class="container"><div class="row"><div class="col-sm-6 col-sm-offset-3"><h1 class="text-center" style="margin-top:70px">用户登录</h1></div></div><div class="row"><div class="col-sm-6 col-sm-offset-3"><form><div class="form-group"><label for="exampleInputEmail1">用户名：</label><input type="text" class="form-control" id="exampleInputEmail1" placeholder="用户名"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码"></div><div class="form-group"><label for="code">验证码</label><!--加了form-control input独占一行--><div><input type="text" id="code" placeholder="请输入验证码..." style="width:55%; float:left;height:55px"><img src="../boot/imgs/aa.jpg" alt="11" style="width:220px; height:55px; float:right"></div></div><div class="clearfix"></div><button class="btn btn-danger col-sm-6" style="margin-top:10px;">登录</button><button class="btn btn-info col-sm-4 col-sm-offset-2" style="margin-top:10px">注册账号</button></form></div></div></div>
</body>
</html>

使用bootstrap框架实现简单登录页面相关推荐

【一、bootstrap框架前端注册登录页面】
一.使用bootstrap框架写一个简易的前端登录页面. 先上截图下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...
【Web】Bootstrap框架实现简单旅游网站页面
这里主要是为了熟悉以下Bootstrap框架的简单使用,采用了响应式布局. 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...
用dcloud 的h5+实现APP简单登录页面
# 简单介绍最近接到公司一个移动APP项目开发任务,公司决定采用跨端技术来实现一套代码同时兼容安卓和苹果端手机,于是我评估了一下最后决定采用dcloud平台提供mui和htlm5+技术来实现,其实现 ...
Bootstrap JQuery 制作一个登录页面
使用Bootstrap和 JQuery 制作一个简单登录页面: 链接:https://pan.baidu.com/s/1wJyL1rdVST0cVPfcbuIQlw 提取码:6666 1. 实现图片的 ...
web前端页面——移动端简单登录页面、下拉菜单（代码详细注释）
今天跟着专业老师复习了一下前端,感觉好多都已经忘记了,我将今天复习的一些重点整理出来. https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微 ...
用php mui ajax注册登录页面,ajax实现简单登录页面
本文实例为大家分享了ajax实现简单登录页面的具体代码,供大家参考,具体内容如下一.什么是ajax Ajax是一种无需重新加载整个网页,能够更新部分网页的技术. 二.ajax的工作原理 Ajax工作 ...
php的登录页面怎么弄,php登录界面_php简单登录页面
摘要腾兴网为您分享:php简单登录页面,一起成长,携程,小米社区,享家等软件知识,以及音频转文字,化学实验模拟软件,给力么,甘肃扶贫信息网,qq群成员提取工具,初中文言文全解,crossword英文 ...
html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面
使用Bootstrap框架-实现响应式页面开源案例-阿里百秀静态页面 tips 在不同设备中显示的样式页面布局思路 html css tips 这个页面里的图片忒难看,实际可以换一换在不同设备中显 ...

使用bootstrap框架实现简单登录页面

使用bootstrap框架实现简单登录页面相关推荐

最新文章

热门文章