Bootstrap（三）网页自适应---一个仿手机qq登录界面实例

第三章是关于bootstrap的自适应专题。本章主要围绕viewport的使用方法以及包含属性来具体讲解，合并会提出一个仿手机qq登录界面的实例来具体分析代码。

首先是界面的样式展示：

我们可以看到，这个界面分为这么几个部分：头像框，账户输入框，密码输入框，底部链。接下来贴出代码部分：

        <div class="container">
		<div>
			<img src="asset/img/1.jpg" class="img-circle img-responsive ava center-block">
		</div>
		<form role="form">
			<div class="form-group inpinfo">
				<input type="text" name="" class="form-control" placeholder="请输入账户">
				<input type="password" name="" class="form-control" placeholder="请输入密码">
			</div>
			<div>
				<button class="btn btn-primary btn-block">登录</button>
			</div>
		</form>
		<div class="navbar-fixed-bottom">
		<div class="col-xs-4 pull-left">
			<p class="text-left">无法登陆？</p>
			
		</div>
		<div class="col-xs-4 pull-right">
			<p class="text-right">新用户</p>			
		</div>
		</div>
	</div>

上述是body的源码。

接下来我们一句一句对代码进行分析，以及一些拓展。

首先是

<div class="container">

在bootstrap中，container样式是很重要的一块，它扮演着一个容器的角色，我们将最外层的div设为container，将所有的内部元素包裹起来，其中要注意的是，与container相似的还有一个container-fluid样式属性，这两者的区别在于，container限定了当前containerdiv的最大宽度，他是自适应的，但是当屏幕宽度超出或是小于一定的数值时，会造成边缘填充不完整，会有留白，而container-fluid从字面意思就可以看出来，它是完全自适应屏幕宽度的，我们称之为流式布局（fluid---液体，英语不好的同志抓点紧，敲黑板，必会单词），为什么在这里我们使用container而不是container-fluid的呢，因为还有一个名为row的属性，只可以用在container中，我们知道，bootstrap使用的是栅格系统，既所有的元素有row（行）和column（列）来布局，row最为div的属性，而column作为具体元素的属性，一般使用为

<div class="test panel col-xs-3 pull-right"></div>

这其中的col-xs-3就是在设定column的宽度（由1到12，总和大于12时，自动换行）。

接下来是头像部分。头像部分被我放置在一个无属性的div中（限于技术，我不确定写的是否正确，但是看起来是那么回事儿），接下是img标签。img标签中包括了src属性，用于调用图片，

class="img-circle img-responsive ava center-block"

在class中，我们使用了四个属性。第一个img-circle意思是将图片设为圆角为50%的矩形，就是圆形的意思，第二个img-responsive，意思是约束图片为响应式，既在浏览器大小变动时，图片随之变动（不等比）。第三个ava是自定义属性，全称avatar（头像的英语，自行学习），代码如下：

.ava{
    height: 60px;
    width: 60px;
    margin-top: 10%;
}

约束了宽高，和与顶部的距离。

第四个是center-block，实现的效果是使图片居中。这四个属性样式并无顺序。

接下来是form标签，其中的role属性是HTML5的一个特殊属性，用于强调语义，举个例子，我们要使用一个div作为button，这是我们将其role属性设为role="button"，硬件设备就可以将这个div认定为一个按钮。

 

在form中，包含两个div。第一个是输入部分，第二个是按钮。

第一个输入部分的div中，class属性包括form-group和inpinfo。第一个form-group的整体其实包括两个部分，label和input，在这里只有input部分。第二个inpinfo为自定义css样式：

.inpinfo{
    margin-top: 20%;
}

规定距离头像div  20%的距离。

输入部分包含两个输入框，账户输入框和密码输入框。先看第一个。

<input type="text" name="" class="form-control" placeholder="请输入账户">

我们将第一个input标签的类型设为text（文本类型），class类型包含form-control属性，意思是包含在form中的样式，placeholder意义为提示语。

第二个密码输入框：

<input type="password" name="" class="form-control" placeholder="请输入密码">

我们将此标签的type设为password，这时候我们输入文本的额时候，所显示的内容全部都为点。同样class的属性是form-control。

按钮部分，同样，我们使用了一个空属性的div来包裹按钮，

<button class="btn btn-primary btn-block">登录</button>

在class中，首先是btn属性，将当前按钮规定为bootstrap的按钮样式，后面的btn-primary将其规定为基础样式，btn-block设设定按钮为区块全屏显示。

最后是底部的样式。

                <div class="navbar-fixed-bottom">
			<div class="col-xs-4 pull-left">
				<p class="text-left">无法登陆？</p>
				
			</div>
			<div class="col-xs-4 pull-right">
				<p class="text-right">新用户</p>			
			</div>
		</div>

在底部样式中，我们使用了第一层div对其进行外层包裹，使用了navbar-fixed-bottom作为样式约束，意思为是作为底部导航栏固定在底部。其中第二层div，使用了col-xs-4属性样式，其中xs表示超小设备，我们同样可以使用sm，md，lg样式。第二个pull-left和第二个input的pull-right意思是左对齐右对齐。p标签中的text-left与text-right意思是将文本左对齐与右对齐。