Bootstrap 5带图标和图片校验码登录界面设计

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量1.9k 收藏 14
点赞数 2
文章标签： bootstrap vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allway2/article/details/125323177
版权 
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap 5 Sign In Form with Image Example</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
              integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
                integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    </head>

    <body>
        <div class="container-fluid vh-100" style="margin-top:50px">
            <div class="" style="margin-top:50px">
                <div class="rounded d-flex justify-content-center">
                    <div class=" col-md-4 col-sm-12 shadow-lg p-5 bg-light">
                        <div class="text-center">
                            <h3 class="text-primary">请登录</h3>
                        </div>
                        <div class="p-4">
                            <div class="input-group mb-3">
                                <span class="input-group-text bg-secondary"><i
                                        class="bi bi-person-fill text-white"></i></span>
                                <input type="text" class="form-control" placeholder="用户名">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text bg-secondary"><i
                                        class="bi bi-key-fill text-white"></i></span>
                                <input type="password" class="form-control" placeholder="密码">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text bg-secondary"><i
                                        class="bi bi-lock-fill text-white"></i></span>
                                <input type="text" class="form-control" placeholder="输入下图中的校验码">
                            </div>
                            <div class="input-group mb-3">
                                <span class="input-group-text bg-secondary"><i
                                        class="bi bi-image-fill text-white"></i></span>
                                <img src="simpleCaptcha.png" alt="CAPTCHA Image" class="img-responsive captchaImg"><button type="button" onclick="alert('Refresh Image')" class="btn btn-outline-blue"><i
                                        class="bi bi-arrow-repeat text-black"></i>
                                </button>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary px-4 float-end mt-4">登录</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

 

allway2
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
weixin_39587113的博客
06-22 606
这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍...
Java全新高大尚HTML5 bootstrap后台框架源码 java图片爬虫 自定义表单
gghhyuiiog56的博客
04-02 1556
获取【下载地址】   QQ: 313596790   【免费支持更新】 三大数据库 mysql  oracle  sqlsever   更专业、更强悍、适合不同用户群体 【新录针对本系统的视频教程，手把手教开发一个模块，快速掌握本系统】 A 集成代码生成器(开发利器);                                         技术：313596790    增
bootstrap开发登录窗口（含验证码验证）亲测有效
u011420348的博客
11-07 1212
bootstrap开发登录窗口（含验证码验证）亲测有效
基于bootstrap的12种登录注册页面模板
u012604801的博客
06-30 464
基于bootstrap的12种登录注册页面模板，分三种类型，默认简单的登录和注册，带背景图片的登录和注册，支持弹窗的登录和注册页面html下载。
使用bootstrap登录功能中表单校验以及ajax提交重置内容和状态功能
qq_43528934的博客
05-10 1341
$(function() { /* * 1. 进行表单校验配置 校验要求: (1) 用户名不能为空, 长度为2-6位 (2) 密码不能为空, 长度为6-12位 */ $(’#form’).bootstrapValidator({ // 配置图标 feedbackIcons: { valid: 'glyphicon glyphicon-ok', // 校验成功 ...
使用bootstrap画登录页面并实现表单校验与“记住我”功能
cm777的博客
07-31 9977
先贴上效果图 如何实现呢？请看下面 先引用必备css和js bootstrap.min.css font-awesome.css //字体图标 bootstrapValidator.css jquery-2.1.0.min.js bootstrap.min.js bootstrapValidator.js //表单校验 jquery.cookie.js //将用户名和...
bootstrap+jQuery.validate表单校验
lgxzzz的博客
08-31 651
谈谈表单校验 这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。 用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解： 1.正则表达式的基本了解 其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍的效果吧。 2.ajax异步请求 在验证用户名是否存在、用户登录时账号或者密码错
Bootstrap之表格，按钮，表单和图片的样式
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
05-06 6852
Bootstrap之表格，按钮，表单和图片的样式本文中，都是结合本人的学习Bootstrap时所做的练习，来理解通过内置的 CSS 定义，Bootstrap的表格，按钮，表单和图片是如何来显示各种丰富效果的。 一. 表格 基本格式<table class="table">
html5validate ajax提交,基于BootStrap与jQuery.validate实现表单提交校验功能
weixin_30958737的博客
06-11 265
谈谈表单校验这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极大的成就感，享受...
Bootstrap：bootstrapValidator表单自定义验证
热门推荐
木头
12-27 4万+
1、Bootstrap：Form 表单 在WEB开发过程中，经常遇到需要做表单提交，良好的提示增加用户体验感。在Bootstrap UI使用表单验证，构建登录界面。 2、Bootstrap：引用相关JS和CSS &amp;lt;link href=&quot;${ctxPath}/static/css/bootstrap.min.css?v=3.3.6&quot; rel=&quot;stylesheet&quot;&amp;gt; &am
bootstrap校验表单js css
02-10
通过这个插件，你可以创建出具有专业级验证功能的表单，而且无需过多关注CSS样式，因为它与Bootstrap的样式完美融合，可以很好地适应各种界面设计。同时，由于其良好的兼容性，无论在台式机还是移动设备上，都能够...
使用BootStrapValidator完成前端输入验证
11-23
BootstrapValidator是一款专为Bootstrap设计的前端表单验证插件，它可以方便地集成到基于Bootstrap构建的用户界面中，提供美观且功能丰富的验证效果。这款插件的优势在于它能够与Bootstrap的样式无缝对接，使得验证...
仿QQ登录界面源码
03-23
9. **校验文件**："仿QQ登录界面.md5"是MD5哈希值文件，常用于校验文件的完整性和未被篡改。它提供了源码文件的数字指纹，可以在下载或传输后进行验证，确保文件内容的准确性。 总的来说，这个项目涵盖了前端开发的...
单点登录源码
01-09
单点登录， SSM框架公共模块 ├── zheng-admin -- 后台管理模板 ├── zheng-ui -- 前台thymeleaf模板[端口:1000] ├── zheng-config -- 配置中心[端口:1001] ├── zheng-upms -- 用户权限管理系统 | ├── ...
网站后台登陆模板
12-08
5. **图片轮回播放**：在登录页面添加图片轮播功能可以增加视觉吸引力。这通常通过JavaScript插件如Bootstrap Carousel或Swiper实现，它们能够自动切换图片，并提供控制按钮供用户手动切换。同时，还需要考虑图片...
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 883
本文介绍了电子签名、图片合成、及预览功能
unplugin-vue-components 的作用是什么
前端原创分享，常年坚持记录和分享，全网阅读量超百万
07-25 376
总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
bootstrap html5登录界面
09-17
可以使用Bootstrap和HTML5来创建一个美观和响应式的登录界面。 首先，需要引入Bootstrap和HTML5的相关文件。可以通过在HTML文件的头部添加以下代码来实现： ``` <!DOCTYPE html> , initial-scale=1.0"> 登录...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值