引入需要的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. [CF Round #294 div2] D. A and B and Interesting Substrings 【Map】

    题目链接:D. A and B and Interesting Substrings 题目大意 给定26个小写字母的权值,一共26个整数(有正有负). 给定一个小写字母组成的字符串(长度10^5),求 ...

  2. Eclipse插件卸载

            以前搞过安卓,重装系统后,安卓损坏了,每次还会提示那个窗口很烦人.       使用Eclipse自带的卸载插件功能即可,Help->About Eclipse->Inst ...

  3. NEURAL NETWORKS, PART 2: THE NEURON

    NEURAL NETWORKS, PART 2: THE NEURON A neuron is a very basic classifier. It takes a number of input ...

  4. Java位运算总结：位运算用途广泛《转》

    前天几天研究了下JDK的Collection接口,本来准备接着研究Map接口,可是一查看HashMap类源码傻眼咯,到处是位运算实现,所以我觉得还是有必要先补补位运算知识,不然代码看起来有点费力.今天 ...

  5. Android 用代码来实现selector

    众所周知,android可以通过XML文件来创建selector,以Drawable对象的形式安装到组件上,以提供统一的风格设置.但是在某些时候,我们需要通过代码的形式来实现相同的功能,例如组件数量非 ...

  6. ANDROID 中UID与PID的作用与区别

    PID:为Process Identifier, PID就是各进程的身份标识,程序一运行系统就会自动分配给进程一个独一无二的PID.进程中止后PID被系统回收,可能会被继续分配给新运行的程序,但是在a ...

  7. CXF Service Interceptor请求,响应报文之控制台输出

    一:定义接口 @WebService(targetNamespace = "http://www.unionpay.com/client/appprovider", name = ...

  8. UVAlive 3263 That Nice Euler Circuit（欧拉定理）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=21363 [思路] 欧拉定理:V+F-E=2.则F=E-V+2. 其 ...

  9. STL之map、multimap

    map是标准的关联式容器,一个map是一个键值对序列,即(key,value)对.它提供基于key的快速检索能力. map中key值是唯一的.集合中的元素按一定的顺序排列.元素的插入过程是按照排序规则 ...

  10. lightoj 1243 - Guardian Knights 最小费用流

    #include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...