微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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固有的样式设计如下:

三、制作过程

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

rush:xhtml;"> 登陆<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a> <Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
heading"> 登录。
用户名:
没有账号?

1.标签

先在标签中,放入如下两行代码:

登陆页面

2.标签

(1)首先写入

,然后在其中放入代码,其基本说明如下图:

(2)

(3)

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