登录界面BootStramp模板

2023-11-16

一、效果图

二、代码部分 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3" style="height: 410px;border: 1px solid black;margin-top: 80px; border-radius: 8px; ">
            <div class="row">
                <!--                登录-->
                <div class="col-md-12" style="text-align: center;font-size: 50px;font-weight: bold;margin-top: 50px;">
                    登录
                </div>
            </div>
            <div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
                <div class="col-md-6 col-md-offset-3">
                    <label>用户名</label>
                    <input type="text" class="form-control" />
                </div>
            </div>
            <!--                div bootstrap行-->
            <div class="row" style="height: 60px;font-size: 20px;margin-top: 20px">
                <div class="col-md-6 col-md-offset-3">
                    <label>密码</label>
                    <input type="password" class="form-control" />
                </div>
            </div>
            <div class="row" style="height: 60px;margin-bottom: 20px;margin-top: 40px">
                <div class="col-md-8 col-md-offset-2" style="text-align: center">
                    <button class="btn btn-primary" style="margin-right: 8px;" >登录</button>
                    <button class="btn btn-default" >重置</button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

方便大家使用和调用,节省代码时间

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

登录界面BootStramp模板 的相关文章

  • 计算div中有多少个元素

    我有一个div 里面有span 有没有一种方法可以计算 div 中有多少个元素 然后将其作为值给出 例如 一个 div 中有 5 个跨度 那么它会对其进行计数并发出警报 5 请使用 JavaScript 谢谢 如果你想要后代的数量 你可以使
  • 如何将毫秒转换为可读的日期?

    下列 new Date 1324339200000 toUTCString Outputs Tue 20 Dec 2011 00 00 00 GMT 我需要它返回Dec 20 除了我可以使用的更好的方法之外toUTCString 我正在寻找
  • 使用 Moment.js 从 ISO 字符串中提取 utcOffset

    使用 moment js 我尝试从 ISO 日期字符串中提取偏移量 以便稍后在格式化纪元时间戳时使用该偏移量 以确保时间戳的转换位于同一时区 即使字符串中的偏移量为 0400 结果始终为0 var currentTime 2015 03 1
  • 如何验证单选按钮?

    我的 Rails 应用程序中有一个单选按钮 我想编写一个 java 脚本代码 在未选择任何选项时验证这一点 在你的 votes 类中做类似的事情 class Myvotes lt ActiveRecord Base validates vo
  • React:未捕获的引用错误:未定义需求

    我正在阅读 React 教程 http facebook github io react docs animation html http facebook github io react docs animation html 并且我无法
  • 为 Promise 编写循环的正确方法。

    如何正确构造循环以确保满足以下条件承诺电话和被束缚的记录器 log res 通过迭代同步运行 蓝鸟 db getUser email then function res logger log res this is a promise 我尝
  • React-Router v5 History.push 不触发组件

    很抱歉朋友们又问这个问题了 我找到了解决这个问题的几个方法 但他们让我很困惑 我只是想问一个优雅的方法来做到这一点 正如你通过标题所理解的 我有一个关于反应路由的问题 让我解释 我有一个按钮 其名称是Login 单击按钮后 我执行了一些逻辑
  • 无法将中间件与 Firebase 和 NuxtJS 3 一起使用

    我正在尝试在示例项目中使用 Firebase 身份验证 身份验证按预期工作 但是一旦我想使用中间件来阻止用户访问管理页面或在已经登录的情况下访问登录页面 这是不可能的 我已经尝试了几个小时 但没有任何效果 这是我的package json
  • ES6 Promises/在满足多个 Promise 后调用函数(不能使用 Promises.all)[重复]

    这个问题在这里已经有答案了 我正在编写 Javascript 它需要这些事件按以下顺序发生 同时触发多个 API 调用 所有调用完成且响应返回后 执行一行代码 听起来很简单 但棘手的部分是我不能使用 Promises all 因为我仍然希望
  • 在javascript中通过window.location传递数据

    我试图通过 window location 传递数据 数据在 del id img album 中可用 我想通过 window location 发送多个值 window location save php type deldownload
  • 为什么 if 语句中的赋值等于 true?

    首先我要说的是我理解两者之间的区别 and 第一个用于将右侧值分配给左侧变量 第二个用于比较两个值的等价性 第三个不仅用于等价性 还用于类型比较 即true 1会回来false 所以我知道almost任何时候你看到if 作者很有可能打算使用
  • 如何设置第三方 cookie

    我如何设置第三方 cookie 我有要求设置cookie 并且cookie将在访问的网站中启用 就像我在访问cde com或def com或ghi com时在abc com中设置cookie一样 所以设置的cookie将在所有网站上获取 我
  • 脚本标签内的 Razor RenderSection - 如何将脚本从视图插入模板函数

    我正在使用 MVC 3 和 Razor 视图引擎 我想将多个视图中的脚本注入到一个集中定义的视图中 document ready 母版页中的功能 我已经尝试过以下方法 在我的大师看来 然后 section DocumentReady ale
  • :目标选择器不适用于选项标签

    我试图在这里帮助一位 StackOverflow 成员 我发现 CSS target选择器不适用于选项标签 我创建了一个示例来说明使用w3schools 教程 http www w3schools com cssref tryit asp
  • jQuery.ajax() 记录 HTTP 请求

    我有一个发送 HTTP POST 请求的函数 我想记录它以进行调试 这是函数 function serverRequest URL DATA callback ajax url URL type POST dataType text con
  • 检测未定义的对象属性

    如何检查 JavaScript 中的对象属性是否未定义 检查属性值是否为特殊值的常用方法undefined is if o myProperty undefined alert myProperty value is the special
  • 如何找出javascript中加载了哪些javascript?

    继另一个问题的评论之后 我问自己是否有办法获取页面上加载的所有 js 代码的列表 就像 Firebug 或 chrome Inspector 所做的那样 有没有一种纯javascript的方法 一种方法是抓取脚本标签 但这样你可能会错过动态
  • 来自 ajax 的 Bootstrap 表 json

    我有 ajax 和 bootstrap 表的问题 我有一个 ajax JSON 我用这个方法调用 document ready function ajax url php process php method fetchdata dataT
  • 为什么转换 new.Date() .toISOString() 会改变时间?

    我正在以两种不同的格式在数据库中插入日期 这是作为日期时间插入 var mydate mydate new Date document getElementById clockinhour value mydate toISOString
  • 为什么插入符号在具有position:relative的contenteditable中不可见?

    When a contenteditable元素有position relative和背景颜色 插入符号放置在该元素中时是不可见的 这是一个例子 bug position relative background color lightgre

