bootstrap学习补充

眼高手低是大的忌讳,这个简单的东西,拿不下,总觉得不是那么回事!

 

<!DOCTYPE html>
<html>
<head>
	<title>bootstrap学习</title>
	<style type="text/css">
			*{
				padding: 0;
				margin:0;
			}
			.container {
				height: 150px;
				background-color: pink;
				margin: 0 auto;
			}	

			/* 看样我这个媒体查询有错误!*/
			/*  768 ,992 ,1200*/	
			/*媒体查询*/
			@media screen and(max-width: 767px){
				.container{
					width:100%;	
				}
			}

			@media screen and (min-width:768px){
				.container{
				   width:750px;
				}
				
			}

			@media screen and (min-width: 992px){
				.container{
					width:970px;
				}
			}

			@media screen and (min-width: 1200px){
				.container{
					width:1170px;
				}
				
			}

	</style>
</head>
<body>

	<div class="container">
		
	</div>

</body>
</html>

 

在不同的屏幕宽度,显示不同的样式的写法,用到了媒体查询!

 

 

这个没啥讲的,不过, 媒体查询,后面的是会层叠掉前面的! 这个和css特性一样

 

如上图,加入有个宽度是 1000px ,那么 >768px 也满足, >992px 也满足,此时就会以 992 为准,

这就是我理解的层叠!

 

bootstrap 的核心就是媒体查询,分为如下几档

768px  100%

992px  970px

1200px 1170px

发布了200 篇原创文章 · 获赞 13 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览