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"