<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/bootstrap.css">
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/tourSite.menu.js"></script>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<title>Document</title>
<style>
.active {
color: #ff6767 !important;
}
.nav-item>.nav-link:hover{
color: #ff6767 !important;
}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 导航栏 -->
<nav class="navbar navbar-dark bg-dark navbar-expand-lg py-0">
<!-- 导航栏品牌 -->
<a href="#" class="navbar-brand"><img src="./img/header/meishi.png" alt=""></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="menu">
<!-- 导航栏导航 -->
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a href="" class="nav-link">首页</a></li>
<li class="nav-item"><a href="./caipu.html" class="nav-link">菜谱</a></li>
<li class="nav-item"><a href="" class="nav-link">食材</a></li>
<li class="nav-item"><a href="" class="nav-link">健康</a></li>
<li class="nav-item"><a href="" class="nav-link">专题</a></li>
<li class="nav-item"><a href="" class="nav-link">笔记</a></li>
<li class="nav-item"><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" data-toggle="dropdown">更多</a>
<!-- 下拉菜单内容 -->
<div class="dropdown-menu">
<a href="./tourRoutes.html?region=0" class="dropdown-item">烘焙</a>
<a href="./tourRoutes.html?region=1" class="dropdown-item">妈妈派</a>
</div>
</li>
</ul>
<div class="float-right">
<ul class="breadcrumb bg-transparent px-0 pb-0">
<li class="breadcrumb-item">
<a href=""><img src="./img/header/care.png" alt=""></a>
</li>
<li class="breadcrumb-item">
<a href=""><img src="./img/header/order.png" alt=""></a>
</li>
<li class="breadcrumb-item">
<a href=""><img src="./img/header/shop_car.png" alt=""></a>
</li>
<li class="breadcrumb-item"><a href="./login.html" class="text-white">注册/登录</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-2 col-sm-12">
<a href="./index.html" class="navbar-brand"><img src="./img/header/logo.png" alt=""></a>
</div>
<div class="col-lg-6 col-sm-12 mt-2 px-0">
<div class="navbar navbar-expand-sm pl-0">
<ul class="navbar-nav list-unstyled">
<li class="nav-item"><a href=""
class="nav-link text-dark h5 active">首页</a></li>
<li class="nav-item"><a href="./caipu.html" class="nav-link text-dark h5">菜谱</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">食材</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">健康</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">专题</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">笔记</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">社区</a>
</li>
<li class="nav-item"><a href="" class="nav-link text-dark h5">活动</a>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-sm-12 mt-3 mb-2">
<div class="input-group">
<input type="text" placeholder="请输入你想要搜索的内容" class="form-control">
<a href="./list.html"><img src="./img/header/search.png" alt="" class="img_size"></a>
</div>
</div>
</div>
<div id="demo" class="carousel" data-ride="carousel">
<!-- 图片 -->
<div class="carousel-inner">
<div class="carousel-item active"><img class="w-100" src="./img/index/banner1.png" alt=""></div>
<div class="carousel-item"><img class="w-100" src="./img/index/banner2.png" alt=""></div>
<div class="carousel-item"><img class="w-100" src="./img/index/banner3.png" alt=""></div>
<div class="carousel-item"><img class="w-100" src="./img/index/banner4.png" alt=""></div>
</div>
<!-- 指示器 -->
<ul class="carousel-indicators">
<li class="active" data-target="#demo" data-ride-to="0"></li>
<li data-target="#demo" data-ride-to="1"></li>
<li data-target="#demo" data-ride-to="2"></li>
<li data-target="#demo" data-ride-to="3"></li>
</ul>
<!-- 左右箭头 -->
<a href="#demo" data-slide="next" class="carousel-control-next"><span
class="carousel-control-next-icon"></span></a>
<a href="#demo" data-slide="prev" class="carousel-control-prev"><span
class="carousel-control-prev-icon"></span></a>
</div>
<div class="jumbotron mt-3 p-3 px-5">
<div id="demo1" class="carousel" data-ride="carousel">
<!-- 图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col">
<ul class="list-unstyled text-left">
<li>
<h6><a href="" class="text-dark h4">比核桃补脑，比鸡蛋养人！</a></h6>
</li>
<li><span class="text-muted text_small">小美的菜单</span></li>
<li><span
class="text-dark">鹌鹑蛋营养丰富，素有“卵中佳品”“动物中的人参”称号，健脾补肾、滋养五脏、补益气血、强筋骨等功效。</span>
</li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled text-left">
<li>
<h6><a href="" class="text-dark h4">常见6种肉都有黄金搭档</a></h6>
</li>
<li><span class="text-muted text_small">小美的菜单</span></li>
<li><span class="text-dark">猪肉+白菜；牛肉+番茄；羊肉+白萝卜；鸡肉+蘑菇；鸭肉+山药；鱼肉+豆腐。</span>
</li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled text-left">
<li>
<h6><a href="" class="text-dark h4">提起补血养颜，都会想到它</a></h6>
</li>
<li><span class="text-muted text_small">小美的菜单</span></li>
<li><span
class="text-dark ">红枣味甘性温，有补中益气、养血安神等功效，营养非常丰富，具有较强的补养作用，可以提高免疫力，增强抗病</span>
</li>
</ul>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col">
<ul class="list-unstyled text-left">
<li>
<h6><a href="" class="text-dark h4">它，竟是一级血管清道夫</a></h6>
</li>
<li><span class="text-muted text_small">小美的菜单</span></li>
<li><span
class="text-dark ">圆白菜又叫洋白菜、卷心菜、包菜，物美价廉，被誉为“菜中之王”，是一级血管的“清道夫”，斑块最怕它！</span>
</li>
</ul>
</div>
<div class="col">
<ul class="list-unstyled text-left">
<li>
<h6><a href="" class="text-dark h4">蔬菜中的补钙冠军</a></h6>
</li>
bootstrap响应式美食网站
需积分: 0 126 浏览量
2024-02-09
11:59:24
上传
评论
收藏 22.11MB ZIP 举报
bootstrap响应式美食网站 （101个子文件） 
bootstrap.css 174KB index.css 2KB list.css 1KB details.css 1KB header.css 90B common.css 75B footer.css 42B
index.html 20KB details.html 18KB caipu.html 18KB list.html 9KB login.html 5KB
ewm.jpg 3KB bootstrap.js 112KB jquery-1.9.1.min.js 90KB popper.min.js 19KB tourSite.menu.js 325B
banner4.png 1.95MB banner1.png 1.63MB banner2.png 1.52MB banner3.png 1.31MB 1.png 1.18MB t1.png 1.13MB t6.png 1.12MB t2.png 1.1MB t5.png 1007KB t8.png 1000KB t7.png 984KB bg.png 964KB t4.png 918KB t3.png 895KB t9.png 812KB a3.png 323KB a6.png 302KB a2.png 297KB a4.png 284KB a5.png 276KB a3.png 276KB 6.png 269KB a1.png 257KB a8.png 256KB a7.png 250KB 5.png 245KB a1.png 230KB a5.png 222KB a4.png 155KB a2.png 144KB 4.png 111KB study_computer_img1.png 111KB study_computer_img2.png 100KB e5.png 96KB e2.png 64KB e3.png 51KB e1.png 40KB study_computer_img6.png 34KB icon1.png 29KB icon4.png 29KB icon3.png 29KB icon2.png 29KB study_computer_img7.png 28KB sj.png 26KB study_computer_img3.png 26KB study_computer_img5.png 26KB study_computer_img4.png 25KB 3.png 20KB 1.png 19KB care.png 19KB shop_car.png 19KB order.png 19KB ewm.png 18KB 2.png 18KB erweima.png 18KB android.png 16KB ios.png 16KB 8.png 15KB 1.png 15KB 9.png 14KB 2.png 14KB 5.png 13KB 7.png 13KB 4.png 12KB 6.png 12KB 2.png 12KB 10.png 12KB wz.png 10KB logo.png 5KB footerFont.png 5KB logo.png 4KB logo.png 4KB logo (1).png 4KB 3.png 3KB arrow-right.png 3KB arrow-left.png 3KB e4.png 2KB meishi.png 2KB t10.png 1KB search.png 1KB sinablog.png 677B computer_icon.png 564B wechat.png 560B共 101 条
- 1
- 2
资源评论
