<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--以移动设备为优先，user-scalable=no禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"</script>
<script src="bootstrap/js/bootstrap.min.js"</script>
<style type="text/css" media="screen">
div[class*="col-"]
{
border:1px solid grey;
}
</style>
</head>
<body>
<div class="container-fluid" style="background: #fff";>
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="image/栅格系统1.jpg" class="img-responsive img-thumbnail">
<h1 class="page-header">栅格系统1</h1>
<p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="image/栅格系统2.jpg" class="img-responsive img-thumbnail">
<h1 class="page-header">栅格系统2</h1>
<p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail">
<h1 class="page-header">栅格系统3</h1>
<p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img src="image/栅格系统3.jpg" class="img-responsive img-thumbnail">
<h1 class="page-header">栅格系统3</h1>
<p>我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。
网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。</p>
</div>
</div>
</body>
</html>
![]()
![]()
![]()
浙公网安备 33010602011771号