Bootstrap一个PC平板手机同一时候使用并且美观的登陆页面

Posted wzjhoutai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap一个PC平板手机同一时候使用并且美观的登陆页面相关的知识，希望对你有一定的参考价值。

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

技术分享


三、制作过程

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

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

技术分享

（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平板手机同一时候使用并且美观的登陆页面的主要内容，如果未能解决你的问题，请参考以下文章

java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC

响应式网站设计---Bootstrap

java 自适应响应式 网站 源码 SSM 生成 静态化 手机 平板 PC

java 网站源码 四套模版 在线编辑模版 兼容手机平板PC freemaker 静态引擎

java 网站源码 四套模版 兼容手机平板PC 在线编辑模版 freemaker 静态引擎

java企业站源码 响应式 兼容手机平板PC 主流SSM框架 freemaker 静态引擎