代码：

 <!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. java爬虫代理

    public static Document getDocByJsoups(String href) { String ip = "124.47.7.38"; int port = ...

  2. python flask里 post请求，JSON数据获取方式总结

    #!flask/bin/python #encodig=utf-8 # _*_ coding:utf-8 _*_ # Writer : byz # dateTime : 2016-08-05 from ...

  3. 获得数值型数组的所有元素之和(分别使用增强for循环和普通for循环)

    package com.Summer_0419.cn; /** * @author Summer * 获得数值型数组的所有元素之和 */public class Test_Method13 { pub ...

  4. Unity编辑器：基于NGUI的引用检测工具

    这里共享一个基于NGUI的引用检测工具.工具包括几个部分:Atlas/Sprite的引用查找:字库引用查找:UITexture引用查找:Component查找: 代码就不多介绍了,文章底部提供源码下载 ...

  5. redis底层设计（一）——内部数据结构

    redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...

  6. 【Qt】Qt Quick 之 QML 与 C++ 混合编程详解

    Qt Quick 之 QML 与 C++ 混合编程详解 - CSDN博客   专栏:Qt Quick简明教程 - CSDN博客   .

  7. HandlerThread解析

    HandlerThread是一种具有消息循环的线程.HandlerThread可以接收消息并处理消息,并执行一些耗时操作,这样UI线程就可以把一些耗时的操作命令发送给HandlerThread,由该线 ...

  8. [翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置

    [翻译] 如何在 ASP.Net Core 中使用 Consul 来存储配置 原文: USING CONSUL FOR STORING THE CONFIGURATION IN ASP.NET COR ...

  9. 2018年计划小目标（9月）PMP

    从6.23结束敏捷的系统贯穿学习考试,6.24开始做传统项目管理,系统学习计划,打包报考,(╥╯^╰╥):ACP+实战+PMP+软考,历时两个月 每天上下班路上3个小时,听录音,(报的远程班,倍速听了 ...

  10. 线程GIL锁 线程队列 回调函数

    ----------------------------------无法改变风向,可以调整风帆;无法左右天气,可以调整心情.如果事情无法改变,那就去改变观念. # # ---------------- ...