BootStrap-栅格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--网页编码的类型-->
<meta charset="utf-8">
<!--使用最新的支持H5浏览器内核来解析-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
视口：在浏览器中一个虚拟的网页容器。参数：网页的宽度设置为设备的宽度 初始缩放比: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>不同屏幕的适配</title>
<style type="text/css">
.row div{
border: 1px solid green;
height: 100px;
}
</style>
<!-- 导入文件： -->
<link href="../static/css/" rel="stylesheet">
</head>
<body>
<div class="container">
<!--行-->
<div class="row">
<!--格子：在微型设备上占6列，在小型设备上占4列，在中型设备上占3列 -->
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
<div class="col-xs-6 col-sm-4 col-md-3">java</div>
</div>
</div>
<!-- 导入jQuery文件Bootstrap的所有JavaScript插件都依赖 jQuery，所以必须放在前边 -->
<script src="../static/js/jquery-3.1."></script>
<!-- 加载 Bootstrap的所有 JavaScript插件-->
<script src="../static/js/"></script>
</body>
</html>