"Barra de iconos" en la barra de navegación de arranque de Twitter

No entiendo qué significa el siguiente código en términos de 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>

Lo que es icon-barpara? ¿Por qué hay tres casos similares?

Este código está en la sección de la barra de navegación:

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

html css twitter-bootstrap

— JohanTG
fuente

Consiste en crear un botón con tres líneas horizontales. Este botón se muestra cuando el ancho de la pantalla es pequeño y la barra de navegación se colapsa. Cuando haces clic en él, la barra de navegación se expande.

— Arpit Agrawal

@ArpitAgrawal, tienes razón, ¡pero considera hacer de esto una respuesta en lugar de un comentario!

— MEMark

Respuestas:

130

icon-barse utiliza para diseños receptivos para crear un botón que se parece a ≡ en pantallas de navegador estrechas. Puede cambiar el tamaño de la ventana de su navegador (haciéndola más estrecha) para ver cómo la barra de navegación es reemplazada por ese botón.

Las tres spanetiquetas crean tres líneas horizontales que parecen un botón, comúnmente conocido como el icono de "hamburguesa".

Eche un vistazo icon-baren bootstrap.css:

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

Es una estructura de bloques, por lo que está alineada línea por línea. El background-colorestá dispuesto a ser gray80 . En realidad, puede cambiar su width, height, background-color, etc, como lo desea.

— lvarayut
fuente

No estaba seguro de haber entendido lo que quería decir con minimizado, ya que no obtengo un icono diferente si la ventana está minimizada. Pero, si hace que la parte visible de la ventana del navegador sea más pequeña, entonces el menú de navegación se convierte en un botón que tiene tres líneas horizontales. Gracias por aclararme ese misterio.

— Bletch

@Bletch, como probablemente hayas descubierto, quiere decir "minimizado" como en "hacer la ventana pequeña", no el habitual "minimizar en la bandeja del sistema".

— MEMark

Sabes lo extraño de esto ... es que lo es .navbar-toggle .icon-bar. En lugar de dejarlo como una clase independiente, lo convirtieron en una subclase de la barra de navegación. Eso, para mí, no tiene sentido. Quiero poder decorar mis propios botones y menús desplegables con esto fuera de una barra de navegación. Puede simplemente copiar todo el bloque CSS y convertirlo en una clase independiente para lograr esto, pero eso es código repetido. Sin embargo, no conozco una solución mejor.

— Chris Cirefice

No puedo creer que las palabras icono de hamburguesa no aparezcan en esta página.

— Jeremy Anderson

@JeremyAnderson Lo hace ahora, ¿no? : D

— Priya Ranjan Singh

Amplié la respuesta del OP ya que surgió durante una búsqueda diferente, y tuve que hacer algunas modificaciones para que las cosas funcionen y sentí que valía la pena compartirlas aquí. Poniéndolo en su propia respuesta para que tenga el formato de código adecuado.

Usé esto en un botón de alternancia desplegable en lugar de la barra de navegación (la misma idea). Aquí está el código que usé:

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
fuente

la class="navbar-toggle"se utiliza para obtener los estilos.

data-toggle="collapse" El atributo se utiliza para controlar la visualización y la ocultación.

el data-target = "#id"atributo se usa para conectar el botón con el div plegable

icon-barse utiliza para crear un botón con tres líneas horizontales. Este botón se muestra cuando el ancho de la pantalla es pequeño

— NAND
fuente