本文实例讲述了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的程序设计有所帮助。