«Иконка-бар» в твиттере

88

Я изучаю загрузку twitter и читаю примеры начальной загрузки на сайте начальной загрузки. И я не понимаю, что означает следующий код:

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

Зачем? Почему три похожих тега?

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

<div class="navbar-header">
  ...
</div>

Может ли кто-нибудь помочь мне со ссылками или описанием?

  • 19
    Это создать кнопку с тремя горизонтальными линиями. Эта кнопка отображается, когда ширина экрана мала, а навигационная панель сворачивается. Когда вы нажимаете на нее, панель навигации расширяется.
  • 1
    @ArpitAgrawal, вы правы, но подумайте над тем, чтобы сделать это ответом, а не комментарием!
Теги:

3 ответа

129
Лучший ответ

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

Три span создают три горизонтальные строки, которые выглядят как кнопка в iOS.

Посмотрим на bootstrap.css

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

Это структура блока, поэтому она выровнена как строка за строкой. Фоновый цвет установлен в серый80. Фактически, вы можете изменить его ширину, высоту и фоновый цвет, как вы пожелаете.

Надеюсь, что это поможет.

Поделиться
  • 0
    Я не был уверен, что понял, что вы имели в виду, свернувшись, так как я не вижу другой значок, если окно свернуто. Но если вы уменьшите видимую часть окна браузера, то меню навигации превратится в кнопку с тремя горизонтальными линиями. Спасибо за разъяснение этой тайны для меня.
  • 3
    @Bletch, как вы, наверное, поняли, он имеет в виду «свернутый», как в «сделать окно маленьким», а не обычный «свернуть в системный трей».
Показать ещё 2 комментария
5

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

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

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 используется o создать кнопку с тремя горизонтальными линиями. Эта кнопка отображается, когда ширина экрана мала.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню