当前位置： 首页 > news >正文

2023.11.14使用bootstrap制作一个简洁的前端注册登录页

news 文章来源：https://blog.csdn.net/leigh_chen/article/details/134396094 2025/5/16 20:40:14

2023.11.14使用bootstrap制作一个简洁的前端注册登录页

比较简洁的登录页，主要是为自己开发的一些平台页面做测试用，前端具备功能如下：
（1）输入用户名、密码，需补充后端验证代码。
（2）预留注册链接。
（3）预留忘记密码链接。
（4）可自动生成验证码，需补充后端验证代码。
（5）响应式网页。
（6）使用bootstrap进行美化。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login Page</title><link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<body><div class="container"><div class="row justify-content-center mt-5"><div class="col-md-6 col-lg-4"><h3 class="text-center mb-4">Login</h3><!-- 登录表单 --><form><div class="form-group"><label for="username">Username</label><input type="text" class="form-control" id="username" placeholder="Enter username"></div><div class="form-group"><label for="password">Password</label><input type="password" class="form-control" id="password" placeholder="Enter password"></div><div class="form-group"><label for="verification-code">Verification Code</label><div class="input-group"><input type="text" class="form-control" id="verification-code" placeholder="Enter verification code"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="generate-code-btn">Generate Code</button></div></div></div><br><button type="submit" class="btn btn-primary btn-block">Login</button></form><hr><!-- 忘记密码链接 --><p class="text-center"><a href="#">Forgot password?</a></p><!-- 注册链接 --><p class="text-center">Don't have an account? <a href="#">Register</a></p></div></div>
</div><script>// 生成验证码function generateCode() {var code = Math.floor(Math.random() * 9000) + 1000;return code;}// 点击按钮生成验证码document.getElementById('generate-code-btn').addEventListener('click', function() {var verificationCodeInput = document.getElementById('verification-code');verificationCodeInput.value = generateCode();});
</script></body>
</html>

相关文章：

2023.11.14使用bootstrap制作一个简洁的前端注册登录页

2023.11.14使用bootstrap制作一个简洁的前端注册登录页 比较简洁的登录页&#xff0c;主要是为自己开发的一些平台页面做测试用&#xff0c;前端具备功能如下&#xff1a; &#xff08;1&#xff09;输入用户名、密码&#xff0c;需补充后端验证代码。 &#xff08;2&#xff…...

编程日记 2023/11/15 18:59:04

Avatar虚拟形象解决方案，趣味化的视频拍摄与直播新体验

企业们正在寻找新的方式来吸引和保持观众的注意力,一种新兴的解决方案就是使用Avatar虚拟形象技术&#xff0c;这种技术可以让用户在视频拍摄或直播场景中&#xff0c;以自定义的数字人形象出现&#xff0c;同时保持所有的表情和脸部驱动。美摄科技正是这个领域的领军者&#x…...

编程日记 2023/11/15 18:58:03

MongoDB备份与恢复以及导入导出

MongoDB备份与恢复 1、mongodump数据备份 在Mongodb中我们使用mongodump命令来备份MongoDB数据。该命令可以导出所有数据 (数据和数据结构) 或指定数据&#xff08;集合、部分集合内容&#xff09;到指定目录中。 语法&#xff1a; mongodump -h dbhost -d dbname -o dbdirec…...

编程日记 2023/11/15 18:57:02

如何挑选猫主食罐头？宠物店自用的5款猫主食罐头推荐！

临近双十二大促&#xff0c;是时候给家里的猫主子屯猫主食罐头了。许多铲屎官看大促的各种品牌宣传&#xff0c;看到眼花缭乱&#xff0c;不知道选哪些猫主食罐头好&#xff0c;胡乱选又怕踩坑。 猫罐头侠闪亮登场&#xff01;如何挑选猫主食罐头&#xff1f;作为经营宠物店7年…...

编程日记 2023/11/15 18:56:01

立哥先进研发-API安全方案

项目背景&#xff1a;随着技术进步&#xff0c;很多优秀技术也被用在黑灰产之中&#xff0c;例如爬虫系统在票务系统中的滥用&#xff0c;尤其机票系统。机票爬虫们威力之大&#xff0c;让人叹为观止&#xff1a;多数订票网站&#xff0c;真实用户产生的不到10%&#xff0c;其浏…...

编程日记 2023/11/15 18:55:00

小函数：Lambda表达式（Java篇）

Lambda表达式的使用场景&#xff1a;用以简化接口实现。 关于接口实现&#xff0c;可以有很多种方式来实现。例如&#xff1a;设计接口的实现类、使用匿名内部类。 但是lambda表达式&#xff0c;比这两种方式都简单&#xff01; lambda表达式毕竟只是⼀个匿名方法。当实现的接…...

编程日记 2023/11/15 18:53:59

RSS订阅快速连接Notion

