bootstrap-2-栅格简单实例

目录

栅格实例效果

bootstrap-2-栅格简单实例

bootstrap-2-栅格简单实例

这个东西,不需要我们自己写,要去bootstrap当中找,这个东西有个学名,叫做缩略图。上面是一张图片,下面是图片的介绍。

bootstrap-2-栅格简单实例

<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

bootstrap-2-栅格简单实例

这么写的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-2-栅格简单实例

新需求

当进行响应式的时候,卡片向下掉的顺序是: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的时候
    • 同上原理。

错误

在这个实现新需求的过程中,我们遇到一个错误,效果如下:

bootstrap-2-栅格简单实例

bootstrap-2-栅格简单实例

最终需求实现的源码如下:

<!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-栅格简单实例

bootstrap-2-栅格简单实例

bootstrap-2-栅格简单实例

bootstrap-2-栅格简单实例

上一篇:第四周总结(css,bootstrap)


下一篇:一、BootStrap