收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap基础</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="dist/js/jquery-3.2.1.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.grid{
border:1px solid #aaa;
background-color: skyblue;
}
.orange{
border:1px solid #aaa;
background-color: orange;
}
.green{
border:1px solid #aaa;
background-color: #59d200;
}
</style>
</head>
<body>
<div>
<!-- 偏移相当于添加了透明的栅格 -->
<h2>列偏移前</h2>
<div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 green">444</div>
</div>
<h2>列偏移后</h2>
<div>
<div class="col-sm-4 col-md-offset-1 grid">444</div>
<div class="col-sm-4 col-md-offset-3 green">444</div>
</div>
</div>
<div>
<!-- 在每列中继续添加行，以父列为12等分 -->
<h2>列嵌套前</h2>
<div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 green">444</div>
<div class="col-sm-4 green">444</div>
</div>
<h2>列嵌套后</h2>
<div>
<div class="col-sm-4 grid">444
<div>
<div class="col-sm-4 orange">444</div>
<div class="col-sm-4 green">444</div>
<div class="col-sm-4 orange">444</div>
</div>
</div>
<div class="col-sm-4 green">444
<div>
<div class="col-sm-4 orange">444</div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 orange">444</div>
</div>
</div>
</div>
</div>
<div>
<!-- 排序，相对于原来的位置 -->
<h2>列排序前</h2>
<div>
<div class="col-sm-6 grid">6666</div>
<div class="col-sm-4 green">4444</div>
<div class="col-sm-2 orange">2222</div>
</div>
<h2>列排序后</h2>
<div>
<div class="col-sm-6 col-sm-push-6 grid">6666</div>
<div class="col-sm-4 col-sm-pull-4 green">4444</div>
<div class="col-sm-2 col-sm-pull-10 orange">2222</div>
</div>
</div>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
