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. ASP.NET Core-组件-后台任务：Hangfire

    ylbtech-ASP.NET Core-组件-后台任务:Hangfire Hangfire作为一款高人气且容易上手的分布式后台执行服务,支持多种数据库.在.net core的环境中,由Core自带的 ...

  2. 8.QList QMap QVariant

    QList int main1(int argc, char *argv[]) { QApplication a(argc, argv); QList<,,}; mylist << ...

  3. 为IT程序员量身定制的12个目标——很经典

    对程序员们来说挑战自我非常重要,要么不断创新,要么技术停滞不前.新年伊始,我整理了12个月的目标,每个目标都是对技术或个人能力的挑战,而且可以年复一年循环使用. 01. 变得有耐心 02. 保持健康 ...

  4. DOM相关知识点

    内容待补充... DOM相关注意题目: DOM的最小组成单位叫做 //节点 Node DOM 有自己的国际标准,目前的通用版本是 //DOM 3 DOM 树的根节点 //HTML 元素 Element ...

  5. android webview一些注意事项（持续更新）

    1.loadUrl() 的参数必须“http://”开头: 2.如果用到内部类获取页面内容,此类不能混淆: 3.2中情况保持不混淆需要将webview所在的包都保持不混淆,常规的保持类不混淆不生效: ...

  6. where条件顺序与建索引顺序

    查询时,如果数据量很大,where 后面的条件与建索引的顺序相同,也没有什么多少差别,聚集索引稍微快点; 但where 后面的条件与建索引顺序不同,速度会慢下来,到底慢多少,不同的机器会不一样,没有绝 ...

  7. 数据库自动备份压缩脚本(备份最近七天，七天之前自动删除，只保留rar文件)

    把下面脚本添加到服务器计划任务中去,设置为每天执行即可,文件备份路径即为脚本所在路径,必须安装压缩文件 @echo offrem 计算指定天数之前的日期,用于后面删除指定天数的数据set DaysAg ...

  8. TCP基本概念

    TCP协议是一个复杂的.可靠的字节流协议.不通用UDP协议. TCP提供客户与服务器之间的连接.TCP客户先与给定的服务器建立一个连接,再跨该连接与服务器交换数据,最后终止这个连接. TCP提供了可靠 ...

  9. vertical-align到底是个啥

    https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align http://phrogz.net/css/vertical-align ...

  10. 如何在React-Native上使用Typescript

    首先安装脚手架: $ yarn global add create-react-native-app 创建项目: create-react-native-app xxx 进入项目并启动: cd xxx ...