代码：

 <!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. 2018Action Recognition from Skeleton Data via Analogical Generalization over Qualitative Representations

    论文标题: 来源/作者机构情况: Northwestern University Thirty-Second AAAI Conference on Artificial Intelligence, 2 ...

  2. RabbitMQ详解（二）------消息通信的概念

    PS:近期在南宁出差,工作比较忙,所以更新会比较慢. 说到消息通信,可能我们首先会想到的是邮箱,QQ,微信,短信等等这些通信方式,这些通信方式都有发送者,接收者,还有一个中间存储离线消息的容器.但是这 ...

  3. .Net外包篇:我是怎么看待外包的(二)

    延续上篇文章.net外包篇:我是如何看待外包的. 从这家公司辞职以后,得益于我校园信息平台和高校信息管理的经验,我进入了一个互联网类型公司.以前的经历,环环相扣,步步提升. 互联网时代 第四家客户(未 ...

  4. 网络拓扑自动发掘之三层设备惯用的SNMP OID的含义

    原文地址:https://blog.csdn.net/maty_wang/article/details/81305070 1. ipNetToMediaIfIndex Name/OID: ipNet ...

  5. Floyd最短路(带路径输出)

    摘要(以下内容来自百度) Floyd算法又称为插点法,是一种利用动态规划的思想寻找给定的加权图中多源点之间最短路径的算法,与Dijkstra算法类似. 该算法名称以创始人之一.1978年图灵奖获得者. ...

  6. Divisors of Two Integers CodeForces - 1108B （数学+思维）

    Recently you have received two positive integer numbers xx and yy. You forgot them, but you remember ...

  7. rest-framework频率组件

    throttle(访问频率)组件 1.局部视图throttle from rest_framework.throttling import BaseThrottle VISIT_RECORD={} c ...

  8. promise-笔记

    promise 封装Promise var fs = require('fs') function pReadFile(filePath) { return new Promise(function ...

  9. rest framwork 小试身手

    models.py from django.db import models class Course(models.Model): """ 课程表 "&quo ...

  10. Linux查看硬件等基本参数

    http://www.cnblogs.com/xd502djj/archive/2011/02/28/1967350.html