Bootstrap實現基本導航欄折疊效果

基本框架

<nav>
    <a href="#">Navbar</a>
    <button type="button">
        <span></span>
    </button>
    <div id="navtop">
        <ul>
            <li>
                <a href="#">首頁</a>
            </li>
            <li>
                <a href="#">標題1</a>
            </li>
            <li>
                <a href="#">標題2</a>
            </li>
            <li>
                <a href="#">標題3</a>
            </li>
        </ul>
    </div>
</nav>

引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css" />

引入JS

<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

nav標簽

class="navbar bg-dark navbar-expand-sm navbar-dark"

標題a標簽

class="navbar-brand" 

button標簽

 class="navbar-toggler" data-toggle="collapse" data-target="#navtop"

span標簽

class="navbar-toggler-icon"

div標簽

class="show collapse navbar-collapse" 

ul標簽

class="navbar-nav"

li標簽

class="nav-item"

li中a標簽

class="nav-link"