Bootstrap框架-------登陆页面

最新推荐文章于 2024-09-13 22:11:32 发布
最新推荐文章于 2024-09-13 22:11:32 发布
阅读量1k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aShengzai/article/details/52739196
版权 
<span style="font-size:18px;"><strong><%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/page/common/head.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <!-- bootstrap 不支持IE的兼容模型，让IE运行最新的渲染模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 控制移动端浏览器视口的大小和缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
    <title>投票管理系统-登录</title>
    <!-- Bootstrap -->
    <link href="${path}/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <!-- 让IE8支持h5标签 -->
    <script src="${path}/http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!-- 让IE8支持媒体查询 -->
    <script src="${path}/http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      body{
            font-family: 'microsoft yahei',Arial,sans-serif;
            margin:0;
            padding:0;
        } 
       
    </style>
</head>
<body>


				<!-- Bootstrap 模态框（Modal）插件使用！ -->

      			  <!-- modal-dialog ：使悬浮框居中！ -->
             <div class="modal-dialog">
            
            	 <!-- <br> <br> <br> <br> <br> ：使悬浮框下移！ -->
                <br> <br> <br> <br> <br> 
                
                <!-- modal-content ：使悬浮框显现！ -->
                 <div class="modal-content">
                   
                    <div class="modal-header">
                        <h1 class="text-center text-primary">投票系统登录</h1>
                    </div>
                   
                    <div class="modal-body">
                        <form id="fmlogin" class="form" action="${path}/user/checklogin.action" method="post">
                            <div class="form-group">
                                <input name="account"  required="required" type="text" class="form-control input-lg" placeholder="登录账号" >
                            </div>
                            <div class="form-group">
                                <input name="password" required="required" type="password" class="form-control input-lg" placeholder="登录密码" >
                            </div>
                            <div class="form-group">
                                <button id="btnlogin" type="submit" class="btn btn-primary btn-lg btn-block">立刻登录</button>
                            </div>
                            <div id="msg" class="text-center">
                           		
                           		<!-- 内联元素：span -->
                           		<span style="color:red;font-size:20px;">${msg}</span>
                            </div>
                        </form>
                    </div>
                   
                    <div class="modal-footer">
                        <a href="#">找回密码</a>  <a href="${path}/user/register.myaction">我要注册</a>
                     </div> 
               
                </div> 
           </div> 
  

<!--  jQuery文件。务必在bootstrap.min.js 之前引入  -->
<script src="${path}/bootstrap/js/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${path}/bootstrap/js/bootstrap.min.js"></script>
</body>
<script>
    <!-- 编写脚本 -->
</script>
</html></strong></span>

