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

发布时间：2020-12-18 00:52:13 所属栏目：安全来源：网络整理

导读：Bootstrap如同前台框架，它已经布置好不少的CSS，前端开发的使用需要则直接调用即可。其网站的网址就是需要使用Bootstrap先在官网（）下载组件即可，用于生产环境的Bootstrap版本（），Bootstrap3对2并不兼容，建议直接根据其开发文档使用Bootstrap3。将Bo

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

三、制作过程

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

登陆页面

没有账号？

1.标签

先在标签中，放入如下两行代码：

登陆页面

2.标签

（1）首先写入

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

（2）

（3）

接下来，各个form表单下的元素如下：

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!