响应式布局-栅格系统

最新推荐文章于 2024-05-06 10:59:29 发布

是维玉呀

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量701

点赞数 2

分类专栏：知识储备文章标签：前端 javascript css bootstrap html

本文链接：https://blog.csdn.net/weixin_62361880/article/details/129485405

版权

知识储备专栏收录该内容

1 篇文章 0 订阅

订阅专栏

响应式布局

1、定义容器

容器分类：container、container-fluid

2、定义元素

col-设备代号-格子数目

设备代号：xs：超小 sm：小 md：中 lg：大

注意

工具

实现一、两边留有空白6张图片的布局

实现二、 container 与container-fluid混合使用

实现三、左右结构

实现四、左中右结构

响应式布局
           * 同一套页面可以兼容不同分辨率的设备。
           * 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子
           * 步骤：
               1. 定义容器。
                   * 容器分类：
                       1. container：两边留有空白
                       2. container-fluid：每一种设备都是100%宽度（即两边没有空白）
               2. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目
                   * 设备代号：
                       1. xs：超小屏幕手机 (<768px) :col-xs-12
                       2. sm：小屏幕平板 (≥768px)
                       3. md：中等屏幕桌面显示器 (≥992px)
                       4. lg：大屏幕大桌面显示器 (≥1200px)

               * 注意：
                   1. 一行中如果格子数目超过12，则超出部分自动换行。
                   2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
                   3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。

工具：HBuilder、谷歌浏览器、bootstrap插件、jquery-2.1.0.js插件

bootstrap插件在Bootstrap中文网下载。

Bootstrap中文网https://www.bootcss.com/

实现一、两边留有空白6张图片的布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<style type="text/css">
			img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		
		<div class="container-fluid">
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/cbd.jpg"/>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/muwu.jpg"/>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/shuijiao.jpg"/>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/yuantiao.jpg"/>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/cbd.jpg"/>
			</div>
			<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
				<img src="img/muwu.jpg"/>
			</div>
		</div>
	</body>
</html>

实现步骤：一、打开HBuilder软件将下载好的bootstrap的插件和jquery引入。

实现步骤：二、定义容器，这里使用div盒子。class选择器选择容器类别为container-fluid。

  实现步骤：三、定义元素，设置一个<div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                                                                        <img src="img/cbd.jpg"/>
                                                           </div>

col-设备号-格子数，是在各种设备上的占格子数。

注意：图片不设置宽度为100%，图片会重叠在一起

在lg大屏幕显示的效果图：

在sm小屏幕显示的效果图：

实现二、 container 与container-fluid混合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>container 与container-fluid混合使用</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<style type="text/css">
			.container-fluid{
				/*设置容器内边距为0*/
				padding: 0px;
			}
			img{
				/*设置图片宽度为100%，即占满格子*/
				width: 100%;
			}
		</style>
	</head>
	<body>
		<!--1-->
		<div class="container-fluid">
			<img src="img/案例4/top_banner.jpg"/>
		</div><br /><br />
		<!--2-->
		<div class="container">
			<input type="text" placeholder="请输入搜索内容" class="col-lg-11 col-md-11 col-sm-10 col-xs-10"/>
			<button class="col-lg-1 col-md-1 col-sm-2 col-xs-2">搜索</button>
		</div><br /><br />
		<!--3-->
		<div class="container-fluid">
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<img src="img/案例4/one.jpg"/>
				<span>图片01</span>
			</div>
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<img src="img/案例4/one.jpg"/>
				<span>图片02</span>
			</div>
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<img src="img/案例4/one.jpg"/>
				<span>图片03</span>
			</div>
			<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
				<img src="img/案例4/one.jpg"/>
				<span>图片04</span>
			</div><br /><br />
			<!--4-->
			<div class="container">
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<img src="img/案例4/two.jpg"/>
					<span>图片aa</span>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<img src="img/案例4/two.jpg"/>
					<span>图片bb</span>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
					<img src="img/案例4/two.jpg"/>
					<span>图片cc</span>
				</div>
				
			</div>
		</div>
	</body>
