第三章是关于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"

.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%;
}

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

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

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

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

                <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>