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

最新推荐文章于 2024-09-13 22:11:32 发布
最新推荐文章于 2024-09-13 22:11:32 发布
阅读量1.9k 收藏 15
点赞数 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
关注
bootstrap html5登录界面,基于Bootstrap的时尚登录界面设计
weixin_36289211的博客
06-05 1657
这是一款基于bootstrap的时尚登录界面设计效果。该登录界面使用了bootstrap的表单元素，整个设计简洁时尚，值得推荐。使用方法在页面中引入bootstrap.min.css文件。HTML结构该登录界面的HTML结构如下：登录 记住我CSS样式该登录界面的主要CSS样式如下：body {background:url(../images/login_bg_0.jpg) #f8f6e9 0 0...
bootstrap-5-login-page:基于Bootstrap 5的登录页面模板
03-06
Bootstrap 5登录页面 这是Bootstrap 5登录页面模板，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 特征 Bootstrap 5（测试版2） Bootstrap 5验证 W3C验证 包括4页（登录，注册，忘记密码，重置密码） 没有自定义类 便于使用 跨浏览器兼容性（Chrome，Firefox，Opera，IE11，Safari） 全面响应 和更多 ... 报告一些错误 发现错误？ 请，我们将对其进行修复以提供更好的模板。 贡献 始终欢迎并推荐您的贡献！ 方法如下： 分叉存储库（）。 克隆到您的机器上git clone 进行更改 创建拉取请求 变更日志 2021年3月6日 Bootstrap 5版本的初始版本 2017年8月29日 BOotstrap 4版本的初始发行版（
Bootstrap5简单实现登录页：上下左右居中
土味儿
06-28 4275
Bootstrap简单实现登录页；上下左右居中。
Bootstrap 5 登录页面模板安装和配置指南
gitblog_07740的博客
09-13 323
Bootstrap 5 登录页面模板安装和配置指南 bootstrap-5-login-page Login page template based on Bootstrap 5 项目地址: https://gitcode.com...
学习 Bootstrap 5 之 Forms
qq_37354060的博客
01-22 3978
学习 Bootstrap 5 之 概述表单 (Forms)
发现完美登录界面：Bootstrap 5 登录模板
gitblog_00004的博客
06-01 1447
发现完美登录界面：Bootstrap 5 登录模板 项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-5-login-page 在数字世界的入口处，一个优雅且功能强大的登录界面不仅是用户体验的门户，也是品牌的第一印象。今天，我们为您推荐一款由nauvalazhar精心打造的开源项目——Bootstrap 5 登录页面。这不仅仅是一个简单的HTML模板...
Bootstrap 5 登录页面项目教程
gitblog_00544的博客
08-08 412
Bootstrap 5 登录页面项目教程 项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-5-login-page 项目介绍 Bootstrap 5 登录页面项目是一个基于Bootstrap 5框架的开源项目，旨在提供一个美观且易于定制的登录页面模板。该项目由nauvalazhar开发，适用于需要快速部署登录页面的Web应用。 项目快速启动 克隆项...
免费的Bootstrap 5管理仪表板模板和登录页面-JavaScript开发
05-26
Mazer是一个管理仪表板模板，可以帮助您更快地开发。 用Bootstrap 5制成。没有jQuery依赖性。 Mazer仪表板Mazer是一个管理仪表板模板，可以帮助您更快地进行开发。 用Bootstrap 5制成。没有jQuery依赖性。 安装克隆此存储库或下载zip git clone https://github.com/zuramai/mazer打开mazer / dist / index.html以查看仪表板演示和文档打开演示页面打开文档页面打开文档页面Contributing Fork（https：/ /github.com/zuramai/mazer/fork）创建您的功能分支（git checkout -b my-new-feature）提交
Bootstrap 登录页模板
06-20
Bootstrap 登录页模板 ：共计3种风格模板，可以自己修改作为系统的登录页，比较大气
Bootstrap的登陆页面
m0_46319477的博客
05-26 1042
【代码】Bootstrap的登陆页面。
Bootstrap 5 登录页面模板安装与使用教程
gitblog_00541的博客
08-08 420
Bootstrap 5 登录页面模板安装与使用教程 项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-5-login-page 1. 项目目录结构及介绍 在下载并解压 bootstrap-5-login-page 项目后，您将看到以下的基本目录结构： bootstrap-5-login-page/ ├── css/ │ └── style.css...
简单通用登录页面模板 bootstrap登录页面 html页面
01-18
简单通用登录页面模板，用户登录界面模板，有表单验证功能。
Bootstrap实现登录校验表单(带验证码)
09-02
本文给大家介绍使用Bootstrap新制作的一个登录框，带验证码，带校验，非常不错，具有参考借鉴价值，感兴趣的朋友可以参考下
Bootstrap实现前端登录页面带验证码功能完整示例
10-15
主要介绍了Bootstrap实现前端登录页面带验证码功能,结合完整实例形式分析了Bootstrap前端登录页面带验证码界面布局与功能实现相关操作技巧,需要的朋友可以参考下
bootstrap-4-login-page：Bootstrap 4登录页面模板
01-30
我的登入 Bootstrap 4登录页面模板 我的登录名是Bootstrap 4登录页代码段，您可以根据需要使用它，并且可以免费用于个人或商业用途。 安装 让我们轻松一点！ 只需下载此模板，然后在您的项目中使用它即可。 演示版 产品特点 Bootstrap 4.1.3 Bootstrap 4验证 W3C验证 jQuery 1.12.4 包括4页（登录，注册，忘记密码，重置密码） 干净的设计 显示/隐藏密码 易于使用 跨浏览器兼容性（Chrome，Firefox，Opera，IE11，Safari） 全面响应 和更多 ... 报告一些错误 发现错误？ 请，我们将一起解决此以获得更好的模板。 贡献 始终欢迎并推荐贡献！ 方法如下： 分叉存储库（）。 克隆到您的机器上git clone 进行更改 创建请求请求 变更日志 2017年8月29日 添加 W3C验证 Bootstrap 4验证表 更新 Bootstrap 4版本 2017年8月29日 初始发行 寻找免费的管理模板？ 斯蒂斯拉在等你。 。 给我买杯咖啡 支持我:) 执照
4个bootstrap登录界面
07-12
4个bootstrap登录界面
bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证
weixin_39587113的博客
06-22 661
这大概是一种惯例，学习前台后台最开始接触的业务都是用户注册和登录。现在社会坚持以人为本的理念，在网站开发过程同样如此。User是我们面对较多的对象，也是较核心的对象。最开始的用户注册和登陆这块，也就尤为重要。用户注册和登录其实往往比我们想象的难。就比如表单校验，里面涵盖的内容其实挺多，就前台而言，你需要了解：1.正则表达式的基本了解其实正则并不难，并且在学会后能带给你极大的成就感，享受那种事半功倍...
写一个简单的网页登录界面，用bootstrap框架和组件
最新发布
09-30
要创建一个简单的网页登录界面，我们可以使用Bootstrap框架，因为它提供了一套预设计的样式和组件，使前端开发更加方便快捷。以下是一个基本的HTML示例，包含了Bootstrap的基本布局和表单组件： ```html <!DOCTYPE ...
bootstrap校验表单js css
02-10
通过这个插件，你可以创建出具有专业级验证功能的表单，而且无需过多关注CSS样式，因为它与Bootstrap的样式完美融合，可以很好地适应各种界面设计。同时，由于其良好的兼容性，无论在台式机还是移动设备上，都能够...
Bootstrap登录界面：网站登陆美化利器
Bootstrap框架中的组件、JavaScript插件以及工具类使得开发者能够方便地实现各种设计和功能，包括用户界面组件、导航、警告框、下拉菜单、按钮等。 此Bootstrap登录界面模板可能包含以下特点： 1. 响应式设计：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值