编程 Javascript

Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

Posted in Javascript onJune 30, 2016

Bootstrap如同前台框架，它已经布置好不少的CSS，前端开发的使用需要则直接调用即可。其网站的网址就是http://www.bootcss.com。使用Bootstrap能减少前端开发时候在CSS样子的布置时间

需要使用Bootstrap先在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。

将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。

之后就能够在此站点目录下的任何页面调用Bootstrap为前端快速建模。

不过值得注意的是，不同浏览器对于Bootstrap解释是不一样的，其中IE对某些样式读不出来，但是基本的功能不受影响，页面丑一点而已。

以下是IE与谷歌浏览器对同一页面的对比：

一、基本目标

使用Bootstrap来编写一个PC、平板、手机同时使用而且美观的登陆页面。
在PC上如果拉伸的话，各类元素会自动适应屏幕。

在手机上打开这类的页面的话，会直接适应手机屏幕，无需用户自动调节。

二、基本思想

页面的布局，根据Bootstrap固有的样式设计如下：

三、制作过程
如下整个页面具体代码如下，下面将一个一个标签来分析：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title>登陆页面</title>
 <meta name="viewport"
 content="width=device-width,initial-scale=1.0,user-scalable=no">
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 </head>

 <body>
 <div class="panel panel-info">
 <div class="panel-heading">
 <table frame="void">
 <tr>
 <td>
 <img src="images/img0.jpg" width="300px" height="300px" />
 </td>
 <td>
 欢迎。请您先登录。
 </td>
 </tr>
 </table>
 </div>
 <div class="panel-body">
 <form class="form-horizontal" role="form" action="1.html"
 method="post">
 <div class="form-group">
 <label for="username" class="col-sm-2 control-label">
 用户名：
 </label>
 <div class="col-sm-10">
 <input type="text" name="username" class="form-control"
 placeholder="用户名" id="username" />
 </div>
 </div>
 <div class="form-group">
 <label for="password" class="col-sm-2 control-label">
 密码：
 </label>
 <div class="col-sm-10">
 <input type="password" name="password" class="form-control"
 placeholder="密码" id="password" />
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <button type="submit" class="btn btn-info">
 登陆
 </button>
 <small> 没有账号？<a
 href="http://2.com">点击注册</a> </small>
 </div>
 </div>
 </form>
 </div>
 </div>
 </body>
</html>

1.<head>标签
先在<head>标签中，放入如下两行代码：

<head>
 <title>登陆页面</title>
 <!--要求页面自动适应浏览器的屏幕-->
 <meta name="viewport"
 content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--声明我要使用bootstrap-->
 <link href="css/bootstrap.css" rel="stylesheet" media="screen">
 </head>

2.<body>标签

（1）首先写入<div class="panel panel-info"></div>，然后在其中放入代码，其基本说明如下图：

（2）<div class="panel-heading">标签

<div class="panel-heading">
 <!--设置表格对这个CSS图层进行布局，在img标签中加入align="left"是不好用的，图象会向图层外溢出-->
 <!--同<table border="0">-->
 <table frame="void">
 <tr>
 <td>
 <img src="images/img0.jpg" width="300px" height="300px" />
 </td>
 <td>
 欢迎。请您先登录。
 </td>
 </tr>
 </table>
 </div>

（3）<div class="panel-body">标签下，先放入一个表单元素form class="form-horizontal" role="form" action="1.html" method="post">，此表单与HTML的普通表单相比，就是多了class属性与role属性，class属性无需多说，如果值为form的话，表单即使有足够位置，外标签与输入框也不会在同一行，如果值为现在的form-horizontal，那么则如图效果所示。role属性看不出有如何效果，此处仅仅是根据bootstrap的中文文档添加的。

接下来，各个form表单下的元素如下：

<div class="panel-body">
 <form class="form-horizontal" role="form" action="1.html"
 method="post">
 <!--每一个属性的外标签与输入框构成一个form-group元组-->
 <div class="form-group">
 <!--如下的class属性是为了其能够根据屏幕的大小自动拉伸-->
 <label for="username" class="col-sm-2 control-label">
 用户名：
 </label>
 <div class="col-sm-10">
 <!--此处的placholder意为不输入任何东西的说明灰字，当然在IE8中无法解释。id看不出有什么作用，仅仅是根据Bootstrap中文文档的要求而添加的-->
 <input type="text" name="username" class="form-control"
 placeholder="用户名" id="username" />
 </div>
 </div>
 <div class="form-group">
 <label for="password" class="col-sm-2 control-label">
 密码：
 </label>
 <div class="col-sm-10">
 <input type="password" name="password" class="form-control"
 placeholder="密码" id="password" />
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
 <!--此处的button与HTML的普通submit按钮是有区别的，但不影响表单的提交-->
 <button type="submit" class="btn btn-info">
 登陆
 </button>
 <!--<small>标签保证了这段文字与submit按钮同一行-->
 <small> 没有账号？<a
 href="http://2.com">点击注册</a> </small>
 </div>
 </div>
 </form>
 </div>

