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

最新推荐文章于 2025-03-14 15:28:02 发布
最新推荐文章于 2025-03-14 15:28:02 发布
阅读量1.1k 收藏 4
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 442
一.案例 ① 轮播图 <!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 1410
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆</title> <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css"/> <style t...
Bootstrap打造简洁登录界面的设计与效果展示
最新发布
weixin_42527589的博客
03-14 850
Bootstrap诞生于Twitter内部，其初衷是为了统一和加速产品的开发流程。自2011年发布以来，它迅速成为最流行的前端框架，并且随着互联网技术的发展，Bootstrap也在不断进化，至今已更新至第五版，即Bootstrap 5，引入了许多现代化的特性，如更灵活的网格系统和更纯净的CSS。虽然Bootstrap提供了默认的主题样式，但为了满足个性化需求，Bootstrap也支持自定义主题。
bootstrap登录页面
10-12
bootstrap 手机电脑自适应屏幕 登录页面
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 4145
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文件，或者`...
Bootstrap 1-2021版登陆页面开发指南
综上所述，通过“Landing-page-bootstrap-1-2021”这一文件信息，我们可以深入了解到使用Bootstrap框架开发响应式登陆页面时所涉及的一系列知识点，包括框架的使用、响应式设计、HTML/CSS/JavaScript的应用、项目...
聊天机器人登陆页面的自由引导模板- imondal007/ GoGo
01-27
【标题】"聊天机器人登陆页面的自由引导模板- imondal007/ GoGo" 涉及的核心知识点是创建一个专为聊天机器人设计的登录页面，利用Bootstrap这一流行的前端框架来实现。Bootstrap是一个开源的HTML、CSS和JS框架，它...
基于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 1244
【代码】Bootstrap的登陆页面。
bootstrap 一个简单的登陆页面
weixin_30292745的博客
02-10 799
效果如图：用bootstrap 写的一个简单的登陆 一、修改样式 样式可以自己调整，例如换个背景色之类的，修改background-color属性就可以 #from { background-color: #96b97d; } 我自己调的时候只给from加了背景色，当然可以给整个页...
HTML：Boostarp设计登录页面
有意栽花花不发，无心插柳柳成荫。
04-06 2800
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
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值