【Bootstrap】ナビゲーションバー

Bootstrapのナビゲーションバーの雛形です。

index.html

<nav class="navbar navbar-expand">
    <a href="#" class="navbar-brand">ブランドのロゴ（ホームへのリンク）</a>
    
    <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#nav-bar" aria-controls="nav-bar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon">ハンバーガーメニューアイコン</span>
    </button>
            
    <div class="collapse navbar-collapse" id="nav-bar">
        <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link active">内容①</a></li>
            <!-- 以下内容の数に応じてli要素を追加 -->
        </ul>
    </div>
</nav>

##補足
####1.ハンバーガーメニューアイコンの位置

index.html

<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-bar">
    <span class="navbar-toggler-icon">ハンバーガーメニューアイコン</span>
</button>

このbutton要素をa要素の直前に記述すると画面左側、直後に記述すると画面右側にハンバーガーメニューアイコンが表示される。

####2.折りたたむタイミングの指定

index.html

<nav class="navbar navbar-expand">
    <!--以下省略  -->
</nav>

navbar-expand-(画面サイズ)で折りたたむタイミングを指定。
navbar-expand-md とした場合、md（最小で768px）以下の画面幅の時に折り畳まれる。