您的位置：首页 > Web前端 > BootStrap

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

2017-06-10 13:53 369 查看

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>

至此。本页面的开发完毕。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航