h5
/
BS4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BootStrap4项目</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
		<script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
		<style type="text/css">
			/* .row>div {
				height: 50px;
				line-height: 50px;
			}

			.row>div:nth-child(odd) {
				background-color: #00F510;
				border: whitesmoke 1px solid;
			}

			.row>div:nth-child(even) {
				background-color: #00AAFF;
				border: whitesmoke 1px solid;
			} */

			ul>li {
				width: 100px;
				height: 100px;
				list-style: none;
				border: white 1px solid;
			}
			ul>li:nth-child(odd){
				background-color: #00AA7F;

			}
			ul>li:nth-child(even){
				background-color: #ffaa7f;
			}
			/* .row>div:nth-child(odd) {
				background-color: #ffaa7f;
				border: whitesmoke 1px solid;
			}

			.row>div:nth-child(even) {
				background-color: #00AAFF;
				border: whitesmoke 1px solid;
			} */
		</style>
	</head>
	<body>
		<!-- <div class="container">
			<div class="row">
				<div class="col-sm-8 col-md-12 col-lg-12">Header</div>
				<div class="col-sm-4 col-md-3 col-lg-2">Left</div>
				<div class="col-sm-9 col-md-9 col-lg-7">Main</div>
				<div class="col-sm-3 col-md-12 col-lg-3">Right</div>
				<div class="col">Footer</div>
			</div>
		</div> -->
		<div class="container">
			<ul class="row row-cols-1 row-cols-sm-3 row-cols-md-4 row-cols-lg-6">
				<li class="col">1</li>
				<li class="col">2</li>
				<li class="col">3</li>
				<li class="col">4</li>
				<li class="col">5</li>
				<li class="col">6</li>
				<li class="col">7</li>
				<li class="col">8</li>
				<li class="col">9</li>
				<li class="col">10</li>
				<li class="col">11</li>
				<li class="col">12</li>
			</ul>
		</div>

	</body>
</html>