bootstrap-2-栅格简单实例

栅格实例效果
tips
缩略图栅格
新需求
错误

栅格实例效果

这个东西，不需要我们自己写，要去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>

最终需求实现的效果如下：

bootstrap-2-栅格简单实例

栅格实例效果

tips

缩略图栅格

新需求

错误

相关文章