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>

效果圖如下：