aShengzai
关注
Bootstrap-02 (前台开发框架)
m0_67785100的博客
05-03 413
一.案例 ① 轮播图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- 支持手机端 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-s...
bootstrap实现登录页面
07-04
实现静态的登录页面，借助于bootstrap框架。Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
bootstrap——登录页面
Shiliang1995
06-13 1353
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆</title> <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/> <style t...
Bootstrap 5 登录页面模板安装和配置指南
gitblog_07740的博客
09-13 294
Bootstrap 5 登录页面模板安装和配置指南 bootstrap-5-login-page Login page template based on Bootstrap 5 项目地址: https://gitcode.com...
bootstrap登录页面
10-12
bootstrap 手机电脑自适应屏幕 登录页面
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 3597
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
bootstrap 免费登陆页面、登陆表单（共三款）
11-09
bootstrap-login-forms.zip bootstrap-login-forms.zip bootstrap 免费登陆页面、登陆表单（共三款）
bootstrap-login-forms.rar_bootstrap login_bootstrap 界面_动态图片_网站登陆
09-21
Bootstrap是一款广泛应用于网页设计的开源前端框架，由Twitter开发并维护。它提供了一套完整的网格系统、组件和JavaScript插件，使得开发者能够快速构建响应式、移动优先的网站。在这个"bootstrap-login-forms.rar...
coming-soon-landing-pages:即将登陆页面
05-15
在即将登陆页面中，Bootstrap可以帮助创建一致的布局、响应式的导航栏和易于使用的表单元素。在"coming-soon-landing-pages"项目中，你可能会看到Bootstrap的引用，如`<link>`标签引入Bootstrap的CSS文件，或者`...
聊天机器人登陆页面的自由引导模板- imondal007/ GoGo
01-27
【标题】"聊天机器人登陆页面的自由引导模板- imondal007/ GoGo" 涉及的核心知识点是创建一个专为聊天机器人设计的登录页面，利用Bootstrap这一流行的前端框架来实现。Bootstrap是一个开源的HTML、CSS和JS框架，它...
黑色Maruti Admin后台管理员bootstrap模板-宽屏 全屏 自适应 html5 cms 管理系统 商业 整站 登陆
12-12
Bootstrap框架提供了栅格系统、组件和JavaScript插件，简化了页面布局和交互设计。HTML5引入的新标签和API则提升了页面结构的语义化和功能强大性。而CMS的支持则使得内容的添加、修改和删除更加便捷，适合需要频繁...
基于bootstrap的简洁登录界面Html
03-28
基于bootstrap的简洁登录界面，可以直接下载使用~内置css+js
登录界面框架
10-16
QUI网页界面集成框架（原UUR框架）是一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等，并有多种皮肤样式可供选择。适合WEB开发工程师、前端制作工程师和界面设计师使用。适用于自动化办公、电子政务和RIA应用等系统的开发。经实践检验，本框架能够大幅度地提高系统开发效率，降低开发成本。 网址：http://www.quickui.net/
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版本的初始发行版（
bootstrap框架登陆框样式
04-12
用bootstrap制作的一个简单的登陆界面样式，js初学者
Bootstrap的登陆页面
m0_46319477的博客
05-26 979
【代码】Bootstrap的登陆页面。
bootstrap 一个简单的登陆页面
weixin_30292745的博客
02-10 777
效果如图：用bootstrap 写的一个简单的登陆 一、修改样式 样式可以自己调整，例如换个背景色之类的，修改background-color属性就可以 #from { background-color: #96b97d; } 我自己调的时候只给from加了背景色，当然可以给整个页...
HTML：Boostarp设计登录页面
有意栽花花不发，无心插柳柳成荫。
04-06 2747
Hello，大家好，我是wangzirui32，今天我们来学习如何使用Boostarp设计登录页面，开始学习吧！ HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
用idea基于bootstrap框架制作用户登陆和注册页面
最新发布
09-25
使用 IntelliJ IDEA 制作基于 Bootstrap 框架的用户登录和注册页面，你可以按照以下步骤操作： 1. **设置项目**: 创建一个新的 Web 项目，选择 Maven 或者 Gradle 作为构建工具，并添加 Bootstrap 和相应的前端库到项目的依赖中，比如 jQuery 和 Font Awesome。 ```markdown <!-- 在 pom.xml 或 build.gradle 中添加 Bootstrap --> <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.6.0</version> </dependency> ``` 2. **创建布局**: 使用 Bootstrap 的栅格系统创建响应式的页面布局。例如，你可以创建一个包含 header、login/register 区域以及 footer 的基本结构。 ```html <!DOCTYPE html> <html lang="zh"> <head> <!-- 引入 Bootstrap 样式 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-expand-lg bg-light"> <!-- 导航栏内容 --> </nav> <div class="container mt-5"> <div class="row justify-content-center"> <div class="col-md-6"> <h2>Login or Register</h2> <!-- 登录和注册表单将放在这里 --> </div> </div> </div> <!-- 其他必要的脚本引用 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.bundle.min.js"></script> </body> </html> ``` 3. **编写表单**: 使用 HTML 和 Bootstrap 的表单组件创建登录和注册表单，包括输入框、按钮和验证提示等。 ```html <form id="loginForm" action="/api/login" method="post"> <input type="text" class="form-control" id="username" placeholder="Username" required> <input type="password" class="form-control" id="password" placeholder="Password" required> <button type="submit" class="btn btn-primary">Login</button> </form> <form id="registerForm" action="/api/register" method="post"> <input type="text" class="form-control" id="email" placeholder="Email" required> <input type="password" class="form-control" id="password2" placeholder="Confirm Password" required> <button type="submit" class="btn btn-primary">Register</button> </form> ``` 4. **JavaScript 验证**: 可以通过 JavaScript 进行简单的表单验证，也可以利用 Bootstrap 提供的模态对话框（Modal）来显示错误信息。 5. **后端处理**: 创建 RESTful API 来处理用户的登录和注册请求。这通常涉及到数据库交互和身份认证逻辑，可以用 Java、Spring Boot 等技术栈来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值