前端网站练习COFFEE_blog_2 导航栏

这篇文章主要是导航栏部分的页面布局和样式。

由于需要用到Bootstrap和JQuery，所以需要在index.html文件中导入：

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script type="text/javascript" src="./js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="./js/jquery.singlePageNav.min.js"></script>
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>

以下为导航栏HTML部分的代码：

<!-- 导航条 -->
    <nav id="header" class="navbar navbar-expand-md navbar-light bg-light" role="navigation">
        <div class="container-fluid"><!-- .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 -->
            
            <div class="navbar-header">
                <a href="#carouel" class="navbar-brand">COFFEE</a>
            </div>

            <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar">
                    <span class="navbar-toggler-icon"></span>
            </button>

            <div id="navbar" class="collapse navbar-collapse justify-content-end"