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

Я не могу понять, что означает следующий код с точки зрения 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>

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и т.д. , как вы хотите.

Я расширил ответ 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;
}

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

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

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

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