„Pasek ikon” na pasku nawigacji programu bootstrap na Twitterze

96

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>
html css twitter-bootstrap JohanTG
źródło
19
Ma na celu utworzenie przycisku z trzema poziomymi liniami. Ten przycisk jest wyświetlany, gdy szerokość ekranu jest mała, a pasek nawigacji zwija się. Po kliknięciu pasek nawigacji rozszerza się.
Arpit Agrawal
1
@ArpitAgrawal, masz rację, ale zastanów się nad uczynieniem tego odpowiedzią zamiast komentarza!
MEMark

Odpowiedzi:

130

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.

lvarayut
źródło
Nie byłem pewien, czy rozumiem, co masz na myśli, mówiąc o zminimalizowaniu, ponieważ nie widzę innej ikony, jeśli okno jest zminimalizowane. Jeśli jednak zmniejszysz widoczną część okna przeglądarki, menu nawigacji zmieni się w przycisk z trzema poziomymi liniami. Dziękuję za wyjaśnienie mi tej tajemnicy.
Bletch
3
@Bletch, jak zapewne się domyśliłeś, ma na myśli „zminimalizowane”, na przykład „zmniejsz okno”, a nie zwykłe „minimalizowanie do zasobnika systemowego”.
MEMark
2
Wiesz, co w tym dziwnego ... to, że tak jest .navbar-toggle .icon-bar. Zamiast pozostawić ją jako samodzielną klasę, uczynili ją podklasą przełącznika paska nawigacyjnego. Dla mnie to nie ma sensu. Chcę mieć możliwość ozdabiania własnych przycisków i menu rozwijanych poza paskiem nawigacyjnym. Możesz po prostu skopiować cały blok CSS i uczynić go samodzielną klasą, aby to osiągnąć, ale to jest powtórzony kod. Nie znam lepszego rozwiązania.
Chris Cirefice,
9
Nie mogę uwierzyć, że słowa ikona hamburgera nie pojawiają się na tej stronie.
Jeremy Anderson
1
@JeremyAnderson Teraz robi, prawda? : D
Priya Ranjan Singh
7

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;
}
streetlogics
źródło
3

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

NAND
źródło