bootstrap 栅格化布局二

最新推荐文章于 2023-03-13 00:53:22 发布

purple_lumpy

最新推荐文章于 2023-03-13 00:53:22 发布

阅读量390

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/82082353

bootstrap 专栏收录该内容

8 篇文章

订阅专栏

博客介绍了通过官网文档查看不同屏幕尺寸对应的Bootstrap类名，如超小屏幕手机用.col-xs-等。还阐述了响应式（媒体查询）原理，可通过min-width和max-width自定义css样式，并给出例子，最后提到响应式应用中clearfix可清除浮动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可以通过官网的文档链接查看下表

超小屏幕手机（<768px） .col-xs-

小屏幕平板（>=768px） .col-sm-

中等屏幕桌面显示器（>=992px） .col-md-

大屏幕大桌面显示器（>=1200px） .col-lg-

响应式（媒体查询）允许在一定条件下，自定义 css 样式，两个属性： min-width, max-width. （bootstrap响应式原理）

min-width,max-width例子

min-width 400px 最小值为400px 400以上都采用制定的样式。

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<meta charset="utf-8">
	<!-- 适应移动端 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		#dv{
			font-size: 14px;
			border:1px solid #ff0000;
		}
		@media screen and (min-width: 400px){
			#dv{
				font-size: 12px;
				border:1px solid #00ff00;
			}
		}
		@media screen and (max-width: 600px){
			#dv{
				font-size: 16px;
				border: 1px solid #0000ff;
			}
		}
	</style>
</head>
<body>
	<div id="dv">
		aaa
	</div>
</body>
</html>

响应式应用：

		<div class="row">
			<div class="col-sm-3 col-md-9">111</div>
			<div class="col-sm-9 col-md-3">222</div>
		</div>

clearfix 清除浮动。