数环通让您可以通过不到几分钟的时间即可实现RSS订阅与Notion的对接与集成&#xff0c;从而高效实现工作流程自动化&#xff0c;降本增效&#xff01; 1.产品介绍 RSS订阅是数环通的内置应用&#xff0c;很多用户通过RSS订阅来收集自己在各大平台上看的内容&#xff0c;当RSS…...

编程日记 2023/11/15 18:52:57

VMware ubuntu 新虚拟机的创建

根据自己指定的路径安装好vm后。 创建新的虚拟机。 记录一下&#xff0c;下次用到别再忘记了。 如需转载&#xff0c;注明出处&#xff01; 点赞收藏关注我 以资鼓励 打开vm 软件&#xff0c;点击创建新的虚拟机 选择典型&#xff0c;点击下一步 选择你的ubuntu镜像iso文件 …...

编程日记 2023/11/15 18:51:56

第一篇 《随机点名答题系统》简介及设计流程图（类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统）

专栏目录 第一篇 《随机点名答题系统》简介及设计流程图&#xff08;类抽奖系统、在线答题系统、线上答题系统、在线点名系统、线上点名系统、在线考试系统、线上考试系统&#xff09;-CSDN博客 第二篇 《随机点名答题系统》——题库管理详解&#xff08;类抽奖系统、在线答题…...

编程日记 2023/11/15 18:50:55

C# .NET6 Log4net输出日志

C# Log4Net用法-CSDN博客: .NET6.0的日志组件Log4net_.net log4net-CSDN博客 在 C# .NET6 开发中&#xff0c;log4net 是一个常用的日志记录框架&#xff0c;它可以帮助我们方便地输出日志信息。本教程将向你展示如何在 C# .NET6 中实现 log4net 的日志输出功能。 整体流程 下…...

编程日记 2023/11/15 18:48:50

python数据结构与算法-03_链表

链式结构 上一节讲到了支持随机访问的线性结构&#xff0c;这次我们开始讲链式结构, 视频里我会说下这两种结构的区别&#xff0c;然后讲解最常见的单链表和双链表。 之前在专栏文章那些年&#xff0c;我们一起跪过的算法题[视频]里实现过一个 lru_cache&#xff0c; 使用到的…...

编程日记 2023/11/15 18:47:49

Springboot-aop的使用

aop:面向切面编程&#xff0c;可以看作是面向对象的补充 举例 1.依赖 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.1</version><relativePath/>…...

编程日记 2023/11/15 18:46:48

数列计算

题目描述 有一列数是 : 请找出这个数列的规律&#xff0c;编写程序计算并输出这个数列的第项&#xff0c;要求是分数形式&#xff0c;并计算这个数列的前项和 ( 结果四舍五入保留两位小数 ) 输入格式 第一行仅有一个正整数 &#xff08;) 。 输出格式 共有 行&#xff0c;第一…...

编程日记 2023/11/15 18:45:47

阿里云全球故障凸显“云集中”风险

阿里云12日发生的全球性故障再次将“云集中风险”推上风口浪尖。这一公有云史上罕见的事件不仅影响了数以万计的企业和服务&#xff0c;也引发了对云服务集中化趋势的深刻反思。 2023年11月12日17:44(GMT8)开始&#xff0c;阿里云基础设施发生严重故障&#xff0c;导致阿里巴巴…...

编程日记 2023/11/15 18:44:44

【2015年数据结构真题】

用单链表保存m个整数&#xff0c;结点的结构为 [data] [link]&#xff0c;且|data|<n(n为正整数)。现要求设计一个时问复杂度尽可能高效的算法&#xff0c;对于链表中 data 的绝对值相等的结点&#xff0c;仅保留第一次出现的结点而删除其余绝对值相等的结点。例如&#xff…...

编程日记 2023/11/15 18:43:43

vxe表格行拖拽

安装第三方插件 import Sortable from sortablejs 可以跟后端商议表格添加seq 顺序&#xff0c; 按照循序排序 secondInput 调用 修改接口api 然后重新获取数据 //在get 请求之后 使用nextTick 使用 const rowDrop () > {nextTick(() > {let xTable2 planDat…...

编程日记 2023/11/15 18:42:42

Linux之基本指令操作

1、whoami whoami&#xff1a;查看当前账号是谁 2、who who&#xff1a;查看当前我的系统当中有哪些用户&#xff0c;当前有哪些人登录了我的机器 3、 pwd pwd&#xff1a;查看我当前所处的目录&#xff0c;就好比Windows下的路径 4、ls ls&#xff1a;查看当前目录下的文件信…...

编程日记 2023/11/15 18:41:40

海康设备、LiveNVR等通过GB35114国密协议对接到LiveGBS GB28181/GB35114平台的详细操作说明

