#用Bootstrap制作简易商品列表页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
body,ul,li{
padding: 0px;
margin: 0px;
list-style: none;
}
body{
height: 2000px;
padding-top:20px;
}
.item1,.item2,.item3,.item4{
width: 186px;
height: 140px;
float: left;
}
.item5{
width: 200px;
height: 140px;
float: right;
}
.item6{
width: 40%px;
height: 25px;
float: left;
}
.item7{
width: 20%px;
height: 25px;
float: left;
}
</style>
<link rel="stylesheet" href="./public/css/bootstrap.min.css">
<script src="./public/js/jQuery.1.12.4.js"></script>
<script src="./public/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">OPPO</a>
</div>
<!-- Collect the nav