栅格实例效果
这个东西，不需要我们自己写，要去bootstrap当中找，这个东西有个学名，叫做缩略图。上面是一张图片，下面是图片的介绍。
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
tips
这么写的a标签，是不会被点击的。
缩略图栅格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
a {
display: block;
text-align: center;
color: darkgrey;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>hello world!</h1>
</div>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../images/bootstrap.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../images/react.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../images/typescript.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../images/webpack.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by @mdo</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>
效果如下：
新需求
当进行响应式的时候，卡片向下掉的顺序是：bootstrap-react-typescript-webpack。
这个就要用到列排序。
第一个向下掉，证明这个卡片是在html的最后的位置。
所以我们第一步，是要在html当中，调整卡片的顺序，编写为：webpack-typescript-react-bootstrap。
在这个基础上，我们使用列排序。
- lg的时候
- bootstrap需要向左偏移，要增加right的距离，我们要设置col-lg-pull-9。
- react需要向左偏移，要增加right的距离，我们要设置col-lg-pull-3。
- typescript需要向右偏移，要增加left的距离，我们要设置col-lg-push-3。
- webpack需要向右偏移，要增加left的距离，我们要设置col-lg-push-3。
- md的时候
- 同上原理
- sm的时候
- 同上原理。
错误
在这个实现新需求的过程中，我们遇到一个错误，效果如下：
最终需求实现的源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
a {
display: block;
text-align: center;
color: darkgrey;
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>hello world!</h1>
</div>
<div class="row">
<div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
<div class="thumbnail">
<img src="../images/webpack.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by 4444</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 ">
<div class="thumbnail">
<img src="../images/typescript.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by 3333</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
<div class="thumbnail">
<img src="../images/react.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by 2222</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
<div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="../images/bootstrap.png" alt="bootstrap">
<div class="caption">
<h3>Bootstrap 编码规范</h3>
<a href="javascript:;" class="text-center">by 1111</a>
<p>Bootstrap 编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</html>
最终需求实现的效果如下：