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、平板、手机同一时候使用并且美观的登陆页面。

在PC上假设拉伸的话。各类元素会自己主动适应屏幕。

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

二、基本思想

页面的布局，依据Bootstrap固有的样式设计例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW9uZ2g3MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

三、制作过程

例如以下整个页面详细代码例如以下，以下将一个一个标签来分析：

<!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>。然后在当中放入代码，其基本说明例如以下图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW9uZ2g3MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

（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>

至此。本页面的开发完毕。

【Bootstrap】一个PC、平板、手机同一时候使用并且美观的登陆页面的更多相关文章

  1. Nginx配置网站适配PC和手机

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  2. Nginx配置站点适配PC和手机

    考虑到站点的在多种设备下的兼容性,有非常多站点会有手机版和电脑版两个版本号.訪问同一个站点URL,当服务端识别出用户使用电脑訪问.就打开电脑版的页面,用户假设使用手机訪问,则会得到手机版的页面. 1. ...

  3. 网页中插入外部视频的几种方法（PC与手机网页通用）

    网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...

  4. 【转】Nginx区分PC或手机访问不同网站

    原文链接:http://www.nginx.cn/784.html 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合 ...

  5. JS判断登陆端是PC还是手机

    前些天朋友问我怎么判断登陆端是PC还是手机...自己也是很困惑,然后自己查了资料,这些东西都藏在USER-AGENT里面,查了他的一些属性,写了一个简单的验证页面大家共同学习. 读取navigator ...

  6. 我想要个pc和手机共有的客户端，就像百度云（iBarn网盘好用）

    https://github.com/zhimengzhe/iBarn iBarn网盘是一个基于PHP开发的先进的云存储系统,提供文件的网络备份,同步和分享服务:支持断点续传,秒传等功能:可选择文件下 ...

  7. Nginx区分PC或手机访问不同网站

    近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”. 响应式web设 ...

  8. 【ASP.NET】判断访问网站的客户端是PC还是手机

    原文:[ASP.NET]判断访问网站的客户端是PC还是手机 主要就是通过客户端传递的User-agent来判断访问网站的客户端是PC还是手机,.NET中就是Request.ServerVariable ...

  9. 【ASP.NET 进阶】判断访问网站的客户端是PC还是手机

    主要就是通过客户端传递的User-agent来判断访问网站的客户端是PC还是手机,.NET中就是Request.ServerVariables["HTTP_USER_AGENT"] ...

随机推荐

  1. IT关键词，面试知识问与答

    二叉树遍历的三种方式? 遍历是指依次访问⼆叉树中的每个元素.有三种遍历⽅法,分别是前序遍历. 中序遍历和后序遍历.它们是按照访问根节点和⼦节点的先后顺序命名的. • 前序遍历:先访问根节点,然后访问左 ...

  2. python绘制caffe中网络模型

    caffe-master/python/draw_net.py 实现绘制caffe中定义的网络模型功能,将.prototxt文件可视化. 需要先安装pydot和protobuf工具 通过Anacond ...

  3. 类扩展和category的小区别

    类扩展可以给类声明新的变量(属性),但是方法的实现只能在.m中实现 category可以给类声明新的方法实例,但是不可以添加变量(属性)

  4. ROS-SLAM仿真-cartographer

    前言:cartographer是谷歌2016年发布的一个开源slam算法,采用基于图网络的优化方法,主要基于激光雷达来实现. 使用源码编译方式. 一.新建工作空间 1.1 使用roboware新建名为 ...

  5. ListView的Item动画

    1.效果图 2.需求就是点击item歌曲时,实现一种飞入到预约按钮处的效果 3.思路:在布局文件中加入了一个条目布局,和listView的item一样,点击listView的item时,使用给条目布局 ...

  6. [ OS ][ Linux ] [ SA ] root 帳號名稱修改

    1. 背景: 由於 Linux 中預設最高權限的使用者一律為 root, 存在安全性的疑慮. 所以比較安全的作法要將 root 帳號改名為其他名稱,讓要入侵的人需要同時破解出帳號和密碼才可以進入主機, ...

  7. 转：Hibernate中Criteria和DetachedCriteria的完整用法

    原文地址:http://blog.sina.com.cn/s/blog_667528fd0100rkrf.html 设计上可以灵活的根据 Criteria 的特点来方便地进行查询条件的组装.现在对 H ...

  8. 浅谈AVL树,红黑树,B树,B+树原理及应用

    背景:这几天在看<高性能Mysql>,在看到创建高性能的索引,书上说mysql的存储引擎InnoDB采用的索引类型是B+Tree,那么,大家有没有产生这样一个疑问,对于数据索引,为什么要使 ...

  9. [修改高通平台WIFI MAC 地址] & [adb over wifi]

    [修改高通平台WIFI MAC 地址]fccmd --helpfccmd startfccmd getwifimacfccmd setwifimac 74:AC:5F:F5:D7:40 [adb ov ...

  10. Java模拟数据量过大时批量处理数据的两种实现方法

    方法一: 代码如下: import java.util.ArrayList; import java.util.List; /** * 模拟批量处理数据(一) * 当数据量过大过多导致超时等问题可以将 ...