编程 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 相关文章推荐

VBScript版代码高亮

Jun 26 Javascript

JavaScript入门之基本函数详解

Oct 21 Javascript

jQuery图片滚动图片的效果(另类实现)

Jun 02 Javascript

Node调试工具JSHint的安装及配置教程

May 27 Javascript

JS获取Table中td值的方法

Mar 19 Javascript

Jquery实现鼠标移动放大图片功能实例

Mar 25 Javascript

jquery实现简单实用的弹出层效果代码

Oct 15 Javascript

AngularJS 实现按需异步加载实例代码

Oct 18 Javascript

Js获取图片原始宽高的实现代码

May 17 Javascript

基于vue.js的分页插件详解

Nov 27 Javascript

JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码

Dec 05 Javascript

vue/cli 配置动态代理无需重启服务的方法

May 20 Vue.js

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的开合式多级菜单程序

2006/10/09 PHP

fgetcvs在linux的问题

2012/01/15 PHP

举例详解PHP脚本的测试方法

2015/08/05 PHP

php对文件夹进行相关操作（遍历、计算大小）

2015/11/04 PHP

js树形控件脚本代码

2008/07/24 Javascript

js中split函数的使用方法说明

2013/12/26 Javascript

JavaScript window.location对象

2014/11/14 Javascript

Javascript实现检测客户端类型代码封包

2015/12/03 Javascript

JS表单验证的代码(常用)

2016/04/08 Javascript

利用Angularjs和Bootstrap前端开发案例实战

2016/08/27 Javascript

js操作二进制数据方法

2018/03/03 Javascript

js中的闭包实例展示

2018/11/01 Javascript

使用webpack构建应用的方法步骤

2019/03/04 Javascript

Vue触发input选取文件点击事件操作

2020/08/07 Javascript

[38:30]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场2

2014/05/24 DOTA

[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访

2014/07/15 DOTA

[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

用Python编写分析Python程序性能的工具的教程

2015/04/01 Python

Python生成器定义与简单用法实例分析

2018/04/30 Python

Python实现的绘制三维双螺旋线图形功能示例

2018/06/23 Python

对Python 内建函数和保留字详解

2018/10/15 Python

Python编程学习之如何判断3个数的大小

2019/08/07 Python

python+opencv3生成一个自定义纯色图教程

2020/02/19 Python

安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法

2020/08/18 Python

解决Python 写文件报错TypeError的问题

2020/10/23 Python

Python+kivy BoxLayout布局示例代码详解

2020/12/28 Python

非常震撼的纯CSS3人物行走动画

2016/02/24 HTML / CSS

HTML5 File接口在web页面上使用文件下载

2017/02/27 HTML / CSS

Looking4Parking美国：全球排名第一的机场停车比较品牌

2019/08/26 全球购物

美国家居用品和厨具购物网站：DealsDot

2019/10/07 全球购物

精选干货：Java精选笔试题附答案

2014/01/18 面试题

JSP和Servlet有哪些相同点和不同点，他们之间的联系是什么？

2015/10/22 面试题

建筑文秘专业个人求职信范文

2013/12/28 职场文书

物流仓管员工作职责

2014/01/06 职场文书

小学生安全教育广播稿

2014/10/20 职场文书

ant design charts 获取后端接口数据展示

2022/05/25 Javascript