<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/juqery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/comm.js" type="text/javascript" charset="utf-8"></script>
<title>Document</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="#" class="navbar-brand">商品分类</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#Nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="Nav">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">白酒</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">红酒</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="Dropdown" data-toggle="dropdown">普通酒</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">白葡萄酒</a>
<a href="#" class="dropdown-item">红葡萄酒</a>
<a href="#" class="dropdown-item">黄葡萄酒</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<div class="container mt-3">
<div class="row">
<aside class="col-lg-3 col-12 d-lg-block d-none">
<div class="list-group">
<button type="button" class="list-group-item active" disabled>中国</button>
<button type="button" class="list-group-item">法国</button>
<button type="button" class="list-group-item">美国</button>
<button type="button" class="list-group-item">加拿大</button>
</div>
</aside>
<!-- <aside class="col-lg-3 col-12 d-lg-block d-none mb-2">
<div class="list-group d-flex flex-grow justify-content-between align-items-center">
<button type="button" class="list-group-item active p-1" disabled>中国</button>
<button type="button" class="list-group-item p-1">法国</button>
<button type="button" class="list-group-item p-1">美国</button>
<button type="button" class="list-group-item p-1">加拿大</button>
</div>
</aside> -->
<article class="col-lg-9 col-12">
<div class="media">
<img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" width="60" alt="">
<div class="media-body ml-2">
<h4 class="media-heading">白葡萄酒</h4>
<p>白葡萄酒含有多种维生素，营养丰富，具有舒筋、活血、养颜、润肺之效</p>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
<h4>详情</h4>
</li>
<li class="list-group-item">
<h5>价格：140.00</h5>
<p>包邮</p>
</li>
<li class="list-group-item">
<h5>240ml</h5>
<p>30度</p>
</li>
</ul>
<div class="float-right mt-3">
<ul class="pagination">
<li class="page-item">
<a href="#" class="page-link">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</div>
</article>
</div>
</div>
<footer class="jumbotron"></footer>
</body>
</html>
前端框架bootstrap信息分类-练习demo
需积分: 9 93 浏览量
2022-11-13
21:08:35
上传
评论 1
收藏 126KB RAR 举报
bootstrap信息分类-练习demo.rar （8个子文件） 
11.12bootstrap信息分类 css 
bootstrap.min.css 156KB img 
wine.jpg 53KB
footer.html 136B js juqery.min.js 86KB bootstrap.min.js 59KB popper.js 21KB comm.js 52B category.html 5KB资源评论
