如何自定义像引导导航栏这样的页脚？答案

【问题标题】：How to customize a footer like bootstrap nav-bar?如何自定义像引导导航栏这样的页脚？
【发布时间】：2019-04-19 09:40:59
【问题描述】：

我有一个场景，我需要像导航栏一样显示页脚（即；需要使用某些按钮隐藏 ul 列表的列表项是响应式的，单击该按钮需要显示列表项），我在这里使用引导导航栏，但我需要一些其他自定义按钮而不是汉堡包。有可能吗？

这是我的代码：

<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>

任何帮助将不胜感激。提前致谢。

【问题讨论】：

class="icon-bar" 是添加汉堡包的那个。将其替换为任何其他有效的 html。

标签： html css twitter-bootstrap twitter-bootstrap-3 css-transitions

【解决方案1】：

来自 Bootstrap 文档...您应该可以在此处更改图标

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

外部内容有时您想使用折叠插件来触发页面其他位置的隐藏内容。因为我们的插件适用于 id 和 data-target 匹配，所以很容易做到！

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="pos-f-t">
  <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>

【讨论】：