<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<title>栅格系统扩展</title>
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css">
<!--[if lt IE 9]
<script src="../lib/html5shiv/html5shiv.js"></script>
<script src="../lib/respond/respond.min.js"></script>
[endif]-->
<link rel="stylesheet" href="../css/index.css">
<style>
.container {
height: 350px;
background-color: hotpink;
}
.container > .row {
height: 100px;
background-color: green;
}
/*会有15的两侧边距*/
.container > .myRow {
height: 150px;
background-color: red;
}
.container > .row div {
height: 50px;
border: 1px solid #ddd;
}
.container > .row > .row {
height: 25px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!--列：col-*-* *不确定（参数） -->
<!--
col：列样式
第一个*：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个*：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
-->
<div class="col-lg-4">
<!--栅格嵌套-->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
<div class="col-lg-4">
<!--列的偏移-->
<div class="row">
<div class="col-lg-3"></div>
<!--抵消-->
<div class="col-lg-6 col-lg-offset-3"></div>
</div>
</div>
<div class="col-lg-4">
<!--列的排序-->
<div class="row">
<!--
pull 往前拉 向左
push 往后推 向右
-->
<div class="col-lg-3 col-lg-push-9">
3
</div>
<div class="col-lg-9 col-lg-pull-3">
9
</div>
</div>
</div>
</div>
<div class="myRow">
</div>
</div>
<script src="../lib/jquery/jquery.js"></script>
<script src="../lib/bootstrap/js/bootstrap.js"></script>
<script src="../js/index.js"></script>
</body>
</html>
扫一扫
448
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
