<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Sign in &middot; Twitter Bootstrap</title>

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

    <meta name="description" content="">

    <meta name="author" content="">

    <!-- Le styles -->

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

    <style type="text/css">

      body {

        padding-top: 40px;

        padding-bottom: 40px;

        background-color: #f5f5f5;

      }

      .form-signin {

        max-width: 300px;

        padding: 19px 29px 29px;

        margin: 0 auto 20px;

        background-color: #fff;

        border: 1px solid #e5e5e5;

        -webkit-border-radius: 5px;

           -moz-border-radius: 5px;

                border-radius: 5px;

        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);

           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);

                box-shadow: 0 1px 2px rgba(0,0,0,.05);

      }

      .form-signin .form-signin-heading,

      .form-signin .checkbox {

        margin-bottom: 10px;

      }

      .form-signin input[type="text"],

      .form-signin input[type="password"] {

        font-size: 16px;

        height: auto;

        margin-bottom: 15px;

        padding: 7px 9px;

      }

    </style>

    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->

    <!--[if lt IE 9]>

      <script src="../assets/js/html5shiv.js"></script>

    <![endif]-->

    <!-- Fav and touch icons -->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">

      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">

                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">

  </head>

  <body>

    <div class="container">

      <form class="form-signin">

        <h2 class="form-signin-heading">Please sign in</h2>

        <input type="text" class="input-block-level" placeholder="Email address">

        <input type="password" class="input-block-level" placeholder="Password">

        <label class="checkbox">

          <input type="checkbox" value="remember-me"> Remember me

        </label>

        <button class="btn btn-large btn-primary" type="submit">Sign in</button>

      </form>

    </div> <!-- /container -->

    <!-- Le javascript

    ================================================== -->

    <!-- Placed at the end of the document so the pages load faster -->

    <script src="../assets/js/jquery.js"></script>

    <script src="../assets/js/bootstrap-transition.js"></script>

    <script src="../assets/js/bootstrap-alert.js"></script>

    <script src="../assets/js/bootstrap-modal.js"></script>

    <script src="../assets/js/bootstrap-dropdown.js"></script>

    <script src="../assets/js/bootstrap-scrollspy.js"></script>

    <script src="../assets/js/bootstrap-tab.js"></script>

    <script src="../assets/js/bootstrap-tooltip.js"></script>

    <script src="../assets/js/bootstrap-popover.js"></script>

    <script src="../assets/js/bootstrap-button.js"></script>

    <script src="../assets/js/bootstrap-collapse.js"></script>

    <script src="../assets/js/bootstrap-carousel.js"></script>

    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>

</html>

bootstrap登录界面的更多相关文章

  1. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  2. 基于控制权限和登录验证跳转的django登录界面的实现

    django框架提供了出去登录和退出系统的login和logout的视图函数,本实现中使用系统自带的是视图函数.需要在settings.py,urls.py,views.py和模板文件等几个方面进行考 ...

  3. [实战]MVC5+EF6+MySql企业网盘实战(5)——登录界面，头像等比例压缩

    写在前面 关于该项目,已经很久没更新了.实在是找不到一个好的ui,没办法就在网上找了一个还不错的,就凑合着先用着吧,先出第一版,以后的再想着去优化.最近更新与网盘项目相关的内容是准备在项目中使用一个美 ...

  4. AJAX实现登录界面

    使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...

  5. android内部培训视频_第五节(1)_OA实战之登录界面

    第五节(1):OA实战之登录界面  一.登录界面布局 1.背景图片 2.文本框 3.checkbox 4.按钮 暂未实现点击切换图片效果 <RelativeLayout xmlns:androi ...

  6. C#-WebForm-Session、Cookie-登录验证（未登录跳至登录界面）、隐藏地址栏传值

    Post 传值(看不见的传值) Get 传值(看得见的传值) Session - 全局变量组 存放位置:服务端 作用:只要里面有内容,那么这个网站中所有的C#端都能访问到这个变量 -- object类 ...

  7. 初识Jsp，JavaBean,Servlet以及一个简单mvc模式的登录界面

    1:JSP JSP的基本语法:指令标识page,include,taglib;page指令标识常用的属性包含Language用来定义要使用的脚本语言:contentType定义JSP字符的编码和页面响 ...

  8. 很漂亮的用户登录界面HTML模板

    效果预览:http://keleyi.com/keleyi/phtml/divcss/21.htm HoverTree开源项目实现了分层后,准备实现管理员后台登录,这里先把登录界面的HTML模板整理好 ...

  9. Cookie案例：简单登录界面中的应用

    ServletDemo1.java package ztq.servlet.study; import java.io.IOException; import java.io.PrintWriter; ...

随机推荐

  1. web.xml 文件头

    Servlet 2.3 <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN ...

  2. mysql 安装部署

    如下方法 安装完成后 没有my.ini 配置文件,请结合下篇(mysql安装绑定my.ini)文章一起看. 安装包的安装方式:参考:https://www.cnblogs.com/ayyl/p/597 ...

  3. python django基础五 ORM多表操作

    首先在创建表的时候看下分析一下 1.作者表和作者详细地址表  一对一关系 理论上谁都能当主表 把Author设置成主表 au=models.OneToOneField(to='AuthorDetail ...

  4. MySQL备份工具之mysqldump使用

    MySQL备份工具之mysqldump使用说明 一.备份分类 根据能否停用数据库,将备份类型分为: 1. 冷备:数据库服务停止后备份 2. 温备:只能对数据库进行读操作,不能进行写操作 3. 热备:在 ...

  5. Elasticsearch 集群 单服务器 超级详细教程

    前言 之前了解了Elasticsearch的基本概念.将spring boot + ElasticSearch + head插件 搞通之后.紧接着对es进行下一步的探索:集群.查阅资料的过程中,找到了 ...

  6. HDU 1034(传递糖果 模拟)

    题意是一群孩子围成一个圈,每个人把手中的糖果分一半给右边的人,若分过之后手中的糖果数是奇数,则由老师提供一颗糖果给他,问这样传递多少圈所有人的糖果数都能相等,最终每人手里的糖果数是多少. 由于题中已经 ...

  7. 声源测向: TDOA-GCC-PATH方法

    收藏链接: http://www.funcwj.cn/2018/05/10/gcc-phat-for-tdoa-estimate/

  8. 简述react与vue的区别

    React 和Vue是现在主流的两个框架(相对来说angular用的已经少了) 两者的区别体现在以下方面 相同点: 1.react和vue都支持服务端渲染 2.都有虚拟DOM,组件化开发,通过prop ...

  9. fork()和僵尸进程

    2018-01-03@望京 关于fork()函数,Unix/Linux提供的fork()系统调用,fork()一次返回两次, 操作系统自动把当前进程(称为父进程)复制了一份(称为子进程),然后,分别在 ...

  10. Left join update和 ROW_NUMBER

    (1)Left join 更新update a set a.name=b.name from a left join b on a.id=b.stuid(2)ROW_NUMBERselect ROW_ ...