“Barra de ícones” na barra de navegação de bootstrap do Twitter

Não consigo entender o que o código a seguir significa em termos 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 que serve icon-bar? Por que existem três exemplos semelhantes disso?

Este código está na seção da barra de navegação:

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

html css twitter-bootstrap

— JohanTG
fonte

É para criar um botão com três linhas horizontais. Este botão é exibido quando a largura da tela é pequena e a barra de navegação é recolhida. Quando você clica nele, a barra de navegação se expande.

— Arpit Agrawal

@ArpitAgrawal, você está correto, mas considere fazer isso uma resposta em vez de um comentário!

— MEMark

Respostas:

130

icon-baré usado para layouts responsivos para criar um botão semelhante a ≡ em telas estreitas do navegador. Você pode redimensionar a janela do navegador (estreitando-a) para ver como a barra de navegação é substituída por esse botão.

As três spanmarcas criam três linhas horizontais que se parecem com um botão, comumente conhecido como ícone de "hambúrguer".

Dê uma olhada icon-barem bootstrap.css:

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

É uma estrutura de blocos, por isso está alinhada linha a linha. O background-colorestá definido como gray80 . Na verdade, você pode mudar a sua width, height, background-color, etc. como desejar.

— Ivarayut
fonte

Não tinha certeza de ter entendido o que você quis dizer com minimizado, pois não recebo um ícone diferente se a janela estiver minimizada. Mas, se você diminuir a parte visível da janela do navegador, o menu de navegação se tornará um botão com três linhas horizontais. Obrigado por esclarecer esse mistério para mim.

— Bletch

@Bletch, como você provavelmente percebeu, ele quer dizer "minimizado" como em "tornar a janela pequena", não o usual "minimizar para a bandeja do sistema".

— MEMark

Você sabe o que é estranho nisso ... é que é .navbar-toggle .icon-bar. Em vez de deixá-la como uma classe autônoma, eles a transformaram em uma subclasse do alternador navbar. Isso, para mim, não faz sentido. Quero ser capaz de decorar meus próprios botões e menus suspensos com isso fora de uma barra de navegação. Você pode simplesmente copiar o bloco CSS inteiro e torná-lo uma classe autônoma para fazer isso, mas isso é código repetido. Não conheço solução melhor, no entanto.

— Chris Cirefice

Não consigo acreditar que as palavras ícone de hambúrguer não aparecem nesta página.

— Jeremy Anderson

@JeremyAnderson Agora sim, não é? : D

— Priya Ranjan Singh

Ampliei a resposta do OP, uma vez que ela surgiu durante uma pesquisa diferente e tive que fazer algumas modificações para realmente fazer as coisas funcionarem que eu senti que valia a pena compartilhar aqui. Colocando em sua própria resposta para que tenha a formatação de código adequada.

Eu usei isso em um botão de alternância suspenso em vez de navbar (mesma ideia). Aqui está o código que usei:

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
fonte

o class="navbar-toggle"é usado para obter os estilos.

data-toggle="collapse" atributo é usado para controlar a exibição e a ocultação.

o data-target = "#id"atributo é usado para conectar o botão com o div recolhível

icon-baré usado para criar um botão com três linhas horizontais. Este botão é exibido quando a largura da tela é pequena

— NAND
fonte