至此，本页面的开发完成。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Bootstrap编写一个同时适用于PC、平板、手机的登陆页面

- Author -

yongh701

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

多浏览器兼容性比较好的复制到剪贴板的js代码

Oct 09 Javascript

用JavaScript实现使用鼠标画线的示例代码

Aug 19 Javascript

JS响应鼠标点击实现两个滑块区间拖动效果

Oct 26 Javascript

JavaScript实现倒计时代码段Item1（非常实用）

Nov 03 Javascript

通过jquery-ui中的sortable来实现拖拽排序的简单实例

May 24 Javascript

jquery实现拖动效果

Aug 10 Javascript

jQuery中slidedown与slideup方法用法示例

Sep 16 Javascript

Node.js 中exports 和 module.exports 的区别

Mar 14 Javascript

jQuery实现根据身份证号获取生日、年龄、性别等信息的方法

Jan 09 jQuery

深入Node TCP模块的理解

Mar 13 Javascript

layui table表格数据的新增,修改,删除,查询,双击获取行数据方式

Nov 14 Javascript

JavaScript实现瀑布流布局的3种方式

Dec 27 Javascript

jQuery获取table行数并输出单元格内容的实现方法

Jun 30 #Javascript

JS实现添加,替换,删除节点元素的方法

Jun 30 #Javascript

JS传值出现中文参数乱码的解决方法

Jun 30 #Javascript

javascirpt实现2个iframe之间传值的方法

Jun 30 #Javascript

老生常谈 js中this的指向

Jun 30 #Javascript

JS使用cookie设置样式的方法

Jun 30 #Javascript

浅谈js和css内联外联注意事项

Jun 30 #Javascript

You might like

php模板之Phpbean的目录结构

2008/01/10 PHP

PHP中return 和 exit 、break和contiue 区别与用法

2012/04/09 PHP

服务器上配置PHP运行环境教程

2015/02/12 PHP

php实现图片转换成ASCII码的方法

2015/04/03 PHP

PHP入门教程之面向对象基本概念实例分析

2016/09/11 PHP

php多进程并发编程防止出现僵尸进程的方法分析

2020/02/28 PHP

分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]

2012/10/12 Javascript

jquery简单瀑布流实现原理及ie8下测试代码

2013/01/23 Javascript

完美解决IE低版本不支持call与apply的问题

2013/12/05 Javascript

js showModalDialog弹出窗口实例详解

2014/01/07 Javascript

深入分析jquery解析json数据

2014/12/09 Javascript

JavaScript使用ActiveXObject访问Access和SQL Server数据库

2015/04/02 Javascript

详解JavaScript中的表单验证

2015/06/16 Javascript

跟我学习javascript的函数调用和构造函数调用

2015/11/16 Javascript

JS验证input输入框（字母，数字，符号，中文）

2017/03/23 Javascript

Vue实现动态响应数据变化

2017/04/28 Javascript

Angular中点击li标签实现更改颜色的核心代码

2017/12/08 Javascript

详解Angular6.0使用路由步骤(共7步)

2018/06/29 Javascript

基于vue实现移动端圆形旋钮插件效果

2018/11/28 Javascript

微信小程序全局变量改变监听的实现方法

2019/07/15 Javascript

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

2020/07/24 Javascript

Vue3为什么这么快

2020/09/23 Javascript

[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16

2018/08/17 DOTA

零基础学Python（一）Python环境安装

2014/08/20 Python

python 从csv读数据到mysql的实例

2018/06/21 Python

Python3实现计算两个数组的交集算法示例

2019/04/03 Python

python读取指定字节长度的文本方法

2019/08/27 Python

给 TensorFlow 变量进行赋值的方式

2020/02/10 Python

Python利用命名空间解析XML文档

2020/08/10 Python

pandas实现导出数据的四种方式

2020/12/13 Python

Gerry Weber德国官网：优质女性时装，德国最大的时装公司之一

2019/11/02 全球购物

运动会获奖感言

2014/02/11 职场文书

新学期决心书

2014/03/11 职场文书

副校长个人对照检查材料思想汇报

2014/10/04 职场文书

2015年度护士个人工作总结

2015/04/09 职场文书

一文搞清楚MySQL count(*)、count(1)、count(col)区别

2022/03/03 MySQL