代码：

 <!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. Spring Security（二十四）：6.6 The Authentication Manager and the Namespace

    The main interface which provides authentication services in Spring Security is the AuthenticationMa ...

  2. 关于学习JAVA第二章的心得

    这章主要讲了JAVA的变量,数据类型和运算符的使用方法及规则. 其实在大一的时候接触过一点C和C++的知识所以对变量,数据类型,运算符还是有一定了解的. 变量其实就是存储数据的空间.我们每次使用某一种 ...

  3. django url之path默认参数

    url path指向视图创建和更新数据 实例: from django.urls import path from . import views urlpatterns = [ path('blog/ ...

  4. Python 学习 第十三篇：数据的读写-文件、DataFrame、json

    Python的文件是一个重要的对象,使用open()函数来打开文件,创建文件对象,进行文件的读写操作.当数据用于交换信息时,通常需要把数据保存为有格式的文本数据,可以保存为有特定的行分隔符和列分隔符的 ...

  5. iOS开发简记（7）：网络请求模块

    主流的APP都少不了跟服务器交互,网络请求是少不了的事情. 开源的网络请求库,有很多,比如:AFNetworking.YTKNetwork.PPNetworkHelper.ASIHttpRequest ...

  6. JS实现一个v-if

    // 获取dom var el = document.getElementById('root'); console.log(el); // 遍历dom function dealNode(el) { ...

  7. log4j打印堆栈信息

    原文地址:https://blog.csdn.net/xianyu_0418/article/details/6043174 大家都知道,网站在运行的过程中,打印必要的log对记录网站的运行情况.从而 ...

  8. 学习用Node.js和Elasticsearch构建搜索引擎（2）：一些检索命令

    1.Elasticsearch搜索数据有两种方式. 一种方式是通过REST请求URI,发送搜索参数: 另一种是通过REST请求体,发送搜索参数.而请求体允许你包含更容易表达和可阅读的JSON格式.这个 ...

  9. Python-生成器_36

    #生成器函数 def generator(): print(1) return 'a' ret = generator() print(ret) #只要含有yield关键字的函数都是生成器函数 # y ...

  10. 牛客练习赛35 C.函数的魔法

    链接 [https://ac.nowcoder.com/acm/contest/32] 题意 题目描述 一位客人来到了此花亭,给了女服务员柚一个数学问题:我们有两个函数,F(X)函数可以让X变成(XX ...