码迷,mamicode.com
首页 > 其他好文 > 详细

栅格综合应用

时间:2020-06-06 00:50:53      阅读:26      评论:0      收藏:0      [点我收藏+]

标签:containe   手机屏幕   fse   htm   order   nta   电脑   height   天猫   

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

栅格综合应用

标签:containe   手机屏幕   fse   htm   order   nta   电脑   height   天猫   

原文地址:https://www.cnblogs.com/weixin2623670713/p/13052920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!