小程序注册流程说明_Bootstrap完成前端登录页面带验证码功用完好

Bootstrap实现前端登录页面带验证码功能完整示例        这篇文章主要介绍了Bootstrap实现前端登录页面带验证码功能,结合完整实例形式分析了Bootstrap前端登录页面带验证码界面布局与功能实现相关操作技巧,需要的朋友可以参考下

本文实例讲述了Bootstrap实现前端登录页面带验证码功能。分享给大家供大家参考,具体如下:

Bootstrap有自定义的验证码样式,在前端页面可以直接使用,他的css、js在使用前要在开头引入

上代码:

 !DOCTYPE html 
 html 
 head 
 meta charset="utf-8" 
 !-- 告诉浏览器网页所识别的文件类型及语言类型 -- 
 meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 
 title 登录 /title 
 !-- 让一些搜索引擎搜索到你的网页 -- 
 meta name="description" content="" 
 meta name="keywords" content="" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link rel="stylesheet" href="bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="external nofollow" 
 script src="jquery/3.2.1/jquery.min.js" /script 
 script src="popper.js/1.12.5/umd/popper.min.js" /script 
 script src="bootstrap/4.0.0-beta/js/bootstrap.min.js" /script 
 script src="tool.js" /script 
 style 
 .carousel-inner img {
 width:100%;
 height:100%;
 .jumbotron {
 margin-top: 10px;
 margin-bottom: 0px;
 padding-top: 10px;
 #demo {
 width:100%;
 height: 500px;
 .row {
 height: 264px;
 .left {
 float: left;
 width: 70%;
 .right {
 float: left;
 width: 30%;
 .card {
 height: 340px;
 .carousel-inner {
 height: 500px;
 .footer {
 position: absolute;
 bottom: 0;
 height: 60px;
 .jumheight1 {
 height: 100px;
 .jumheight2 {
 height: 100px;
 .end_name {
 margin-bottom: 5px;
 .footer2 {
 padding-top: 210px;
 text-align: center;
 .test{
 margin-bottom: 75px;
 .carousel-control-prev,
 .carousel-control-next{
 bottom: 120px;
 /style 
 /head 
 body 
 div 
 form method="post" action="{:url('index/Login/doLogin')}" 
 div 
 h1 图书阅读网 /h1 
 p 一个免费的图书网站 /p 
 /div 
 !-- 轮播图 -- 
 !-- 指示符 -- 
 div 
 div 
 div id="demo" data-ride="carousel" 
 li data-target="#demo" data-slide-to="0" /li 
 li data-target="#demo" data-slide-to="1" /li 
 li data-target="#demo" data-slide-to="2" /li 
 /ul 
 !-- 轮播图片 -- 
 div 
 div 
 img src="images/mix/img_fjords_wide.jpg" 
 /div 
 div 
 img src="images/mix/img_nature_wide.jpg" 
 /div 
 div 
 img src="images/mix/img_mountains_wide.jpg" 
 /div 
 /div 
 !-- 左右切换按钮 -- 
 a href="#demo" rel="external nofollow" rel="external nofollow" data-slide="prev" 
 span /span 
 a href="#demo" rel="external nofollow" rel="external nofollow" data-slide=next 
 span /span 
 /div 
 /div 
 div 
 !-- 登陆窗口 -- 
 div 
 div 
 用户登陆
 /div 
 div 
 form 
 table 
 label 电话号码: /label 
 /td 
 input type="text" name="username" pattern="^\d{11}" id="username" placeholder="请输入您的电话号码" 
 !-- input type="text" name="username" pattern="^\d{11}" id="username" placeholder="请输入您的电话号码" required -- 
 /td 
 /tr 
 label 密码: /label 
 /td 
 input type="password" name="password" id="password" placeholder="请输入您的密码" 
 /td 
 /tr 
 label for="captcha" 验证码: /label 
 /td 
 input type="text" name="captcha" id="captcha" placeholder="请输入验证码" 
 !-- 点击验证码更换 -- 
 div img height="50px" src="{:captcha_src()}" alt="captcha" / /div 
 /td 
 /tr 
 /table 
 div 
 button type="submit" 登陆 /button 
 button type="submit" formaction="{:url('index/Repassword/index')}" 忘记密码? /button 
 /div 
 /form 
 /div 
 /div 
 /div 
 /div 
 /div 
 /div 
 script 
 fieldTest();
 /script 
 /body 
 /html 

效果图:

这里还有轮播图,点击验证码时会更新

可以使用在线HTML/CSS/JavaScript代码运行工具:测试上述代码运行效果。

凡科抠图:关于bootstrap布局,这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用:

在线bootstrap可视化布局编辑工具:

希望本文所述对大家基于bootstrap的程序设计有所帮助。


相关阅读