vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

初次接触Bootstrap,简单谈一下理解。bootstrap是一个简单有强悍的前端框架，它是一个开源项目。当我们需要一些样式等，可以了解bootstrap的相关class、标签名称等所代表的意思，然后搭建页面时，导入bootstrap的js、css等，就可展现相同的效果。

1、首先进入bootstrap官网，中文文档，bootstrapCdn，css only 复制标签，然后在index.html中粘贴，这就引入好了bootstrap。

2、在Header中使用bootstrap，

<template>
    <header>
        <!-- class中设置了导航栏背景的基本样式 :中文文档中的components中的navbar，
        复制其中的背景nav class="navbar navbar-expand-lg navbar-light bg-light"-->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <!-- 导航栏中的矢量图：实例中product，右键查看源代码，复制a标签的内容，粘贴如下 -->
            <a class="py-2" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto">
                <circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94">
                </line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06">
                </line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16">
                </line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
            </a>
            <a href="/" class="navbar-brand">Pizza点餐系统</a>
            <!-- 水平导航 -->
            <ul class="navbar-nav">
                <!-- nav-link是取消前面的点 -->
                <li><a href="#" class="nav-link">主页</a></li>
                <li><a href="#" class="nav-link">菜单</a></li>
                <li><a href="#" class="nav-link">管理</a></li>
                <li><a href="#" class="nav-link">关于我们</a></li>
            </ul>
            <!-- ml-auto目的是使ul位置在右边 -->
            <ul class="navbar-nav ml-auto">
                <li><a href="#" class="nav-link">登陆</a></li>
                <li><a href="#" class="nav-link">注册</a></li>
            </ul>
        </nav>

    </header>
</template>

效果图如下：