引入需要的bootstrap文件

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>登录界面</title>

    <!--01.引入需要的css样式文件-->

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

    <!--02.引入我们的jQuery库-->

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    <!--03.引入bootstrap的js库-->

    <script type="text/javascript" src="js/bootstrap.js"></script>

</head>

<body>

<!--container:我们的代码写在这个容器中   就会具有一些样式-->

<div class="container">

    <!--设置字体图标 class="glyphicon glyphicon-user"-->

     <h1 class="page-header"><span class="glyphicon glyphicon-user"></span> 用户登录</h1>

    <form class="form-horizontal">

         <div  class="form-group">

             <div class="col-md-5">

             <input type="text" class="form-control" placeholder="请输入用户名/email">

             </div>

         </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="text" class="form-control" placeholder="请输入密码">

            </div>

        </div>

        <div  class="form-group">

            <div class="col-md-5">

                <input type="button" class="btn btn-primary btn-block" value="登录">

            </div>

        </div>

    </form>

</div>

</body>

</html>

效果图

bootstrap01登录小例子的更多相关文章

  1. JSP小例子——实现用户登录小例子（不涉及DB操作）

    实现用户登录小例子用户名和密码都为"admin",登陆成功使用服务器内部转发到login_success.jsp页面,并且提示登陆成功的用户名.如果登陆失败则请求重定向到login ...

  2. Struts2登录小例子

    前面实现了一个数据显示的例子,下面我来实现以下使用Struts2登录 首先是配置不用过多解释 注意名字要和类名保持一致 因为实现的是action这个方法所以需要用action.log来跳转到类里面 解 ...

  3. JSP小例子——以Model1的思想实现用户登录小例子（不涉及DB操作）

    Model1简介现在比较流行的就是Model1和Model2,这里介绍Model1.在Model1模型出现前,整个Web应用的情况是:几乎全部由JSP页面组成,JSP页面接受处理客户端请求,对请求处理 ...

  4. JSP慕课网阶段用户登录小例子(不用数据库)

    getAttribute和setAttribute一起使用,而getParameter用于取得如request传来的参数. Web是请求/响应架构的使用,而request和response就是在服务器 ...

  5. 基于Shiro,JWT实现微信小程序登录完整例子

    小程序官方流程图如下,官方地址 : https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html ...

  6. c# BackGroundWorker 多线程操作的小例子

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  7. ASP.NET Cookie对象到底是毛啊？（简单小例子）

    记得刚接触asp.net的时候,就被几个概念搞的头痛不已,比如Request,Response,Session和Cookie.然后还各种在搜索引擎搜,各种问同事的,但是结果就是自己还是很懵的节奏. 那 ...

  8. Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子

    Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...

  9. spring+shiro共享session完整小例子

    之前写过一个,只不过那个不单纯,有人跑不通,所以今天整个纯粹的小例子. 要求你有Redis. 源码 GitHub 目录结构 因为这是个例子,仅仅为了体现共享session,所以权限认证部分没有加入处理 ...

随机推荐

  1. Alice's Chance

    poj1698:http://poj.org/problem?id=1698 题意:爱丽丝要拍电影,有n部电影,规定爱丽丝每部电影在每个礼拜只有固定的几天可以拍电影,只可以拍前面w个礼拜,并且这部电影 ...

  2. 查看SQLServer各种缓存的情况

    查看页面缓存: SELECT * FROM sys.dm_os_buffer_descriptors 清除页面缓存: CHECKPOINTDBCC DROPCLEANBUFFERS 查看执行计划缓存: ...

  3. PendingIntent的Flags

    PendingIntent是一个Intent的描述.包装,给予了这个PendingIntent 的组件在指定的事件发生或指定的时间到达时启动Activty.Service或者Broadcast. 根据 ...

  4. Java随机数

    本章先讲解Java随机数的几种产生方式,然后通过示例对其进行演示. 广义上讲,Java中的随机数的有三种产生方式:(01). 通过System.currentTimeMillis()来获取一个当前时间 ...

  5. Hadoop上结合opencv\javacv

    mac上安装opencv 1. 去 http://opencv.org 下载最新版OpenCV for Linux/Mac源文件,目前版本是2.4.3.下载后解压.2. 去 http://www.cm ...

  6. 【HDOJ】1823 Luck and Love

    二维线段树.wa了几次,不存在输出-1,而不再是一位小数. #include <cstdio> #include <cstring> #define MAXN 105 #def ...

  7. 常见的Robotium测试的问题总结：

    常见的Robotium测试的问题总结:(从别处拿来的先mark一下) 1.Robotium的 测试类ActivityInstrumentationTestCase2继承了TestCase类,即robo ...

  8. quartz 两次执行问题

    最近发现网站(xiayule.net)越写越大,有些东西已经难以维护了,想要添加个功能,都得斟酌半天 项目中有很多可重构的地方,小重构一直进行,大的不敢动,毕竟没有很多时间做测试. 最后,决定精简代码 ...

  9. ExecuteScalar的学习日志

    一:今天写关于调用sqlhelper类的时候出现了一个异常,我仔细观察没有错误啊,怎么回事:看图 二:出现错误时id的结果是0,也就是说ExcuteScalar的结果是null,明明数据库里有多行数据 ...

  10. @repository注解

    Spring的注解形式:@Repository.@Service.@Controller,它们分别对应存储层Bean,业务层Bean,和展示层Bean. @Repository.@Service.@C ...