这一篇文章主要讲解Bootstrap的布局组件

在我们传统的网页开发的时候，布局往往会花费我们大量的时间。而利用Bootstrap框架，我们就可以通过Bootstrap的布局组件轻松的实现，只需要简单的代码，我们就可以写出美观，实用的页面布局，话不多说，我们就来看下Bootstrap的布局组件吧。

布局容器

Bootstrap提供了两个方便的布局容器。.container和.continer-fluid.这两个容器都是用来确定整个页面的宽度的。

.container是固定宽度，页面和窗体之前留有一篇很大的空白。.continer-fluid的宽度是100%，主要用于扁平化的设计。

通过查看Bootstrap.css的源代码我们可以看到，.container是有三个媒体查询的适应不同的尺寸设定不同的固定宽度，而.container-fluid只有一个固定的15px的左右padding，其宽度是自适应屏幕的100%。

栅格系统

栅格系统是Bootstrap的最大的特色，很多的框架都有效仿它的这个思想。它的结构类似于表格，用.row表示行，.col表示列，一行最多是12列。

栅格系统的原理就是以.container或者.container-fluid容器作为基点，用col通过百分比的方式划分整个容器。它的基本的代码结构就是这样的。

<div class="container-fluid">
   <div class="row">
	<div class="col-md-4">我占据三分之一</div>
	<div class="col-md-4">我占据三分之一</div>
	<div class="col-md-4">我占据三分之一</div>
   </div>
</div>

.col-屏幕类型-列的占比就是.row的组成部分，列的占比为1~12，以12作为基数来划分，每一行最多就是12列，如果是超出了12列就好另起一行。

在上面的例子中间我们引入了屏幕类型的概念。在Bootstrap中，对多有类型的屏幕做了四个划分。

xs：超小类型的屏幕（<768px）

sm：小屏幕的平板（>=768px）

md：中等屏幕的显示器（>992px）

lg：大屏幕大桌面显示器（>=992px）

使用栅格系统，我们可以轻松的实现手机，平板，桌面的响应式应用。

<!--手机、平板和桌面响应式应用-->
<div class="container">
	<div class="row">
		<div class="col-sm-3 col-md-6 col-lg-8 bg-danger" >手机3平板6大屏8</div>
		<div class="col-sm-9 col-md-6 col-lg-4 bg-info">手机9平板6大屏4</div>
	</div>
</div>

这就是一个典型的响应式布局的案例。我们通过栅格系统将整个容器划分为两列，在小屏幕平板下，左边一列占据25%，右边的占据75%，在中等屏幕下左边和右边个占据一半，而在大屏幕下，左边占据66.7%，右边占据33.3%。

响应式列重置（强制清除浮动，解决元素塌陷）

这里就要再次提到上一遍讲过的一个实用工具.clearfixl 了。我们先来看一个典型的不清楚浮动的案例

<!--响应式列重置（强制清除浮动，解决元素塌陷）-->
<!--不清楚浮动的情况-->
<div class="container-fluid">
	<div class="row">
	    <div class="col-md-6">我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。</div>
	    <div class="col-md-6">我占据一半</div>
	    <div class="col-md-6">我的显示可能不正常了</div>
	    <div class="col-md-6">我占据一半</div>
	</div>
</div>

可以看到，本来应该另起一行的下面两个div因为受第一个div浮动的影响，直接挤到上面去了，这就是不清除浮动造成的元素塌陷的问题，这个时候我们就需要在需要另起一行的div之前加一个空的div，然后清除掉浮动。我们在清楚了浮动后再看一下效果。

<!--清除浮动后的效果-->
<div class="container-fluid">
	<div class="row">
		<div class="col-md-6">我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。我的内容比较多，所以我的高度也就高了，我重复重复。</div>
		<div class="col-md-6">我占据一半</div>
		<div class="clearfix"></div>
		<div class="col-md-6">哈哈，我应该能正常显示了</div>
		<div class="col-md-6">我占据一半</div>
	</div>
</div>

可以看到，在清除掉浮动之后，下面的div已经可以正常的另起一行显示了，也就是元素塌陷的问题被解决了。

面板

面板也是Bootstrap非常常用的一个的一个布局组件

我们先来看下它的基本结构和具体效果

<div class="panel panel-warning">
	<div class="panel-heading">
		<h3 class="panel-title">我是面板的标题</h3>
	</div>
	<div class="panel-body panel-info">
		我是面板的内容
	</div>
	<div class="panel-footer ">
		我是面板的底部
	</div>
</div>

在这个面板的结构里面，.panel定义面板的结构，.panel-heading是面板的头部，.panel-title是面板的标题，.panel-body是面板的主体，.panel-footer是面板的底部，和文本颜色一起背景颜色的设定类似，面板的底部和头部都有6种的情景色可以设定，前面的文章已经多次提过这边就不赘述了。

还有一点要注意的是，面板的每一个部分都不是必须的，特别是底部，在开发的过程中，我们完全可以根据具体的需求随意组合。

这里还介绍一种基本面板的进阶版——折叠面板，也称为手风琴面板。

<!--折叠面板-->
<div class="panel-group" id="accord">
   <div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">
			<a href="#accord-1" data-toggle="collapse" data-parent="#accord">第一个面板</a>
		</h3>
	</div>
        <div id="accord-1" class="panel-collapse collapse in">
                <div class="panel-body">
			第一个面板的内容
		</div>
	</div>
   </div>
   <div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">
			<a href="#accord-2" data-toggle="collapse" data-parent="#accord">第二个面板</a>
		</h3>
	</div>
       <div id="accord-2" class="panel-collapse collapse in">
	      <div class="panel-body">
		    第二个面板的内容
	      </div>
	</div>
   </div>
</div>

在这段结构中.panel-group是面板组，data-toggle=“collapse”是制定动作为折叠，data-parent=“#accord”是指定为同一个面板，这个ID是可以根据自己的命名习惯自行设定的，.collapse是折叠的类，.in是展开面板，两个不同的面板之前用的是锚点的关系连接起来的。

好了，关于Bootstrap的布局组件就讲的差不多了，下一篇我们再来讲解Bootstrap的表单布局。