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

JavaScript 数组的 uniq 方法

Jan 23 Javascript

javascript中的prototype属性实例分析说明

Aug 09 Javascript

Jquery中对数组的操作代码

Aug 12 Javascript

JavaScript 图像动画的小demo

May 23 Javascript

javascript中sort()的用法实例分析

Jan 30 Javascript

基于javascript实现根据身份证号码识别性别和年龄

Jan 22 Javascript

AngularJs directive详解及示例代码

Sep 01 Javascript

浅谈jQuery hover(over, out)事件函数

Dec 03 Javascript

微信页面倒计时代码（解决safari不兼容date的问题）

Dec 13 Javascript

js模拟支付宝密码输入框

Apr 11 Javascript

Vue服务器渲染Nuxt学习笔记

Jan 31 Javascript

Node.js 实现抢票小工具 & 短信通知提醒功能

Oct 22 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.ini实现Mysql导入数据库文件最大限制的修改方法

2007/12/11 PHP

使用PHP处理数据库数据如何将数据返回客户端并显示当前状态

2016/02/16 PHP

PHP递归统计系统中代码行数

2019/09/19 PHP

PHP上传图片到数据库并显示的实例代码

2019/12/20 PHP

Web前端设计模式制作漂亮的弹出层

2010/10/29 Javascript

jquery 清空file域示例(兼容个浏览器)

2013/10/11 Javascript

改变文件域的样式实现思路同时兼容ie、firefox

2013/10/23 Javascript

jquery索引在使用中的一些困惑

2013/10/24 Javascript

Lab.js初次使用笔记

2015/02/28 Javascript

jQuery 遍历函数详解

2015/07/05 Javascript

jQuery+css实现的换页标签栏效果

2016/01/27 Javascript

原生JavaScript实现动态省市县三级联动下拉框菜单实例代码

2016/02/03 Javascript

实例讲解jquery中mouseleave和mouseout的区别

2016/02/17 Javascript

JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)

2016/06/12 Javascript

Bootstrap精简教程中秋大放送

2016/09/15 Javascript

vue2.0获取自定义属性的值

2017/03/28 Javascript

Vue.js实现一个SPA登录页面的过程【推荐】

2017/04/29 Javascript

JavaScript+H5实现微信摇一摇功能

2018/05/23 Javascript

vue-cli3使用 DllPlugin 实现预编译提升构建速度

2019/04/24 Javascript

Node.js使用MongoDB的ObjectId作为查询条件的方法

2019/09/10 Javascript

解决vue初始化项目时,一直卡在Project description上的问题

2019/10/31 Javascript

JavaScript实现省市联动效果

2019/11/22 Javascript

[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk

2017/04/03 DOTA

[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07

2020/11/09 DOTA

[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25

2020/11/25 DOTA

python之import机制详解

2014/07/03 Python

Python使用win32com实现的模拟浏览器功能示例

2017/07/13 Python

pycharm无法导入本地模块的解决方式

2020/02/12 Python

利用python控制Autocad:pyautocad方式

2020/06/01 Python

python 6行代码制作月历生成器

2020/09/18 Python

青年安全生产示范岗事迹材料

2014/05/04 职场文书

工作作风懒散检讨书

2014/10/29 职场文书

python实现黄金分割法的示例代码

2021/04/28 Python

浅谈mysql哪些情况会导致索引失效

2021/11/20 MySQL

vue3.0 数字翻牌组件的使用方法详解

2022/04/20 Vue.js

Android开发手册自定义Switch开关按钮控件

2022/06/10 Java/Android