鸿 网 互 联 www.68idc.cn

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

来源:互联网 作者:佚名 时间:2016-08-05 04:12
这篇文章主要为大家详细介绍了Bootstrap编写一个同时适用于PC、平板、手机的登陆页面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

需要使用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 content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" media="screen"> </head> <body> <div> <div> <table frame="void"> <tr> <td> <img src="images/img0.jpg" /> </td> <td> 欢迎。请您先登录。 </td> </tr> </table> </div> <div> <form role="form" action="1.html" method="post"> <div> <label for="username"> 用户名: </label> <div> <input type="text" placeholder="用户名" /> </div> </div> <div> <label for="password"> 密码: </label> <div> <input type="password" placeholder="密码" /> </div> </div> <div> <div> <button type="submit"> 登陆 </button> <small> 没有账号?<a href="http://2.com">点击注册</a> </small> </div> </div> </form> </div> </div> </body> </html>

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

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

 2.<body>标签

(1)首先写入<div></div>,然后在其中放入代码,其基本说明如下图: 

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

(2)<div>标签

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

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

接下来,各个form表单下的元素如下:

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

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

网友评论
<