日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

制作 bootstrap 導(dǎo)航包含以下五個(gè)步驟：1. 創(chuàng)建導(dǎo)航欄容器；2. 添加導(dǎo)航欄品牌；3. 創(chuàng)建導(dǎo)航鏈接；4. 添加響應(yīng)式按鈕；5. 創(chuàng)建折疊式導(dǎo)航鏈接。

如何制作 Bootstrap 導(dǎo)航

Bootstrap 中的導(dǎo)航欄是一個(gè)通用的導(dǎo)航組件，可用于組織和鏈接網(wǎng)站頁(yè)面。以下是使用 Bootstrap 制作導(dǎo)航欄的分步指南：

1. 創(chuàng)建一個(gè)導(dǎo)航容器

使用

<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>

登錄后復(fù)制

navbar 類應(yīng)用 Bootstrap 的導(dǎo)航欄樣式。
navbar-expand-lg 類會(huì)在屏幕較寬時(shí)展開(kāi)導(dǎo)航欄。
navbar-light 和 bg-light 類設(shè)置導(dǎo)航欄的淺色主題。

2. 添加導(dǎo)航欄品牌

可以通過(guò) 元素添加導(dǎo)航欄品牌或網(wǎng)站名稱和徽標(biāo)：

<a class="navbar-brand" href="#">網(wǎng)站名稱</a>

登錄后復(fù)制

3. 創(chuàng)建導(dǎo)航鏈接

使用

元素創(chuàng)建導(dǎo)航鏈接列表：

登錄后復(fù)制

• 主頁(yè)

• 關(guān)于我們

• 服務(wù)

  navbar-nav 類將列表鏈接到導(dǎo)航欄。
  mr-auto 類將列表右對(duì)齊。
  nav-item 類應(yīng)用導(dǎo)航欄鏈接樣式。
  nav-link 類應(yīng)用導(dǎo)航欄鏈接鏈接樣式。

  4. 添加響應(yīng)式按鈕

  使用 元素添加一個(gè)按鈕，用于在較小的屏幕上切換導(dǎo)航欄：

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  登錄后復(fù)制

  navbar-toggler 類應(yīng)用按鈕樣式。
  data-toggle=”collapse” 屬性使按鈕能夠切換折疊內(nèi)容。
  data-target=”#navbarNav” 屬性指定要切換的目標(biāo)元素。

  5. 創(chuàng)建折疊式導(dǎo)航鏈接

  使用

  元素創(chuàng)建導(dǎo)航鏈接的折疊式內(nèi)容：

  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
  <li class="nav-item">
        <a class="nav-link" href="#">主頁(yè)</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">關(guān)于我們</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">服務(wù)</a>
      </li>
    </ul>
  </div>

  登錄后復(fù)制

  collapse navbar-collapse 類應(yīng)用折疊式內(nèi)容樣式。
  id=”navbarNav” 屬性與按鈕的 data-target 屬性匹配。