"Icon-Bar" in der Twitter Bootstrap Navigationsleiste

96

Ich kann nicht verstehen, was der folgende Code bedeutet 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>

Wofür ist icon-bar? Warum gibt es drei ähnliche Fälle?

Dieser Code befindet sich in der Navigationsleiste: 

<div class="navbar-header">
  ...
</div>
html css twitter-bootstrap JohanTG
quelle
19
Es wird eine Schaltfläche mit drei horizontalen Linien erstellt. Diese Schaltfläche wird angezeigt, wenn die Bildschirmbreite klein ist und die Navigationsleiste ausgeblendet ist. Wenn Sie darauf klicken, wird die Navigationsleiste erweitert.
Arpit Agrawal
1
@ArpitAgrawal, Sie haben Recht, aber denken Sie daran, dies als Antwort anstelle eines Kommentars zu machen!
MEMark

Antworten:

130

icon-barwird für reaktionsschnelle Layouts verwendet, um eine Schaltfläche zu erstellen, die auf schmalen Browserbildschirmen wie ≡ aussieht. Sie können die Größe Ihres Browserfensters ändern (indem Sie es schmaler machen), um zu sehen, wie die Navigationsleiste durch diese Schaltfläche ersetzt wird.

Die drei spanTags erzeugen drei horizontale Linien, die wie eine Schaltfläche aussehen, die allgemein als "Burger" -Symbol bezeichnet wird.

Schauen Sie sich an icon-barin bootstrap.css:

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

Da es sich um eine Blockstruktur handelt, wird sie zeilenweise ausgerichtet. Das background-colorist auf grey80 eingestellt . Eigentlich kann man seine ändern width, height, background-colorusw. , wie Sie es wünschen.

lvarayut
quelle
Ich war mir nicht sicher, ob ich verstanden habe, was Sie unter minimiert verstanden haben, da ich kein anderes Symbol erhalte, wenn das Fenster minimiert ist. Wenn Sie jedoch den sichtbaren Teil des Browserfensters verkleinern, wird das Navigationsmenü tatsächlich zu einer Schaltfläche mit drei horizontalen Linien. Danke, dass du dieses Rätsel für mich geklärt hast.
Bletch
3
@Bletch, wie Sie wahrscheinlich herausgefunden haben, bedeutet er "minimiert" wie in "Fenster klein machen", nicht das übliche "Auf Taskleiste minimieren".
MEMark
2
Sie wissen, was daran seltsam ist ... ist, dass es so ist .navbar-toggle .icon-bar. Anstatt es als eigenständige Klasse zu belassen, machten sie es zu einer Unterklasse des Navbar-Umschalters. Das macht für mich keinen Sinn. Ich möchte in der Lage sein, meine eigenen Schaltflächen und Dropdowns damit außerhalb einer Navigationsleiste zu dekorieren. Sie können einfach den gesamten CSS-Block kopieren und ihn zu einer eigenständigen Klasse machen, um dies zu erreichen, aber das ist wiederholter Code. Ich kenne jedoch keine bessere Lösung.
Chris Cirefice
9
Ich kann nicht glauben, dass die Wörter Hamburger Symbol nicht auf dieser Seite erscheinen.
Jeremy Anderson
1
@JeremyAnderson Das tut es jetzt, nicht wahr? : D
Priya Ranjan Singh
7

Ich habe die Antwort des OP erweitert, da diese während einer anderen Suche auftauchte, und ich musste einige Änderungen vornehmen, um die Dinge tatsächlich zum Laufen zu bringen, die ich für wert hielt, hier geteilt zu werden. Fügen Sie es in eine eigene Antwort ein, damit es die richtige Code-Formatierung erhält.

Ich habe dies in einer Dropdown-Umschalttaste anstelle der Navigationsleiste verwendet (gleiche Idee). Hier ist der Code, den ich verwendet habe:

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
quelle
3

Das class="navbar-toggle"wird verwendet, um die Stile zu erhalten.

data-toggle="collapse" Das Attribut wird verwendet, um das Ein- und Ausblenden zu steuern.

Das data-target = "#id"Attribut wird verwendet, um die Schaltfläche mit dem zusammenklappbaren Div zu verbinden

icon-barwird verwendet, um eine Schaltfläche mit drei horizontalen Linien zu erstellen. Diese Schaltfläche wird angezeigt, wenn die Bildschirmbreite klein ist

NAND
quelle