如何自定義引導程序導航欄等頁腳？

Question

我有一種情況，我需要像navbar一樣顯示頁腳（即，需要使用某些按鈕來響應來隱藏ul列表的列表項，單擊該按鈕時需要顯示列表項），這里我正在使用引導程序navbar，但是除了漢堡包，我還需要其他一些自定義按鈕。 可能嗎？

這是我的代碼：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
     </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">list1</a></li>
        <li><a href="#">list2</a></li>
        <li><a href="#">list3</a></li>
      </ul>

    </div>
  </div>
</nav>

任何幫助，將不勝感激。 提前致謝。

Answer 1

從Bootstrap文檔中...您應該可以在此處更改圖標

https://getbootstrap.com/docs/4.0/components/navbar/

外部內容有時您想使用折疊插件來觸發頁面其他位置的隱藏內容。 因為我們的插件可以處理id和數據目標匹配，所以很容易做到！

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="pos-ft"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h4 class="text-white">Collapsed content</h4> <span class="text-muted">Toggleable via the navbar brand.</span> </div> </div> <nav class="navbar navbar-dark bg-dark"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> </nav> </div>