Boostrap实现的登录界面实例代码

Bootstrap它是一个开源的web开发前端框架。

这几天我看了下Bootstrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路，于是就打开了桌面的H5 builder码起来。代码实现起来其实不难，但是碰到个问题，就是Bootstrap的布局控制好像用.col类难以实现居中显示，虽然可以用modal（模态框）实现弹出居中,但是我暂时不想用modal框。发现问题后，第一想法是自己再定义个css进行一个控制。但是又不知道行业内的大牛是不是只用Bootstrap就能实现，而我只是没发现实现的方法。然后倔强地想要试试只用Bootstrap实现，后来各种google，百度，半小时过去了。没找到方法，所以我也只能自己写css进行布局一个div居中。其实，也不是我不懂css，只是单纯地想实现下。好了，废话少说，上个图坐镇。界面写得不好看，如有错误请大方指正。（背景图不会PS，是用别人的，若有侵权请给我发邮件或者留言，我立马换图！）。

好了，感觉登录框不够居中。如有更好的方法，请告知我谢谢！

本界面使用的Bootstrap是v3.3.5版本。

基本代码：

style.css(我的css用于控制登录框那个外部的div居中)：

body {
background:url(../img/login_bg_0.jpg) #f8f6e9;
}
.mycenter{
margin-top: 100px;
margin-left: auto;
margin-right: auto;
height: 350px;
width:500px;
padding: 5%;
padding-left: 5%;
padding-right: 5%;
}
.mycenter mysign{
width: 440px;
}
.mycenter input,checkbox,button{
margin-top:2%;
margin-left: 10%;
margin-right: 10%;
}
.mycheckbox{
margin-top:10px;
margin-left: 40px;
margin-bottom: 10px;
height: 10px;
}

login.html(登录的界面html代码)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<form action="login.php" method="post">
<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" class="btn btn-success col-lg-12">登录</button>
</div>
</div>
</div>
</form>
</body>
</html>

【注意】本代码在chrome浏览器上显示正常，但是在IE8上有问题,代码也没做对IE浏览器的支持，的确做法不对，我会后期更新的。

以上所述是小编给大家介绍的Boostrap实现的登录界面实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jQuery简单入门示例之用户校验demo示例

    jQuery简单入门示例之用户校验demo示例

    本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

  • js实现简单登录功能的实例代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>Login.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    &l

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){

  • Boostrap实现的登录界面实例代码

    Boostrap实现的登录界面实例代码

    Bootstrap它是一个开源的web开发前端框架. 这几天我看了下Bootstrap的官方文档.看到其中的Basic-form,突然想实现下登录界面.然后想了下实现的思路,于是就打开了桌面的H5 builder码起来.代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框.发现问题后,第一想法是自己再定义个css进行一个控制.但是又不知道行业内的大牛是不是只用Bootstr

  • 高仿Windows Phone QQ登录界面实例代码

    高仿Windows Phone QQ登录界面实例代码

    给 TextBox文本框前添加图片 扩展PhoneTextBox:添加一个类"ExtentPhoneTextBox"继承 PhoneTextBox ,在"ExtentPhoneTextBox"类中添加属性项: 复制代码 代码如下: public class ExtentPhoneTextBox : PhoneTextBox    {        /// <summary>        /// 文本框图片属性        /// </summa

  • Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)

    从最简单的Web浏览器的登录界面开始,登录界面如下: 进行Web页面自动化测试,对页面上的元素进行定位和操作是核心.而操作又是以定位为前提的,因此,对页面元素的定位是进行自动化测试的基础. 页面上的元素就像人一样,有各种属性,比如元素名字,元素id,元素属性(class属性,name属性)等等.webdriver就是利用元素的这些属性来进行定位的. 可以用于定位的常用的元素属性: id name class name tag name link text partial link text xp

  • JavaWeb简单用户登录注册实例代码(有验证码)

    需求 编写login登录界面(用户名,密码,验证码,登陆按钮,注册按钮) 设计关系数据库(编号,用户名,密码) 编写注册功能,将数据存储在数据库中.(姓名不能重复,设为主键,重复会注册失败) 编写登录功能 .首先获取验证码,先判断验证码是否正确,不正确则显示验证码错误.验证码正确后再获取用户名和密码,进行数据库的搜索比对,若正确则重定向到成功的界面,并且将用户名显示. jar包 技术选型 Servlet + JSP + Mysql + JDBCTemplate + Druid + BeanUti

  • Android开发中通过手机号+短信验证码登录的实例代码

    首先,需要一个电话号码,目前很多账户都是将账户名设置成手机号,然后点击按钮获取手机验证码. 其次,你需要后台给你手机短信的验证接口,各个公司用的不一样,这个身为前端,不需要你来考虑,你只要让你后台给你写好接口,你直接调用就好了. activity_login.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.andr

  • Bootstrap弹出带合法性检查的登录框实例代码【推荐】

    Bootstrap弹出带合法性检查的登录框实例代码【推荐】

    最近做了一个项目其中有项目需求涉及到访问控制,在访问需要登录才能使用的页面或功能时,会弹出登录框: 效果如下: 图 1-点击用户名时,如未登录弹出登录框 对这个功能的详细描述: 不涉及到登录时,登录框隐藏 涉及到登录时,登录框弹出到页面左上角 登陆成功后登录框隐藏 实现思路: 在body结束标签之前插入登录的div,设其定位方式为absolute,位置在左上角. 登录框默认的display属性为none.触发登录时,将该属性改为block 附上示例代码: <!DOCTYPE html> <

  • 重写 ajax 实现 session 超时跳转到登录页面实例代码

    问题:使用window.location.href来跳转页面的时候,后端只需实现一个过滤器就可以在session超时的情况下重定向到登陆页面.但是使用ajax呢?使用ajax来执行会发生302错误,并且页面不可能跳转.下面就针对这个问题来贴上我的前后端代码. 1.session过滤器 import java.io.IOException; <p style="text-align: center"><img alt=""import javax.s

  • c#操作sql server2008 的界面实例代码

    先是查询整张表,用到combobox选择查询哪张表,最后用DataGridView显示 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace WindowsForms

  • Android第三方登录之腾讯QQ登录的实例代码

    布局文件 <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="登录成功" android:textSize="25sp" android:layout_marginTop="100dp" /> 清单文件中的配置 <activity android:n

  • 使用Bootstrap框架制作查询页面的界面实例代码

    使用Bootstrap框架制作查询页面的界面实例代码

    以Bootstrap框架来进行设计和开发,是目前国际上比较流行的一个趋势.很多软件公司在优化新产品时,因为其在js和控件上的综合优势,会选用这个开发框架. Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不同的页面元素的布局),在Bootstrap中很好的支持了,只要简单设置了属性,就能自动实现响应时布局,大大简化了程序员的界面的过程. 因此,本人

随机推荐