利用Boostrap实现简单的响应式布局效果。

最新推荐文章于 2023-12-18 23:41:14 发布

I俩月亮

最新推荐文章于 2023-12-18 23:41:14 发布

阅读量276

点赞数 1

分类专栏： Boostrap

本文链接：https://blog.csdn.net/weixin_43798914/article/details/105032231

版权

Boostrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用两天时间看完了一些简单地Bootstrap教程，分享一下其中贼好用的响应式布局。
先摆一下屏幕大小像素：
col-xs- 超小屏幕手机 (<768px)
col-sm- 小屏幕平板 (≥768px)
col-md- 中等屏幕桌面显示器 (≥992px)
col-lg- 大屏幕大桌面显示器 (≥1200px)
**首先展示下大屏幕下的效果：**大屏幕下是横着展示三大块

**接下来是中等屏幕下的显示效果：**然后每行显示两块，第三块被挤到下一行。
在这里插入图片描述
**最后是小屏幕下的效果：**每一块占据一行。

随着屏宽度的变化，块排版会进行相应的变化，实现一个响应式布局。
附上详细代码：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				padding: 50px;
			}
		</style>
	</head>
	<body>
		<div class="row">
		  <div class="col-sm-6 col-md-4 col-lg-4">
		    <div class="thumbnail">
		      <img src="img/1.jpg">
		      <div class="caption">
		        <h3>专业团队</h3>
		        <p>伟大律师事务所，一折酬宾，二折优惠！律政先锋张益达，张大炮，斯内克竭诚为您服务，只要我方正常发挥，对方至少二十年！！！</p>
		        <p><a href="#" class="btn btn-default" role="button">了解详情</a> <a href="#" class="btn btn-primary" role="button">在线咨询</a></p>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4 col-lg-4">
		    <div class="thumbnail">
		      <img src="img/1.jpg">
		      <div class="caption">
		        <h3>专业团队</h3>
		        <p>伟大律师事务所，一折酬宾，二折优惠！律政先锋张益达，张大炮，斯内克竭诚为您服务，只要我方正常发挥，对方至少二十年！！！</p>
		        <p><a href="#" class="btn btn-default" role="button">了解详情</a> <a href="#" class="btn btn-primary" role="button">在线咨询</a></p>
		      </div>
		    </div>
		  </div>
		  <div class="col-sm-6 col-md-4 col-lg-4">
		    <div class="thumbnail">
		      <img src="img/1.jpg">
		      <div class="caption">
		        <h3>专业团队</h3>
		        <p>伟大律师事务所，一折酬宾，二折优惠！律政先锋张益达，张大炮，斯内克竭诚为您服务，只要我方正常发挥，对方至少二十年！！！</p>
		        <p><a href="#" class="btn btn-default" role="button">了解详情</a> <a href="#" class="btn btn-primary" role="button">在线咨询</a></p>
		      </div>
		    </div>
		  </div>
		</div>
	</body>
</html>

以上就是今天利用bootstrap搞定的一个简单的响应式布局！

I俩月亮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用Boostrap实现简单的响应式布局效果。

用两天时间看完了一些简单地Bootstrap教程，分享一下其中贼好用的响应式布局。先摆一下屏幕大小像素：col-xs- 超小屏幕手机 (<768px)col-sm- 小屏幕平板 (≥768px)col-md- 中等屏幕桌面显示器 (≥992px)col-lg- 大屏幕大桌面显示器 (≥1200px)**首先展示下大屏幕下的效果：**大屏幕下是横着展示三大块...
复制链接

扫一扫

专栏目录