在Bootstrap 中實(shí)現(xiàn)全屏移動(dòng)端導(dǎo)航欄需結(jié)合默認(rèn)組件與自定義樣式；1. 使用Bootstrap 默認(rèn)navbar 結(jié)構(gòu)作為基礎(chǔ)，構(gòu)建響應(yīng)式導(dǎo)航欄；2. 添加自定義CSS 樣式使菜單展開時(shí)覆蓋全屏並居中顯示內(nèi)容；3. 可通過HTML 屬性或JavaScript 實(shí)現(xiàn)點(diǎn)擊鏈接後自動(dòng)收起導(dǎo)航欄；4. 注意設(shè)置z-index、padding-top、過渡動(dòng)畫及滾動(dòng)控制等細(xì)節(jié)優(yōu)化以提升體驗(yàn)。

做全屏移動(dòng)端導(dǎo)航欄（Full-Screen Mobile Navbar）在Bootstrap 中其實(shí)並不復(fù)雜，但需要結(jié)合默認(rèn)組件和一些自定義樣式來實(shí)現(xiàn)。 Bootstrap 本身提供響應(yīng)式導(dǎo)航欄的基礎(chǔ)結(jié)構(gòu)，但要達(dá)到“全屏”效果，還需要額外的CSS 和JS 配合。

1. 使用Bootstrap 默認(rèn)navbar 結(jié)構(gòu)

首先，你需要構(gòu)建一個(gè)標(biāo)準(zhǔn)的響應(yīng)式navbar，使用Bootstrap 提供的類和結(jié)構(gòu)。這個(gè)部分是基礎(chǔ)，也是後續(xù)擴(kuò)展的前提。

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#fullscreenNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="fullscreenNavbar">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
      <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
      <li class="nav-item"><a class="nav-link" href="#">服務(wù)</a></li>
      <li class="nav-item"><a class="nav-link" href="#">關(guān)於我們</a></li>
    </ul>
  </div>
</nav>

這部分代碼已經(jīng)可以讓導(dǎo)航欄在小屏幕上折疊顯示，但還不能佔(zhàn)滿整個(gè)屏幕。

2. 添加自定義CSS 實(shí)現(xiàn)全屏效果

為了讓導(dǎo)航菜單展開時(shí)佔(zhàn)據(jù)整個(gè)屏幕，需要添加一些額外的樣式，覆蓋默認(rèn)的.navbar-collapse行為：

 @media (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: white;
    z-index: 9999;
    padding-top: 56px; /* 根據(jù)你的navbar 高度調(diào)整*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .navbar-nav {
    flex-direction: column;
    text-align: center;
    font-size: 1.5rem;
  }

  .nav-link {
    margin: 1rem 0;
  }
}

這樣設(shè)置後，在移動(dòng)設(shè)備上點(diǎn)擊菜單按鈕，菜單會(huì)覆蓋整個(gè)屏幕，並居中展示鏈接。

3. 可選：點(diǎn)擊菜單項(xiàng)後自動(dòng)收起導(dǎo)航欄

有些用戶可能希望點(diǎn)擊某個(gè)鏈接後自動(dòng)關(guān)閉菜單，而不是手動(dòng)點(diǎn)回去。你可以用以下方式實(shí)現(xiàn)：

• 給每個(gè).nav-link添加data-bs-toggle="collapse"屬性
• 或者通過JavaScript 監(jiān)聽點(diǎn)擊事件並手動(dòng)隱藏

示例HTML：

 <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#fullscreenNavbar.show">首頁</a>

或者寫一段簡單的JS：

 document.querySelectorAll('.nav-link').forEach(link => {
  link.addEventListener('click', () => {
    const bsCollapse = new bootstrap.Collapse(document.getElementById('fullscreenNavbar'), {
      toggle: false
    });
    bsCollapse.hide();
  });
});

4. 注意事項(xiàng)與細(xì)節(jié)優(yōu)化

• z-index要足夠高，避免被頁面內(nèi)容遮擋。
• padding-top的值應(yīng)該根據(jù)你實(shí)際的navbar 高度來設(shè)定，否則頂部內(nèi)容會(huì)被遮擋。
• 如果你想加動(dòng)畫過渡，可以給.navbar-collapse加上transition: transform 0.3s ease;等屬性。
• 頁面滾動(dòng)時(shí)，最好讓body 不可滾動(dòng)，可以用JS 動(dòng)態(tài)添加overflow:hidden到body 上。

基本上就這些。雖然Bootstrap 沒有直接提供“全屏導(dǎo)航”的組件，但只要稍作修改，就能實(shí)現(xiàn)現(xiàn)代網(wǎng)站常見的移動(dòng)端菜單體驗(yàn)。

以上是如何在Bootstrap中製作全屏幕移動(dòng)Navbar？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！