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. spark transform系列__sortByKey

    该函数主要功能:通过指定的排序规则与进行排序操作的分区个数,对当前的RDD中的数据集按KEY进行排序,并生成一个SHUFFLEdrdd的实例,这个过程会运行shuffle操作,在运行排序操作前,sor ...

  2. android:QQ多种側滑菜单的实现

    在这篇文章中写了 自己定义HorizontalScrollView实现qq側滑菜单 然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样 第一种效果 另外一种效果 第三种效果 ...

  3. ELF文件格式定义

    ELF(Executable and Linking Format)是一种对象文件的格式,用于定义不同类型的对象文件(Object files)中都放了什么东西.以及都以什么样的格式去放这些东西.它自 ...

  4. 【POJ 1704】 Georgia and Bob

    [题目链接] http://poj.org/problem?id=1704 [算法] 阶梯博弈 [代码] #include <algorithm> #include <bitset& ...

  5. DB-MySQL：MySQL 正则表达式

    ylbtech-DB-MySQL:MySQL 正则表达式 1.返回顶部 1. MySQL 正则表达式 在前面的章节我们已经了解到MySQL可以通过 LIKE ...% 来进行模糊匹配. MySQL 同 ...

  6. CXF WebService中传递复杂对象(List、Map、Array)

    转自:https://wenku.baidu.com/view/047ce58ed0d233d4b14e69eb.html 现在开始介绍传递复杂类型的对象.如JavaBean.Array.List.M ...

  7. vue.js和node.js的认识

    首先vue.js 是库,不是框架,不是框架,不是框架. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你 ...

  8. SQL Server 从字符串中提取中文、英文、数字

    --[提取中文] IF OBJECT_ID('dbo.fun_getCN') IS NOT NULL DROP FUNCTION dbo.fun_getCN GO create function db ...

  9. DirectUI界面编程（一）创建第一个应用

    1.获取Duilib库文件 通过上一节大家对DirectUI界面设计有了初步的了解,本节开始我们一起学习Duilib界面库的使用. 首先我们需要获取Duilib库,目前最新版本为2.0,最新版本源码托 ...

  10. Ubuntu 16.04 Go环境搭建 Go环境+Sublime配置

    Ubuntu 16.04 Go环境搭建 Go环境+Sublime配置 1. 安装Go 下载地址https://golang.org/dl/ (需要翻下) 下载到类似go1.8.3.linux-amd6 ...