«Панель значков» в панели навигации начальной загрузки twitter

96

Я не могу понять, что означает следующий код с точки зрения icon-bar:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Что icon-bar ? Почему существует три подобных случая?

Этот код находится в разделе панели навигации: 

<div class="navbar-header">
  ...
</div>
html css twitter-bootstrap JohanTG
источник
19
Он предназначен для создания кнопки с тремя горизонтальными линиями. Эта кнопка отображается, когда ширина экрана мала и панель навигации сворачивается. Когда вы нажимаете на нее, панель навигации расширяется.
Arpit Agrawal
1
@ArpitAgrawal, вы правы, но подумайте о том, чтобы сделать это ответом, а не комментарием!
MEMark

Ответы:

130

icon-barиспользуется для адаптивных макетов для создания кнопки, которая выглядит как ≡ на узких экранах браузера. Вы можете изменить размер окна браузера (сделав его более узким), чтобы увидеть, как панель навигации заменяется этой кнопкой.

Три span тега образуют три горизонтальные линии, похожие на кнопку, широко известную как значок «бургер».

Посмотрите на icon-barв bootstrap.css:

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

Это блочная структура, поэтому она выровнена построчно. background-colorУстанавливается равным gray80 . На самом деле, вы можете изменить его width, height, background-colorи т.д. , как вы хотите.

Иварайют
источник
Я не был уверен, что понял, что вы имели в виду под минимизацией, поскольку у меня не было другого значка, если окно свернуто. Но если вы сделаете видимую часть окна браузера меньше, тогда действительно меню навигации превратится в кнопку с тремя горизонтальными линиями. Спасибо, что раскрыли для меня эту тайну.
Bletch
3
@Bletch, как вы, наверное, догадались, он имеет в виду «свернуть», как в «сделать окно маленьким», а не обычное «свернуть в системный трей».
MEMark
2
Вы знаете, что в этом странного ... то, что это так .navbar-toggle .icon-bar. Вместо того, чтобы оставить его как отдельный класс, они сделали его подклассом переключателя навигационной панели. Для меня это не имеет смысла. Я хочу иметь возможность украшать этим свои собственные кнопки и раскрывающиеся списки вне панели навигации. Вы можете просто скопировать весь блок CSS и сделать его отдельным классом для этого, но это повторяющийся код. Однако я не знаю лучшего решения.
Крис Сирефис,
9
Я не могу поверить, что на этой странице нет значка гамбургера .
Джереми Андерсон
1
@JeremyAnderson Теперь это так, не так ли? : D
Прия Ранджан Сингх
7

Я расширил ответ OP, так как он возник во время другого поиска, и мне пришлось внести несколько изменений, чтобы на самом деле заставить работать вещи, которыми, как мне казалось, стоит поделиться здесь. Поместите его в свой собственный ответ, чтобы он получил правильное форматирование кода.

Я использовал это в раскрывающемся списке переключателей вместо панели навигации (та же идея). Вот код, который я использовал:

HTML:

          <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              Menu
              <span class="icon-bars-button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
            </ul>
          </div>

CSS:

.dropdown-toggle .icon-bars-button{
  display: inline-block;
  vertical-align:middle;
}
.dropdown-toggle .icon-bar {
  margin-bottom:2px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}
стритлогика
источник
3

то class="navbar-toggle"используется для получения стилей.

data-toggle="collapse" Атрибут используется для управления отображением и скрытием.

то data-target = "#id"атрибут используется для подключения кнопки с разборной DIV

icon-barиспользуется для создания кнопки с тремя горизонтальными линиями. Эта кнопка отображается, когда ширина экрана мала.

NAND
источник