Как настроить нижний колонтитул, такой как навигационная панель начальной загрузки? - PullRequest
Новая
       14

Как настроить нижний колонтитул, такой как навигационная панель начальной загрузки?

0 голосов
/ 16 ноября 2018

У меня есть сценарий, в котором мне нужно отобразить нижний колонтитул точно так же, как навигационная панель (то есть; нужно скрыть элементы списка из списка 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>

Любая помощь будет оценена.Заранее спасибо.

1 Ответ

0 голосов
/ 16 ноября 2018

Из документации Bootstrap ... Вы можете сменить иконку здесь

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

Внешний контент Иногда вы хотите использовать плагин свертывания для запуска скрытого контента в другом месте на странице. Поскольку наш плагин работает с идентификатором и соответствием цели данных, это легко сделать! 

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