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"