<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css"/>
<style type="text/css">
div{
border: 1px solid red;
}
.row{
margin: 0px 15px;
}
</style>
</head>
<body>
<!--
Bootstrap中间的行我们用的是row
contaier 它里面主要做的是排列和内补
我们的row是需要再contaier中使用的，但是并不是绝对的
@media = 自动选择媒体
媒体是什么？
媒体就是我们的屏幕，例如，笔记本电脑屏，电视屏幕，台式机屏幕，手机屏幕，平板电脑屏幕
col-xs/sm/md/lg-*
栅格最多为12格
再整个bootstrap当中所有的高度都是auto
我们的栅格有点向我们的table
但是我们的class="row" 他就有点想我们的tr
class = "col-md-1" 和我们的class= "col-md-6" 他就有点向我们的<td cols='3'><td cols='6'>
row当中給你设置了一个margin: 0 -15px
列偏移：利用的是我们的offset类
-->
<div class="container">
<div class="row">
<div class="col-md-2">
主题市场
</div>
<div class="col-md-10">
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
<a href="">天猫</a>
</div>
</div>
<div class="row" style="height: 300px;">
<div class="col-md-2" style="height: 100%;">
我是最左边
</div>
<div class="col-md-7" style="height: 100%;">
<div class="col-md-6" style="height: 49.999999%;">
我是上左
</div>
<div class="col-md-6" style="height: 49.999999%;">
我是上右
</div>
<div class="col-md-6" style="height: 49.999999%;">
我是下左
</div>
<div class="col-md-6" style="height: 49.999999%;">
我是下右
</div>
</div>
<div class="col-md-3" style="height: 100%;">
我是最右边
</div>
</div>
<div class="row">
<div class="col-md-2">
栅格1
</div>
<div class="col-md-2">
栅格1
</div>
<div class="col-md-2">
栅格1
</div>
<div class="col-md-2">
栅格1
</div>
<div class="col-md-2">
栅格1
</div>
</div>
</div>
</body>
</html>