„Pasek ikon” na pasku nawigacji programu bootstrap na Twitterze

Nie mogę zrozumieć, co oznacza poniższy kod pod względem 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>

Do czego służy icon-bar? Dlaczego istnieją trzy podobne przypadki?

Ten kod znajduje się w sekcji paska nawigacji:

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

icon-barsłuży do tworzenia responsywnych układów do tworzenia przycisku, który wygląda jak ≡ na wąskich ekranach przeglądarki. Możesz zmienić rozmiar okna przeglądarki (zwężając je), aby zobaczyć, jak pasek nawigacyjny jest zastępowany przez ten przycisk.

Te trzy spantagi tworzą trzy poziome linie, które wyglądają jak przycisk, zwane powszechnie ikoną „burgera”.

Przyjrzeć się icon-barw bootstrap.css:

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

Jest to struktura blokowa, więc jest wyrównana linia po linii. background-colorUstawiony jest gray80 . Faktycznie, można zmienić jego width, height, background-color, itd., Jak chcesz.

Rozszerzyłem odpowiedź OP, ponieważ pojawiła się ona podczas innego wyszukiwania, i musiałem wprowadzić kilka modyfikacji, aby faktycznie działały rzeczy, o których uważałem, że warto się tutaj podzielić. Umieszczenie go we własnej odpowiedzi, aby uzyskał odpowiednie formatowanie kodu.

Użyłem tego w rozwijanym przycisku przełączania zamiast paska nawigacyjnego (ten sam pomysł). Oto kod, którego użyłem:

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"służy do uzyskania style.

data-toggle="collapse" atrybut jest używany do sterowania wyświetlaniem i ukrywaniem.

data-target = "#id"atrybut służy do podłączenia przycisku ze składanego div

icon-barsłuży do tworzenia przycisku z trzema poziomymi liniami. Ten przycisk jest wyświetlany, gdy szerokość ekranu jest mała