本文介绍了如何使用footstrap实现响应式的星巴克官网。首先解释了footstrap作为前端框架的作用，接着详细讲述了实现星巴克官网案例的过程，包括采用的技术如iconfont、jquery和footstrap，以及读入数据和页面效果的展示。最后，作者分享了通过项目学习对footstrap栅格系统的理解，并提到在实际应用中可能需要结合自身逻辑来完善功能。
footstrap实现响应式星巴克官网
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、footstrap是什么？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
二、星巴克官网案例实现
1.使用技术
- iconfont官网下载矢量图标并通过font-close引入
- jquery
- footstrap v4.3
2.读入数据
这些引用是footstrap必不可少的
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
html部分：
div class="container-fluid">
<div class="row justify-content-end">
<div class="col-lg-4 position-fixed border-right leftCon">
<header class="navbar d-none d-sm-flex px-3 py-1">
<a href="#" class="navbar-brand">
<img src="./images/logo.svg" style="width: 36px;">
</a>
<ul class="nav mr-auto myNav">
<li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">门店</a></li>
<li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">我的账户</a></li>
<li class="nav-item"><a href="#" class="nav-link text-dark font-weight-bold">菜单</a></li>
</ul>
<span class="iconfont icon-menu myMenu"></span>
</header>
<div class="d-flex flex-column login justify-content-center px-3 px-lg-5">
<h1 class="py-3">心情惬意，来杯咖啡吧 <span class="iconfont icon-kafei"></span></h1>
<div class="d-none d-sm-flex my-3">
<a href="#" class="text-success mr-2 my-auto"><span
class="iconfont icon-denglu border px-3 py-1"></span></a>
<span class="text-success denglu my-auto" style="font-weight: 700;">登陆</span>
<button class="btn btn-lg btn-outline-success ml-4"
style="border-radius: 14px; font-weight: 700;">注册</button>
</div>
</div>
<div class="d-flex flex-column justify-content-between w-100 btnNav bg-white position-fixed hide"
id="check">
<header class="navbar px-3 py-1">
<a href="#" class="navbar-brand">
<img src="./images/logo.svg" style="width: 36px;">
</a>
<span class="iconfont icon-guanbi myClo" id="cloBtn"></span>
</header>
<ul class="list list-unstyled px-0 px-sm-5">
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">门店</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">星享俱乐部</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">菜单</a></li>
<hr>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">星巴克移动应用</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">星礼卡</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">星巴克臻选™</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">啡快™ － 在线点 到店取</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">专星送™</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">咖啡星讲堂</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">上海烘焙工坊</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">关于星巴克</a></li>
<li class="nav-item py-2"><a href="#" class="text-dark font-weight-bold">帮助中心</a></li>
<hr>
</ul>
<div class="d-none d-sm-flex my-3 px-0 px-sm-5 ">
<a href="#" class="text-success my-auto mr-2"><span
class="iconfont icon-denglu border px-3 py-1"></span></a>
<span class="text-success denglu my-auto">登陆</span>
<button class="btn btn-outline-success ml-4 regiest">注册</button>
</div>
<footer class="px-0 px-sm-5 pb-4">
<a href="" class="mr-2"><span>English |</span></a>
<a href="" class="mr-2"><span>隐私政策 |</span></a>
<a href="" class=""><span>使用条款</span></a>
</footer>
</div>
</div>
<div class="col-lg-8 bg-light">
<!-- 轮播图 -->
<div class="row">
<div class="carousel slide" id="pic" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active"><img src="./images/kv1.jpg" alt="" class="img-fluid">
</div>
<div class="carousel-item"><img src="./images/kv2.jpg" alt="" class="img-fluid"></div>
<div class="carousel-item"><img src="./images/kv3.jpg" alt="" class="img-fluid"></div>
<div class="carousel-item"><img src="./images/kv4.jpg" alt="" class="img-fluid"></div>
</div>
<!-- 控制器 -->
<a href="#pic" class="carousel-control-prev" data-slide="prev">
<span class="iconfont icon-left" style="font-size: 4rem;"></span>
</a>
<a href="#pic" class="carousel-control-next" data-slide="next">
<span class="iconfont icon-right" style="font-size: 4rem;"></span>
</a>
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#pic" data-slide-to="0" class="active"></li>
<li data-target="#pic" data-slide-to="1"></li>
<li data-target="#pic" data-slide-to="2"></li>
<li data-target="#pic" data-slide-to="3"></li>
</ol>
</div>
</div>
<!-- 卡片 -->
<div class="row mt-3 py-5 justify-content-around px-4">
<div class="col-sm-4 my-sm-0">
<img src="images/img_01.jpg" class="img-thumbnail">
</div>
<div class="col-sm-4 my-sm-0">
<img src="images/img_02.jpg" class="img-thumbnail">
</div>
<div class="col-sm-4 my-sm-0">
<img src="images/img_03.jpg" class="img-thumbnail">
</div>
</div>
<!-- 俱乐部 -->
<div class="row bg-white py-5 px-5 align-items-center" id="club">
<div class="col-sm-5 text-center text-sm-left align-items-start">
<h1 class="my-4">星享俱乐部</h1>
<p class="mt-3 mb-5">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。<a href="#">了解更多 ›</a></p>
<button class="btn btn-lg px-4 py-2 btn-outline-success myBtn">注册</button>
<button class="btn btn-lg px-4 py-2 btn-outline-success myBtn ml-2">登陆</button>
</div>
<div class="col text-center mt-5 mt-sm-0">
<img src="./images/logo-msr-new.svg" alt="">
</div>
</div>
<!-- 星巴克精选 -->
<div class="row" id="start">
<div class="col-12 py-5 text-center">
<h1 class="my-4">星巴克精选</h1>
<p>在星巴克天猫旗舰店发现更多咖啡心意</p>
</div>
<div class="col-12">
<ul class="list-unstyled row justify-content-around text-center p-5" id="start-card">
<li class="col-6 col-md-3 my-5">
<a href="#" class="d-inline-block bg-white rounded position-relative">
<img src="./images/tmall-card-01.png" class="img-fluid">
<h1 class="pt-2">会员星礼包</h1>
<p class="p-2 text-memu" style="line-height: 2.6rem;">星享卡新升级<br>更多心意好礼</p>
<p class="p-3 caption">了解更多 ›</p>
</a>
</li>
<li class="col-6 col-md-3 my-5">
<a href="#" class="d-inline-block bg-white rounded position-relative">
<img src="./images/tmall-card-02.png" class="img-fluid">
<h1 class="pt-2">星礼卡</h1>
<p class="p-2 text-memu" style="line-height: 2.6rem;">用一份心礼<br>让心意相随</p>
<p class="p-3 caption">了解更多 ›</p>
</a>
</li>
<li class="col-6 col-md-3 my-5">
<a href="#" class="d-inline-block bg-white rounded position-relative">
<img src="./images/tmall-card-03.png" class="img-fluid">
<h1 class="pt-2">电子产品券</h1>
<p class="p-2 text-memu" style="line-height: 2.6rem;">心意<br>从这一杯开始</p>
<p class="p-3 caption">了解更多 ›</p>
</a>
</li>
<li class="col-6 col-md-3 my-5">
<a href="#" class="d-inline-block bg-white rounded position-relative">
<img src="./images/tmall-card-04.png" class="img-fluid">
<h1 class="pt-2">咖啡生活</h1>
<p class="p-2 text-memu" style="line-height: 2.6rem;">星巴克<br>用心制作</p>
<p class="p-3 caption">了解更多 ›</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 星巴克讲堂 -->
<div class="row bg-white p-5" id="startClass">
<div class="col-12 py-5 text-center">
<h1 class="my-4">1912 派克街 | 咖啡星讲堂</h1>
<p>了解更多星巴克咖啡文化</p>
</div>
<ul class="list-unstyled d-flex justify-content-between">
<li class="mr-4 position-relative">
<a href="#" class="d-inline-block card rounded">
<img src="./images/scroll_img_01.jpg" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-dark">咖啡的起源与培植</h4>
</div>
</a>
<span class="position-absolute d-inline-block text-white p-2">咖啡知识</span>
</li>
<li class="mr-4 position-relative">
<a href="#" class="d-inline-block card rounded">
<img src="./images/scroll_img_02.jpg" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-dark">咖啡调制</h4>
</div>
</a>
<span class="position-absolute d-inline-block text-white p-2">咖啡品鉴</span>
</li>
<li class="mr-4 position-relative">
<a href="#" class="d-inline-block card rounded">
<img src="./images/scroll_img_03.jpg" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-dark">咖啡烘培</h4>
</div>
</a>
<span class="position-absolute d-inline-block text-white p-2">咖啡知识</span>
</li>
<li class="mr-4 position-relative">
<a href="#" class="d-inline-block card rounded">
<img src="./images/scroll_img_04.jpg" class="card-img-top">
<div class="card-body">
<h4 class="card-title text-dark">手冲咖啡</h4>
</div>
</a>
<span class="position-absolute d-inline-block text-white p-2">咖啡品鉴</span>
</li>
</ul>
</div>
<footer class="p-5 text-center" id="conFoo">
<p>沪公网安备 31010402000253号 | 沪ICP备17003747号</p>
</footer>
</div>
</div>
</div>
<footer class="mt-5 mt-sm-0">
<ul class="list-unstyled justify-content-around text-center mb-0 p-1 d-flex d-sm-none">
<li>
<span class="iconfont icon-shouye" style="font-size: 2.4rem;"></span>
<p class="m-0">主页</p>
</li>
<li>
<span class="iconfont icon-mendian" style="font-size: 2.4rem;"></span>
<p class="m-0">门店</p>
</li>
<li>
<span class="iconfont icon-weibiaoti5" style="font-size: 2.4rem;"></span>
<p class="m-0">我的账户</p>
</li>
<li>
<span class="iconfont icon-menu" style="font-size: 2.4rem;"></span>
<p class="m-0">菜单</p>
</li>
<li>
<span class="iconfont icon-gengduo" style="font-size: 2.4rem;"></span>
<p class="m-0">更多</p>
</li>
</ul>
</footer>
html{
font-size: 62.5%!important;
}
@media(min-width:992px){
html{
font-size: 62.5%;
}
}
@media(min-width:768px){
html{
font-size: 59%;
}
}
@media(min-width:579px){
html{
font-size: 56%;
}
}
body{
overflow-x: hidden;
}
a:hover{
text-decoration: none;
}
.leftCon{
left: 0;
}
.leftCon header{
height: 80px;
}
.myNav{
font-size: 1.7rem;
/* font-weight: 700; */
}
.myMenu{
font-size: 2.8rem;
cursor: pointer;
/* opacity: 0.8; */
color: #858585;
}
.login .icon-kafei{
font-size: 24px;
color: #5cae33;
}
.denglu{
font-size: 1.6rem;
cursor: pointer;
}
/* .regiest{
font-size: 1.6rem;
border-radius:12px ;
} */
.login{
height: calc(100vh - 80px);
}
@media(max-width:991.98px){
.leftCon{
position: relative!important;
}
.login{
height: auto;
}
}
.myClo{
font-size: 1.8rem;
cursor: pointer;
/* opacity: 0.8; */
color: #858585;
}
.btnNav{
height: 100vh;
z-index: 1024;
left: 0;
top: 0;
padding: 0 15px;
background: white;
transition: .2s;
}
.list .nav-item a{
font-size: 1.8rem;
}
footer a{
color: rgba(0, 0, 0, 0.38);
}
.show{
opacity: 1;
transform: scale(1);
}
.hide{
opacity: 0;
z-index: -1;
transform: scale(2);
}
.myBtn{
/* font-size: 1.6rem; */
border-radius: 14px;
font-weight:700;
}
#club p{
font-size: 1.6rem;
color: rgba(0, 0, 0, 0.56);
font-weight: 450;
}
#club a{
color: #C2A661;
}
#start p,#startClass>div p{
font-size: 1.6rem;
color: rgba(0, 0, 0, 0.56);
font-weight: 450;
}
#start-card li a:hover{
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.12);
transform: translateY(-5px);
}
#start-card li a{
transition: .3s;
}
#start-card li:hover .caption{
opacity: 1;
}
#start-card img{
width: 40%;
/* margin-top: -34px; */
transform: translateY(-50%);
}
#start-card h1{
font-size: 1.6rem!important;
color: rgba(0, 0, 0, 0.87);
font-weight: 500;
}
#start .text-memu{
font-size: 1.4rem!important;
color: rgba(0, 0, 0, 0.56);
font-weight: 450;
}
#start .caption{
font-size: 1.2rem!important;
color: #C2A661;
font-weight: 400;
opacity: 0.7;
}
#startClass ul{
width: 288*4px;
}
#startClass ul li{
width: 288px;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.12);
transition: .3s;
}
#startClass ul li:hover{
transform: translateY(-5px);
}
#startClass ul li span{
left: 0;
top: 10px;
background-color: #C2A661;
width: 70px;
height: 30px;
text-align: center;
font-size: 1.4rem;
font-weight: 400;
/* display: inline-block; */
}
footer ul{
border-top: 1px solid rgba(0, 0, 0, 0.12);
font-size: 1.2rem!important;
/* box-shadow: 0 -1 1 1 rgba(0, 0, 0, 1)!important; */
}
#conFoo{
cursor: pointer;
font-size: 1.4rem;
color: #858585;
}
$('#cloBtn').click(function () {
$('.btnNav').removeClass('show').addClass('hide');
if ($(window).innerWidth()<= 992) {
$('body').css('overflow', 'auto');
}
})
$('.myMenu').click(function () {
$('.btnNav').removeClass('hide').addClass('show');
// <!-- 小于992px时滚动条问题 -->
if ($(window).innerWidth()<= 992) {
$('body').css('overflow', 'hidden');
}
})
3.页面效果
由于受到图片上传大小的限制这里只能放一张图，如果想看到不同响应层效果可复制上面代码
总结
通过这次项目的学习，对footstrap的栅格系统有了进一步的理解，footstrap虽然能让我们减少大量的代码，但它也不是万能的，项目中一些特殊的需求比如弹出导航框功能，滑动卡片功能就需要自己整理逻辑，基本功还是要打扎实。
案例实现过程中所踩的坑写再笔记里，希望感兴趣的大佬可以给一些建议：click
扫一扫
3480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
