html - the - "Barra de iconos" en la barra de navegación de arranque de twitter

the falcon master

Question

No puedo entender lo que significa el siguiente código en términos de icon-bar 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>

¿Para qué sirve icon-bar de icon-bar ? ¿Por qué hay tres ejemplos similares de esto?

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

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

Answer 1

Expandí la respuesta de OP ya que esto surgió durante una búsqueda diferente, y tuve que hacer algunas modificaciones para que realmente funcionen las cosas que sentí que vale la pena compartir aquí. Poniéndolo en su propia respuesta para que tenga el formato de código correcto.

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

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

Answer 2

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

data-toggle="collapse" atributo data-toggle="collapse" se usa para controlar el show y ocultar.

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

se usa la icon-bar o crea un botón con tres líneas horizontales. Este botón se muestra cuando el ancho de la pantalla es pequeño

Answer 3

icon-bar se usa para diseños receptivos para crear un botón que se ve como ≡ en pantallas de navegador estrechas. Puede cambiar el tamaño de la ventana de su navegador (haciéndola estrecha) para ver cómo se reemplaza la barra de navegación por ese botón.

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

Eche un vistazo a icon-bar en bootstrap.css :

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

Es una estructura de bloque, por lo que se alinea línea por línea. El background-color está configurado para ser gray80 . En realidad, puedes cambiar su width , height , background-color , etc. como desees.