随机推荐

  • bugku ctf web4 (看看源代码吧)

    打开打开 刚刚有个sb问我借lol号玩 浪费时间 继续干正事 随便输入后 提示 再好好看看 出题人语文肯定不好 应该是这个 再 吧 那我们查看源码
  • 深聊性能测试,从入门到放弃之:Locust性能自动化(一)初识Locust

    初识Locust 1 Locust基本介绍 1 1 引言 1 2 简介 2 Locust安装方式 2 1 安装 locust 2 2 安装pyzmq 2 3 安装成功确认 3 Locust 参数说明 3 1 参数信息 3 2 参数信息解析
  • Android视频开发

    http www jianshu com u a32db45d4859
  • Windows 批量重命名文件(支持正则表达式)

    今天整理了一批文件 命名有点上乱 所以想批量修改一下 在网上找了一工具 叫Ant Renamer 相当不错 主界面如下 操作步骤很简单 1 添加文件或文件夹 支持自动递所有子目录 2 操作 在这里设置重命名的参数 3 然后点击 开始 即可
  • 读取文件大小(小数点后保留两位)

    获取文件大小 public static String getSize File file double d DecimalFormat df new DecimalFormat 00 long length file length if
  • 配额限制出现“limit函数未实现”解决方法

    磁盘配额限制的步骤分为 安装quota和xfsprogs软件包 制定挂载条件 mount o usrquota grpquota dev 卷组名 逻辑卷名 限制磁盘使用量空间 xfs quota x c limit u bsoft 80M
  • 时序图中if else画法

    进入扩展程序安装 File gt Settings gt Plugins gt Browse Repositories 搜索 SequenceDiagram 点击右边 Install 安装 然后重启 IDEA 在需要生成流程时序图的方法 右
  • 企业网络安全设计与综合实施方案

    1 企业网络安全需求 企业网络安全需求大致分为三部分 但是在设计对应的网络安全技术方案时 通常根据企业结构划分网络 从五个方面制定方案 某游戏公司当前的企业网络拓扑如右图所示 考虑到该公司运行的业务可能面临众多安全威胁 需要网络实施工程师针
  • 《离散数学》速成-练习题答案(含题目)

    离散数学 速成 https blog csdn net aiqq136 article details 113445181 课时1 课时2 课时3 课时4 课时5 课时6 课时7 课时8 课时9 课时10 课时11 课时12 课时13 课时
  • Scrapy初识与创建

    Scrapy 是一套基于基于Twisted的异步处理框架 纯python实现的爬虫框架 用户只需要定制开发几个模块就可以轻松的实现一个爬虫 用来抓取网页内容以及各种图片 非常之方便 一 安装 Scrapy框架因为功能十分强大 所以依赖很多库
  • coverage代码覆盖率测试工具:基本原理分析与使用

    coverage环境描述 本文环境python3 5 2 coverage版本4 3 1 coverage概述 代码覆盖率工具主要是为了检查测试用例覆盖了多少业务处理代码 在Django项目中 通过编写的测试用例 来检查后端业务逻辑接口的逻
  • Struts2验证框架

    1 Struts2提供了验证框架 功能强大而且简单易用 帮助用户做了很多事情 使得用户不必从头开发 那么一个好的验证框架需要考虑哪些因素呢 1 验证功能的复用性 比如都是对一个int数据类型的验证 验证的是它的数据范围 如果验证功能抽象的好
  • Intellij IDEA炫酷的插件

    1 日晒主题 Solarized Themes 背景图可是另外的插件设置的哈Background Image Plus 在 IntelliJ 系列编辑器 中循环显示随机背景图像 可以通过设置页 Settings gt Appearance
  • 别再问我怎么Python打包成exe了!

    作者 Python进阶者来源 Python爬虫与数据挖掘 阅读文本大概需要 10 分钟 前言 也许我们不一定是专业的程序员 但是我们仍然可以通过代码提高我们的效率 尽量少加班 多陪陪媳妇 如果有 再不行 让代码替我们干着重复的工作 我们有节
  • BigDecimal保留两位小数

    天行健 君子以自强不息 地势坤 君子以厚德载物 每个人都有惰性 但不断学习是好好生活的根本 共勉 文章均为学习整理笔记 分享记录为主 如有错误请指正 共同学习进步 BigDecimal保留两位小数 保留两位小数 1 setScale 2 D
  • vue脚手架-上传图片 编辑修改图片(三)

    需求 点击编辑图案的时候 需要弹出框 里面除了能修改图片信息之外 还得能够更换图片 此篇文章主要讲述如何更换图片 因为时更改单张图片的 所以特别想更换头像 有没有 因此我使用了element ui中的更换头像的插件来写的 H5中更换图片的部
  • Flutter 完整示例

    经过这一段对 Flutter 的了解和接触 掌握如何完整使用 Flutter 开发一个项目 实际上 在 Flutter 中 一切皆 widget 我们的界面都是由各种 widget 堆叠出来的 一个 Flutter 工程涉及以下几个要点 工
  • WINDOWS窗体应用程序与WPF应用程序的区别?

    WINDOWS窗体应用程序与WPF应用程序的区别 用WPF更容易做的漂亮 感觉有以下几个大区别 WPF的线程模型和winform的线程模型不同 WPF到处用到数据绑定 winform在列表中才用的多 WPF支持3D winform本身没有
  • Ubuntu20.04安装NVIDIA混合精度计算库apex全流程及各类报错问题解答

    目录 一 安装CUDA 二 安装apex 三 各类报错问题解决 3 1 C 编译错误 3 2 Apex优化算子错误 3 3 CUDA错误 3 4 g 或gcc错误 背景 跟李沐老师一起探索RTX 3090的深度学习浮点运算性能 需要安装ap
  • 登录界面BootStramp模板

    一 效果图 二 代码部分