效果如图：用bootstrap 写的一个简单的登陆

一、修改样式

样式可以自己调整，例如换个背景色之类的，修改 background-color属性就可以

       #from

        {

            background-color: #96b97d;

        }

我自己调的时候只给from加了背景色，当然可以给整个页面加背景色，设置body背景色就可以

        body

        {

            background-color: #96b97d;

        }

当然也可以设置背景图片之类的

body {

    background:url(../img/login_bg_0.jpg) #f8f6e9;

}

至于效果，可以自己去试验。

二、废话少说，上完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <meta charset="utf-8" />

    <title>用户登录</title>

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

    <script src="js/bootstrap.min.js"></script>

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

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

    <style>

        #from

        {

            background-color: #96b97d;

        }

        .mycenter

        {

            margin-top: 100px;

            margin-left: auto;

            margin-right: auto;

            height: 350px;

            width: 500px;

            padding: %;

            padding-left: %;

            padding-right: %;

        }

        .mycenter mysign

        {

            width: 440px;

        }

        .mycenter input, checkbox, button

        {

            margin-top: %;

            margin-left: %;

            margin-right: %;

        }

        .mycheckbox

        {

            margin-top: 10px;

            margin-left: 40px;

            margin-bottom: 10px;

            height: 10px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            $('#btn').click(function (e) {

                window.location.href = "main.aspx";

            });

        });

    </script>

</head>

<body>

    <form id="from">

    <div class="mycenter">

        <div class="mysign">

            <div class="col-lg-11 text-center text-info">

                <h2>

                    请登录</h2>

            </div>

            <div class="col-lg-10">

                <input type="text" class="form-control" name="username" placeholder="请输入账户名" required

                    autofocus />

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10">

                <input type="password" class="form-control" name="password" placeholder="请输入密码" required

                    autofocus />

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10 mycheckbox checkbox">

                <input type="checkbox" class="col-lg-1">记住密码</input>

            </div>

            <div class="col-lg-10">

            </div>

            <div class="col-lg-10">

                <button type="button" id="btn" class="btn btn-success col-lg-12">

                    登录</button>

            </div>

        </div>

    </div>

    </form>

</body>

</html>

bootstrap 一个简单的登陆页面的更多相关文章

  1. tkinter做一个简单的登陆页面

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  2. tkinter做一个简单的登陆页面（十六）

    做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...

  3. vue-cli3和element做一个简单的登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...

  4. 使用QT实现一个简单的登陆对话框（纯代码实现C++）

    使用QT实现一个简单的登陆对话框(纯代码实现C++) 效果展示 使用的QT控件 控件 描述 QLable 标签 QLineEdit 行文本框 QPushButton 按扭 QHBoxLayout 水平 ...

  5. django写一个简单的登陆注册

    要写这个,前提还是需要知道三个知识: 一个是urls.py,它是写我们的路由关系的,之前我写了通过wsgiref写一个简单的服务端,也用到了路由,就是 请求过来的url和视图函数的对应关系. 二是就是 ...

  6. ASP.NET Aries 入门开发教程2：配置出一个简单的列表页面

    前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给 ...

  7. android示例：一个简单的登陆程序

    最近写了个简单的登陆程序,有几点收获: 1.懂得如何在LinearLayout中嵌套LinearLayout,完善布局的行列: 2.用android:layout_weight控制控件的比重: 3.用 ...

  8. 用Html写一个简单的登陆界面

    <!DOCTYPE html> <html> <title>登陆页面</title> <head> <meta charset=&qu ...

  9. 用jQuery Mobile搭建一个简单的手机页面

    1.新增html页面. 2.声明html5Document. 3.载入jQuery Mobile Css.jQuery与jQuery Mobile链接库. 4.使用jQuery Mobile定义的ht ...

随机推荐

  1. Java集合框架（一）

    原文  http://www.jianshu.com/p/e31fb2600e4f 集合类存放于java.util包中,集合类存放的都是对象的引用,而非对象本身,出于表达上的便利,我们称集合中的对象就 ...

  2. Windows 下安装 swoole 具体步骤

    Windows 下安装 swoole 具体步骤: Swoole,原本不支持在Windows下安装的,所以我们要安装Cygwin来使用.在安装Cygwin下遇到了很多坑,百度经验上的文档不是很全,所以我 ...

  3. git 使用方式

    一.常用操作命令 1.初始化操作 git config --global user.name '<name>' # 设置提交者名称 git config --global user.ema ...

  4. java 连接 elasticsearch 报错java.lang.NoClassDefFoundError: org/apache/http/auth/Credentials 解决

    您的问题是您在应用程序类路径中缺少必需的JAR(这导致ClassNotFound异常).如果您下载了包含IP Camera驱动程序(webcam-capture-driver-ipcam-0.3.10 ...

  5. 在java或 js中的日期时间转换问题

    1.在js中需要求的当前日期的周一和周日 var now = new Date(); // 当前日期时间对象 var date = now.getDate(); // 当前是几号:当前日期在一个月中的 ...

  6. npm scripts 使用指南

    转载自:http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. ...

  7. C#内存泄漏--event内存泄漏

    内存泄漏是指:当一块内存被分配后,被丢弃,没有任何实例指针指向这块内存, 并且这块内存不会被GC视为垃圾进行回收.这块内存会一直存在,直到程序退出.C#是托管型代码,其内存的分配和释放都是由CLR负责 ...

  8. Jmeter 后置处理器 BeanShell_PostProcessor 适用思考

    首先摘抄一段官方文档的话: The following BeanShell variables are set up for use by the script: log - (Logger) - c ...

  9. Jmeter返回参数值写入文件《一》

    在用Jmeter做自动化测试的时候,某些特殊情况下我们需要将Jmeter的返回的某个特殊值写入的文件中,那么我们该如何做呢? 对于Jmeter这个工具来说,我们不难知道,它是一个java开源的可扩展的 ...

  10. EM算法的直观描述

    解决含有隐变量的问题有三种方法,其中第三种方法就是通常所说的em算法.下面以统计学习方法中给出的三硬币问题为例来分别描述这三种方法.(a,b,c三硬币抛出来为正的概率分别为pai,p,q,每轮抛硬币先 ...