"Icon-bar" nella barra di navigazione bootstrap di Twitter

Non riesco a capire cosa significhi il seguente codice in termini di 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>

A cosa serve icon-bar? Perché ci sono tre casi simili di esso?

Questo codice si trova nella sezione della barra di navigazione:

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

html css twitter-bootstrap

— JohanTG
fonte

Serve per creare un pulsante con tre linee orizzontali. Questo pulsante viene visualizzato quando la larghezza dello schermo è ridotta e la barra di navigazione si riduce. Quando fai clic su di esso, la barra di navigazione si espande.

— Arpit Agrawal

@ArpitAgrawal, hai ragione, ma considera di rendere questa una risposta invece di un commento!

— MEMark

Risposte:

130

icon-barviene utilizzato per layout reattivi per creare un pulsante simile a ≡ su schermate del browser strette. Puoi ridimensionare la finestra del browser (restringendola) per vedere come la barra di navigazione viene sostituita da quel pulsante.

I tre spantag creano tre linee orizzontali che assomigliano a un pulsante, comunemente noto come icona "hamburger".

Date un'occhiata a icon-barin bootstrap.css:

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

È una struttura a blocchi, quindi è allineata riga per riga. L' background-colorimpostazione è gray80 . In realtà, si può cambiare la sua width, height, background-color, ecc come si desidera.

— lvarayut
fonte

Non ero sicuro di aver capito cosa intendevi per ridotto a icona in quanto non viene visualizzata un'icona diversa se la finestra è ridotta a icona. Tuttavia, se riduci la parte visibile della finestra del browser, il menu di navigazione si trasforma in un pulsante con tre linee orizzontali. Grazie per aver chiarito quel mistero per me.

— Bletch

@Bletch, come probabilmente hai capito, significa "minimizzato" come in "rimpicciolisci la finestra", non il solito "minimizza nel vassoio di sistema".

— MEMark

Sai cosa c'è di strano in questo ... è che lo è .navbar-toggle .icon-bar. Invece di lasciarla come una classe autonoma, l'hanno resa una sottoclasse dell'interruttore della barra di navigazione. Questo, per me, non ha senso. Voglio essere in grado di decorare i miei pulsanti e menu a discesa con questo al di fuori di una barra di navigazione. Puoi semplicemente copiare l'intero blocco CSS e renderlo una classe autonoma per farlo, ma questo è codice ripetuto. Non conosco una soluzione migliore, però.

— Chris Cirefice

Non riesco a credere che le parole icona dell'hamburger non compaiano in questa pagina.

— Jeremy Anderson

@JeremyAnderson Lo fa adesso, non è vero? : D

— Priya Ranjan Singh

Ho ampliato la risposta dell'OP poiché questa è emersa durante una ricerca diversa e ho dovuto apportare alcune modifiche per far funzionare effettivamente le cose che ritenevo valesse la pena condividere qui. Inserendolo nella sua risposta in modo che ottenga la corretta formattazione del codice.

L'ho usato in un pulsante di attivazione / disattivazione a discesa invece della barra di navigazione (stessa idea). Ecco il codice che ho usato:

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

— logiche di strada
fonte

il class="navbar-toggle"viene utilizzato per ottenere gli stili.

data-toggle="collapse" l'attributo viene utilizzato per controllare lo spettacolo e nascondere.

l' data-target = "#id"attributo viene utilizzato per collegare il pulsante con il div comprimibile

icon-barviene utilizzato per creare un pulsante con tre linee orizzontali. Questo pulsante viene visualizzato quando la larghezza dello schermo è ridotta

— NAND
fonte