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

网友投稿 365 2023-07-12


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

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

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

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

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

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

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

一http://、基本目标

使用Bootstrap来编写一个PC、平板、手机同时使用而且美观的登陆页面。

 在PC上如果拉伸的话,各类元素会自动适应屏幕。

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

二、基本思想

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

三、制作过程

 如下整个页面具体代码如下,下面将一个一个标签来分析:

content="width=device-width,initial-scale=1.0,user-scalable=no">

欢迎。请您先登录。

method="post">

用户名:

placeholder="用户名" id="username" />

密码:

placeholder="密码" id="password" />

登陆

没有账号?

href="http://2.com">点击注册

href="http://2.com">点击注册

1.

 先在

content="width=device-width,initial-scale=1.0,user-scalable=no">

2.

(1)首先写入

(2)

欢迎。请您先登录。

(3)

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

method="post">

用户名:

placeholder="用户名" id="username" />

密码:

placeholder="密码" id="password" />

登陆

没有账号?

href="http://2.com">点击注册

href="http://2.com">点击注册

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

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Javaweb开发环境Myeclipse6.5 JDK1.6 Tomcat6.0 SVN1.8配置教程
下一篇:Mybatis传递多个参数进行SQL查询的用法
相关文章

 发表评论

暂时没有评论,来抢沙发吧~