bootstrap学习:栅格实例-不同用户端不同界面-第一个向下移动

最新推荐文章于 2023-06-28 18:20:12 发布

¡Venceremo

最新推荐文章于 2023-06-28 18:20:12 发布

阅读量191

点赞数

分类专栏： bootstrap 文章标签：学习 bootstrap

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127958043

版权

bootstrap 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

push left偏移 pull右偏移

首先将四幅图按照 4321的顺序排列然后使用偏移使用大图的偏移

使用中图的偏移、使用小图的偏移注意使用的偏移不能跳因为移动优先

跳变了会使用小图的偏移

先进行大图的移动然后中图然后小图的移动

<!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" type="text/css" href="../bootstrap-3.4.1/dist/css/bootstrap.min.css">
		<script src="../../jQuery/js/jquery-3.6.1.js"></script>
		<script src="../bootstrap-3.4.1/dist/js/bootstrap.js"></script>
		<style>
			.thumbnail>img {
				width: 250px;
				height: 150px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 去组件中找 -->
			<div class="jumbotron">
				<h1>Hello, world!</h1>
				<p>...</p>
				<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
			</div>
			<div class="row">
				<!-- push left偏移  pull右偏移 -->

				<div class="col-lg-3 col-lg-push-9 col-md-4  col-md-push-8 col-sm-6  col-sm-push-6 col-xs-12">
					<!-- col-lg-3排四个 大图  中图3个  平板 -->
					<div class="thumbnail">
						<img src="../../img/a3.png" alt="...">
						<div class="caption">
							<h3>a3图片</h3>
							<p class="text-center">Center aligned text.</p>
							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.</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 class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6 col-xs-12">
					<!-- col-lg-3排四个 大图  中图3个  平板 -->
					<div class="thumbnail">
						<img src="../../img/a2.png" alt="...">
						<div class="caption">
							<h3>a2图片</h3>
							<p class="text-center">Center aligned text.</p>
							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.</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 class="col-lg-3 col-lg-pull-3  col-md-4 col-md-pull-8 col-sm-6  col-xs-12">
					<!-- col-lg-3排四个 大图  中图3个  平板 -->
					<div class="thumbnail">
						<img src="../../img/a1.png" alt="...">
						<div class="caption">
							<h3>a1图片</h3>
							<p class="text-center">Center aligned text.</p>
							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.</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 class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6 col-xs-12">
					<!-- col-lg-3排四个 大图  中图3个  平板 -->
					<div class="thumbnail">
						<img src="../../img/a0.png" alt="...">
						<div class="caption">
							<h3>a0图片</h3>
							<p class="text-center">Center aligned text.</p>
							<p>好看的Lorem ipsum dolor sit, amet consectetur adipisicing.</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>
		</div>
	</body>
</html>

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习:栅格实例-不同用户端不同界面-第一个向下移动

使用中图的偏移、使用小图的偏移注意使用的偏移不能跳因为移动优先。首先将四幅图按照 4321的顺序排列然后使用偏移使用大图的偏移。先进行大图的移动然后中图然后小图的移动。push left偏移 pull右偏移。跳变了会使用小图的偏移。
复制链接

扫一扫