Как навигационная панель начальной загрузки удаляет кнопку меню и добавляет ее?

В такой панели навигации:

http://getbootstrap.com/examples/navbar/

Когда окно становится достаточно маленьким, пункты меню исчезают и появляется трехстрочная кнопка. Мне было интересно, какие изменения происходят, когда это происходит. Особенно хочется знать, какие классы к чему добавляются. Мой код следующий и действует как ссылка выше. Я использовал элемент проверки, но не вижу никаких изменений. Спасибо!

      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button id="menuButton" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <h4>Title</h4>
          </div>
              <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                  <li class="active"><a href="#">A</a></li>
                  <li class=""><a href="#" >B</a></li>
                  <li class=""><a href="#"  >C</a></li>
                </ul>
              </div><!--/.nav-collapse -->
            </div><!--/.container-fluid -->
          </nav>

html css twitter-bootstrap navbar
person Bren    schedule 04.01.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

За этим конкретным изменением нет переключения классов; пока вы проверяете элемент, следите за применяемым CSS. Различные формы отображения панели навигации основаны на медиа-запросах. Например:

@media (min-width: 768px) {
  .navbar-toggle {
      display:none
  }
}

это css, который заставляет кнопку значка меню исчезать при больших размерах экрана.

person jack    schedule 04.01.2015
comment
относится ли ширина к ширине окна или ширине документа? Спасибо! - person Bren; 05.01.2015