"icon-bar" в панели навигации Twitter bootstrap

Question

"icon-bar" в панели навигации Twitter bootstrap

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

596 3

html css twitter-bootstrap

3 ответов:

Comments

Ничего не найдено.

lvarayut · Accepted Answer · 2018-03-29 00:18:07

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

трех span теги создают три горизонтальные линии, которые выглядят как кнопка, обычно известная как значок "бургер".

посмотри icon-bar in 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 и т. д. как пожелаете.

streetlogics · Accepted Answer · 2014-05-06 06:05:26

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

NAND · Accepted Answer · 2015-11-11 08:51:21

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

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

the data-target = "#id" атрибут используется для соединения кнопки со складным div

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