</html>

实现二效果图：

实现三、左右结构（因为是自己查看，就没写更多的注释，直接展示代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左右结构</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			img{
				width: 100%;
			}
			.container{
				text-align: center;
			}
			span{
				text-decoration:line-through ;
			}
			b{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div class="container">
			<!--左-->
			<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
				<img src="img/案例三/Korea.jpg"/>
				<p>韩国美食购物游</p>
				<span>原价：￥6999.00</span>
				<b>现价：￥3998.00</b>
			</div>
			<!--右-->
			<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/one.jpg"/>
					<p>巴厘岛度假游-冲浪、海鲜</p>
					<span>原价：￥3998.00</span>
					<b>现价：￥2998.00</b>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/three.jpg"/>
					<p>阿联酋迪拜游-冲浪、海鲜</p>
					<span>原价：￥11998.00</span>
					<b>现价：￥4998.00</b>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/two.jpg"/>
					<p>海南三亚休闲游</p>
					<span>原价：￥5998.00</span>
					<b>现价：￥1888.00</b>
				</div>
					<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/one.jpg"/>
					<p>巴厘岛度假游-冲浪、海鲜</p>
					<span>原价：￥3998.00</span>
					<b>现价：￥2998.00</b>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/three.jpg"/>
					<p>阿联酋迪拜游-冲浪、海鲜</p>
					<span>原价：￥11998.00</span>
					<b>现价：￥4998.00</b>
				</div>
				<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
					<img src="img/案例三/two.jpg"/>
					<p>海南三亚休闲游</p>
					<span>原价：￥5998.00</span>
					<b>现价：￥1888.00</b>
				</div>
			</div>
		</div>
		
		
	</body>
</html>

实现三效果图：

实现四、左中右结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>左中右结构</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<style type="text/css">
			img{
				width: 100%;
			}
			.container{
				text-align: center;
			}
			span{
				text-decoration:line-through ;
			}
			b{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div class="container">
			<!--左-->
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
				<img src="img/案例三/Korea.jpg"/>
				<p>韩国美食购物游</p>
				<span>原价：￥6999.00</span>
				<b>现价：￥3998.00</b>
			</div>
			<!--中1-->
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
				<img src="img/案例三/one.jpg"/>
					<p>巴厘岛度假游-冲浪、海鲜</p>
					<span>原价：￥3998.00</span>
					<b>现价：￥2998.00</b>
				<img src="img/案例三/three.jpg"/>
					<p>阿联酋迪拜游-冲浪、海鲜</p>
					<span>原价：￥11998.00</span>
					<b>现价：￥4998.00</b>
			</div>
			<!--中2-->
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
				<img src="img/案例三/one.jpg"/>
					<p>巴厘岛度假游-冲浪、海鲜</p>
					<span>原价：￥3998.00</span>
					<b>现价：￥2998.00</b>
				<img src="img/案例三/three.jpg"/>
					<p>阿联酋迪拜游-冲浪、海鲜</p>
					<span>原价：￥11998.00</span>
					<b>现价：￥4998.00</b>
			</div>
			<!--右-->
			<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
				<img src="img/案例三/Korea.jpg"/>
				<p>韩国美食购物游</p>
				<span>原价：￥6999.00</span>
				<b>现价：￥3998.00</b>
			</div>
		</div>
		
	</body>
</html>

实现四效果图：

本文章仅个人学习记录，欢迎各位学者参考指点！！！

是维玉呀

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
响应式布局-栅格系统

3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行。指定该元素在不同的设备上，所占的格子数目。1. xs：超小屏幕手机 (<768px) :col-xs-12。工具：HBuilder、谷歌浏览器、bootstrap插件、jquery-2.1.0.js插件。实现步骤：二、定义容器，这里使用div盒子。* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。实现步骤：一、打开HBuilder软件将下载好的bootstrap的插件和jquery引入。
复制链接

扫一扫