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. C++类中静态变量和静态方法的注意事项

    在C++中,静态成员是属于整个类的而不是某个对象,静态成员变量仅仅存储一份供全部对象共用.所以在全部对象中都能够共享它.使用静态成员变量实现多个对象之间的数据共享不会破坏隐藏的原则,保证了安全性还能够 ...

  2. cpu真实占用率检測工具

     windows任务管理器所示CPU占用,一直在不断的变动跳跃 ,并不能反应真实的平均CPU占用率.迅雷下载工具也是一样 ,有时这些知名软件,反倒是没有做的这么人性化,细致.或 许就是不想让人知道 ...

  3. spring Batch实现数据库大数据量读写

    spring Batch实现数据库大数据量读写 博客分类: spring springBatchquartz定时调度批处理  1. data-source-context.xml <?xml v ...

  4. unity坐标转换问题

    unity最经常使用的几种坐标.屏幕坐标.世界坐标.ngui坐标,相对于父物体的坐标(localPoisition). 可是有时候这几种坐标相互转换何其困难,让自己狠抓头. 不得不操作的方式是创建虚拟 ...

  5. hive2.0函数大全

    Hive2.0函数大全(中文版)   摘要 Hive内部提供了很多函数给开发者使用,包括数学函数,类型转换函数,条件函数,字符函数,聚合函数,表生成函数等等,这些函数都统称为内置函数. 目录 数学函数 ...

  6. Hua Wei 机试题目二

    题目描述:假设1元,5元,10元,50元,100元的人民币若干,实现一个能找到最少张数累计达到一个指定金额方法.如:67元,可分为67个1元钱.也可分为6个10元7个1元,其中最少人民币分法为一张50 ...

  7. C语言中以文本方式读写文件时换行符转换的注意事项

    我们知道在UNIX下是没有回车符(\r)的,只有换行符(\n),而C语言诞生于UNIX(Linux即面向开源的UNIX,Mac OS也是UNIX发展而来的,而Windows是从MS-DOS发展而来,与 ...

  8. poj 3160 Father Christmas flymouse【强连通 DAG spfa 】

    和上一道题一样,可以用DAG上的动态规划来做,也可以建立一个源点,用spfa来做 #include<cstdio> #include<cstring> #include< ...

  9. 【Django】遇到的问题

    目前的Django版本是Django version 2.0.4 Python使用的版本是Python 3.6.4 以下会将遇到的问题和各种报错信息记录 报错信息:NameError: name 'u ...

  10. pickle模块 no attribute 'dumps'

    今天写了一个pickle.py的文件练习pickle模块,代码如下: import pickle dic = {"linga": ('football',)} dic2 = {&q ...