代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <!--<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">-->

     <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">

     <title>登录注册示例</title>

     <style>

         body {

             background-color: #eee;

         }

     </style>

 </head>

 <body>

 <div>

     <div>

         <div class="col-md-4 col-md-offset-5" style="margin-top: 150px">

             <h1 class="page-header col-md-offset-2">请登录</h1>

             <form role="form">

                 <div class="form-group">

                     <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

                     <div>

                         <input type="email" id="inputEmail3" placeholder="Email">

                     </div>

                 </div>

                 <div class="form-group">

                     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

                     <div>

                         <input type="password" id="inputPassword3" placeholder="Password">

                     </div>

                 </div>

                 <div class="form-group">

                     <div class="col-sm-offset-2 col-sm-10">

                         <div>

                             <label>

                                 <input type="checkbox">记住我

                             </label>

                             <button class="btn btn-default btn-link">注册</button>

                         </div>

                     </div>

                 </div>

                 <div class="form-group">

                     <div class="col-sm-offset-2 col-sm-4">

                         <button type="submit" class="btn btn-primary btn-block">登录</button>

                     </div>

                 </div>

             </form>

         </div>

     </div>

 </div>

 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

 </body>

 </html>

截图：

Bootstrap之登陆页面范例的更多相关文章

  1. 【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面

    Bootstrap如同前台框架,它已经布置好不少的CSS.前端开发的使用须要则直接调用就可以.其站点的网址就是http://www.bootcss.com.使用Bootstrap能降低前端开发时候在C ...

  2. Springsecurity3.1.3配置多个登陆页面

    需求:网站的前台和后台不同的url需要不同的登陆页面,不同的异常捕获方式. spring-security3.1以后的版本支持多个<http>标签,因此本文所采用的方式就是使用两个,实际上 ...

  3. MUI APP防止登陆页面出现白屏

    最近在用MUI开发APP,总体效果,在IOS上,是完美的,但是在低端的Android手机上,就会出现性能问题,我个人觉得最严重的是,就是首页,就是APP打开的第一个页面,在iOS上,由于性能高,所以, ...

  4. web系统登陆页面增加验证码

    传统登陆页面中包含两个输入项: • 用户名 • 密码有时为了防止机器人进行自动登陆操作,或者防止恶意用户进行用户信息扫描,需增加动态验证码功能.此时,登陆页面中包含了三个输入项: • 用户名 • 密码 ...

  5. Ajax 提交session实效跳转到完整的登陆页面

    在spring security 中 Ajax提交时,session超时,局部加载登陆页面,为解决这个问题,重写ajax提交,返回的是modeview或者没有制定datatype时; 如果检测到加载到 ...

  6. js实现登陆页面的拖拽功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>登 ...

  7. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. iOS 本地加载html登陆页面

    Html的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 修改cas登陆页面-服务器端

    原文地址:http://www.cnblogs.com/liveandevil/archive/2013/03/06/2946341.html 1.cas统一认证的登陆页面位于:cas目录/WEB-I ...

随机推荐

  1. emqtt在centos6下的安装

    1 emqtt下载地址 http://www.emqtt.com/downloads 右键 复制链接 http://www.emqtt.com/downloads/3011/centos6 2 打开服 ...

  2. （四）surging 微服务框架使用系列之网关 转载

    一.什么是API网关 API网关是一个服务器,是系统对外的唯一入口.API网关封装了系统内部架构,为每个客户端提供一个定制的API.API网关方式的核心要点是,所有的客户端和消费端都通过统一的网关接入 ...

  3. pytorch torchvision.ImageFolder的使用

    参考:https://pytorch-cn.readthedocs.io/zh/latest/torchvision/torchvision-datasets/ torchvision.dataset ...

  4. pytorch学习-AUTOGRAD: AUTOMATIC DIFFERENTIATION自动微分

    参考:https://pytorch.org/tutorials/beginner/blitz/autograd_tutorial.html#sphx-glr-beginner-blitz-autog ...

  5. jenkins使用2----基本实例

    一.配置 1.点击新建,选择构建自由风格 2.剩下的都不动,来到构建步骤,新增一个输出hell world 3.保存后点击立即构建 二.查看日志 4.点击构建历史,再点击控制台输出 5.第三行显示 临 ...

  6. 在vue2.0中引用element-ui组件库

    element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...

  7. 4月27号开学! 第6期《jmeter实战接口自动化+性能》课程，零基础也能学

    2019年 第6期<jmeter实战接口自动化+性能>课程,4月27号开学! 主讲老师:飞天小子 上课方式:QQ群视频在线教学 本期上课时间:4月27号-6月9号,每周六.周日晚上20:0 ...

  8. 用asp.net core 把用户访问记录优化到极致

    菜菜呀,前几天做的用户空间,用户反映有时候比较慢呀 CEO,CTO,CFO于一身的CXO 是吗? 菜菜 我把你拉进用户反馈群,你解决一下呀 CEO,CTO,CFO于一身的CXO (完了,以后没清净时候 ...

  9. LeetCode 905. Sort Array By Parity

    905. Sort Array By Parity Given an array A of non-negative integers, return an array consisting of a ...

  10. A direct formulation for sparse PCA using semidefinite programming

    目录 背景 Sparse eigenvectors(单个向量的稀疏化) 初始问题(low-rank的思想?) 等价问题 最小化\(\lambda\) 得到下列问题(易推) 再来一个等价问题 条件放松( ...