一、LiveNVR通过GB35114接入LiveGBS 1.1 开启LiveGBS 35114功能 信令服务livecms.ini配置文件中[sip]增加一行gm1 启动LiveCMS 1.2 生成设备端证书 我们用LiveNVR做为设备端向LiveGBS注册&#xff0c;这里先生成LiveNVR的设备证书&#xff0c;并将LiveNVR的设备证书给LiveGB…...

编程日记 2023/11/15 18:39:38

BUUCTF 面具下的flag 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;得到一张.jpg图片。 密文&#xff1a; 解题思路&#xff1a; 1、将图片放到Kali中&#xff0c;使用binwalk检测出隐藏zip包。 使用foremost提取zip压缩包到output目录下 解压zip压缩包&…...

编程日记 2023/11/15 18:38:37

ArcGIS实现矢量区域内所有要素的统计计算

1、任务需求&#xff1a;统计全球各国所有一级行政区相关属性的总和。 &#xff08;1&#xff09;有一个全球一级行政区的矢量图&#xff0c;包含以下属性&#xff08;洪灾相关属性 province.shp&#xff09; &#xff08;2&#xff09;需要按照国家来统计各个国家各属性的总值…...

编程日记 2023/11/15 18:35:33

3.4-初识Container

常用的docker container命令&#xff1a; 1、基于image创建docker container命令&#xff1a; docker run lvdapiaoliang/hello-docker 2、列举当前本地正在运行的container容器命令&#xff1a; docker container ls 3、列举当前本地所有的container容器命令(包括正在运行的和…...

编程日记 2023/11/15 18:32:28

壹基金爱泽瑞金 安全家园物料配送忙

11月9日到10日&#xff0c;瑞金赋能公益陆续收到壹基金、阿里巴巴公益爱心网友捐赠的社区志愿者救援队队伍物资&#xff0c;马不停蹄地把物资配送到河背街社区、金都社区和沙洲坝镇等项目点&#xff0c;扎实稳妥推进项目有序执行。 在这次物资配送中&#xff0c;志愿者冒雨前行…...

编程日记 2023/11/15 18:31:27

arcgis--二维建筑面的三维显示设置

1、打开ArcScene软件&#xff0c;导入数据&#xff0c;如下&#xff1a; 2、 对建筑面进行拉伸。双击建筑物面图层&#xff0c;打开属性表&#xff0c;选择【拉伸】选项卡&#xff0c;参数设置如下&#xff1a; 显示结果如下&#xff1a;...

编程日记 2023/11/15 18:30:26

Maven 插件统一修改聚合工程项目版本号

目录 引言直接修改 pom.xml 的版本号的问题Maven 插件修改版本号开源项目微服务商城项目前后端分离项目 引言 在Maven项目中&#xff0c;我们通常有两种常见的方式来修改版本号&#xff1a;直接在pom.xml文件中手动编辑和利用Maven插件进行版本号调整。 本文将比较这两种修改…...

编程日记 2023/11/15 18:28:24

主从复制和读写分离

MySQL 主从复制和读写分离&#xff1a; 主从复制&#xff1a;主MySQL上的数据&#xff0c;新增&#xff0c;修改库&#xff0c;表&#xff0c;表里的数据&#xff0c;都会同步到从MySQL上。 MySQL的主从复制的模式&#xff1a;&#xff08;面试题&#xff09; 1&#xff0c;异…...

编程日记 2023/11/15 18:27:21

Redis模块的高级使用方式

Redis 模块是Redis的高级功能&#xff0c;允许我们实现特定的自定义数据类型。本质上&#xff0c;模块是一个动态库&#xff0c;可以在启动时或根据命令按需加载到 Redis 中 MODULE LOAD 。模块可以用多种语言编写&#xff0c;包括 C 和 Rust。 我们自己使用 Redis 模块实现新…...

编程日记 2023/11/15 18:26:19

Failed to restart network.service: Unit network.service not found.

执行systemctl restart network命令&#xff0c;报错Failed to restart network.service: Unit network.service not found. 执行 yum install network-scripts命令 再次执行&#xff0c;正常...

编程日记 2023/11/15 18:25:18

wiki.js一个开源知识库系统

1 什么是wiki wiki.js是一个开源Wiki应用程序&#xff0c;官网介绍为&#xff1a; A modern, lightweight and powerful wiki app built on NodeJS 访问Github&#xff1a;github 访问Wike&#xff1a;js.wiki 省流总结 开源知识库平台&#xff0c;和语雀有一样的功能&…...

编程日记 2023/11/15 18:24:17

关于Java抽象类和接口的总结和一点个人的看法

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ ა 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如需转载还请通知˶⍤⃝˶个人主页&am…...

编程日记 2023/11/15 18:22:12

vue中ref的用法

vue中ref的用法 在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下. 1.绑定在dom元素上时&#xff0c;用起来与id差不多&#xff0c;通过this.$refs来调用: <div id"passCarEchart" ref"passCarEch…...

编程日记 2023/11/15 18:20:08