<!--h5文档申明-->
<!DOCTYPE html>
<!--文档语言申明 en zh-CN zh-tw -->
<html lang="zh-CN">
<head>
<!--文档编码申明-->
<meta charset="utf-8">
<!--要求当前网页使用浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!-- 优先加载和浏览器解释 -->
<title>title</title>
<!-- Bootstrap 核心样式-->
<link href="../lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- html5shiv 和 respond 分别用来解决IE8版本浏览器不支持 H5标签和媒体查询的 不兼容问题-->
<!-- HTML5 shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- 警告：不能以file形式打开，本地打开。最好http://打开 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 在 IE 9 一下引入-->
<!--[if lt IE 9]>
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.min.js"></script>
<![endif]-->
<style>
.container{
height: 100px;
background: pink;
}
.container > .row{
height: 50px;
background: green;
}
.container > .row > div{
height: 25px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<!--响应式布局容器-->
<div class="container">
<!--栅格系统：其实就是行和列的布局，网格状布局-->
<!--行：row-->
<!-- .container容器默认有15px的左右内间距 .row 填充父容器的15px的左右内间距 margin-left,margin-right -15px拉伸 -->
<div class="row">
<!--列：col-*-* *不确定（参数） -->
<!--
col：列样式
第一个*：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身 width>= 1200
中屏设备 md 中屏设备以上生效包含本身 1200<= width <=992
小屏设备 sm 小屏设备以上生效包含本身 992<= width <=768
超小屏设备 xs 超小屏设备以上生效包含本身 width <=768
第二个*：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
-->
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
<div class="col-xs-4"></div>
</div>
</div>
<!-- bootstrap依赖jquery-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../lib/jquery/jquery.min.js"></script>
<!-- bootstrap js 核心文件-->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
扫一扫
08-12
720
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
