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、平板、手机的登陆页面

一、基本目标 

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

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

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

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

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

二、基本思想 

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

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

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

<!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>,然后在其中放入代码,其基本说明如下图: 

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

(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个精彩的专题:

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

Javascript 相关文章推荐
常规表格多表头查询示例
Feb 21 Javascript
js改变Iframe中Src的方法
May 05 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
老生常谈js数据类型
Aug 03 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
vue实现循环滚动列表
Jun 30 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Js组件的一些写法
2010/09/10 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
使用jQuery实现页面定时弹出广告效果
2017/08/24 jQuery
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python将多份excel表格整理成一份表格
2018/01/03 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python样条插值的实现代码
2018/12/17 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
如何查看python关键字
2021/01/17 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
商场促销活动方案
2014/02/08 职场文书
党员教师工作决心书
2014/03/13 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年销售经理工作总结
2014/12/01 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python