<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--Type of web encoding-->
<meta charset="utf-8">
<!--Use the latest supported H5 browser kernel to parse-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
Viewport: A virtual web container in the browser. Parameters: The width of the web page is set to the width of the device. Initial scaling ratio: 1:1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* be placed at the front, and any other content *must* follow them! -->
<title>Adaptation of different screens</title>
<style type="text/css">
.row div{
border: 1px solid green;
height: 100px;
}
</style>
<!-- Import file: -->
<link href="../static/css/" rel="stylesheet">
</head>
<body>
<div class="container">
<!--Road-->
<div class="row">
<!--Grid: occupies 6 columns on micro devices, 4 columns on small devices, and 3 columns on medium devices -->
<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>
<!-- All JavaScript plugins that import jQuery file Bootstrap rely on jQuery, so they must be placed before -->
<script src="../static/js/jquery-3.1."></script>
<!-- Load all JavaScript plugins for Bootstrap -->
<script src="../static/js/"></script>
</body>
</html>
