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. android开发一些小bug

    1.一定要注意findViewId这种方法,尤其是含有多个同样的R.id的名字时,debug时不会当场报错.但随后会报空指针错误 2.List转换为Array能够这样处理: ArrayList< ...

  2. Swift3.0 闭包整理

    语法表达式 一般形式:{             (parameters) -> returnType in              statements            } 这里的参数 ...

  3. Session会在浏览器关闭后消失吗？

    转  http://blog.csdn.net/rongwenbin/article/details/51784310 Cookie的两种类型   在项目开发中我们时常将需要在客户端(浏览器)缓存的数 ...

  4. POJ 2536 匈牙利算法

    思路:最大匹配 (很裸) // by SiriusRen #include <cmath> #include <cstdio> #include <cstring> ...

  5. inotify-tools+rsync实时同步文件安装和配置

    服务器A:论坛的主服务器,运行DZ X2论坛程序;服务器B:论坛从服务器,需要把X2的图片附件和MySQL数据实时从A主服务器实时同步到B服务器.MySQL同步设置会在下一编中说到.以下是用于实时同步 ...

  6. C#数组大小分析（附测试过程中想起的debug和release区别）

    C#数组的理论最大长度到底是多少呢?曾经一度问过度娘,谷歌,貌似都没有得出一个比较准确的答案,无外乎是什么Int32的最大值啊什么的,今天终于决定写个软件来自己测试一下,在几台不同的电脑里面实际测试看 ...

  7. C语言-实现整数倒序输出

    Action() { //实现一个3位数的倒序输出(123输出321) int n; int m=321; n=fun_mod(m,n); lr_output_message("%d&quo ...

  8. php方法----将数组按照键值进行排序

    将数组按照键值进行排序 array_multisort(array_column($arr,'first'),SORT_ASC,$arr);

  9. 【前端分享】 JavaScript最经典的55个技巧（转）

    从别的地方看到的,保存下,有空实践下再补充. 1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <tab ...

  10. ZBrush中Document特性介绍

    ZBrush®中的Document调色板用于加载或保存ZBrush文档,导入背景图像.导出背景图像.调整画布大小和设置背景颜色.本文小编来给大家介绍下Document常用的一些基本功能. ZBrush ...