Twitterブートストラップナビゲーションバーの「icon-bar」

次のコードの意味を理解できません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>

何のicon-barため？なぜそれに似た3つのインスタンスがあるのですか？

このコードはナビゲーションバーセクションにあります。

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

html css twitter-bootstrap

— ヨハンTG
ソース

これは、3つの水平線を持つボタンを作成することです。このボタンは、画面の幅が小さく、ナビゲーションバーが折りたたまれている場合に表示されます。クリックすると、ナビゲーションバーが展開します。

— Arpit Agrawal 2013

@ArpitAgrawal、あなたは正しいですが、これをコメントではなく回答にすることを検討してください！

— MEMark、2014年

回答:

130

icon-barレスポンシブレイアウトを使用して、狭いブラウザ画面でlikeのようなボタンを作成します。ブラウザウィンドウのサイズを変更して（狭めることにより）、ナビゲーションバーがそのボタンにどのように置き換えられているかを確認できます。

3つのspanタグは、「ハンバーガー」アイコンとして一般に知られている、ボタンのように見える3つの水平線を作成します。

見てくださいicon-barではbootstrap.css：

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

これはブロック構造なので、行ごとに配置されます。background-color設定されているgray80。実際には、その変更することができwidth、height、background-color、など、あなたが望むように。

— lvarayut
ソース

ウィンドウが最小化されている場合は別のアイコンが表示されないため、最小化によってあなたが何を意味しているのか理解できませんでした。ただし、ブラウザウィンドウの表示部分を小さくすると、ナビゲーションメニューは3本の横線のあるボタンに変わります。その謎を解いてくれてありがとう。

— Bletch、2014年

@Bletch、おそらくご想像のとおり、「ウィンドウを小さくする」のように「最小化」を意味し、通常の「システムトレイに最小化」するのではありません。

— MEMark、2014年

これについて何がおかしいのか知っています...それはそれ.navbar-toggle .icon-barです。スタンドアロンクラスのままにする代わりに、navbarトグルのサブクラスにしました。それは、私には意味がありません。自分のボタンとドロップダウンをナビゲーションバーの外でこれで装飾できるようにしたいのですが。CSSブロック全体をコピーしてスタンドアロンクラスにするだけでこれを実現できますが、これはコードの繰り返しです。しかし、私はより良い解決策を知りません。

— Chris Cirefice 2014

ハンバーガーのアイコンがこのページに表示されないなんて、信じられません。

— ジェレミーアンダーソン

@JeremyAnderson今はそうですか？：D

— Priya Ranjan Singh

これは別の検索中に出てきたので、OPの回答を拡大しました。実際に機能させるには、ここで共有する価値があると感じたいくつかの変更を加える必要がありました。適切なコード形式を取得できるように、それを独自の答えに入れます。

これをナビゲーションバーの代わりにドロップダウントグルボタンで使用しました（同じアイデア）。これが私が使ったコードです：

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

— ストリートロジック
ソース

これclass="navbar-toggle"はスタイルを取得するために使用されます。

data-toggle="collapse" 属性は、表示と非表示を制御するために使用されます。

このdata-target = "#id"属性は、ボタンを折りたたみ可能なdivに接続するために使用されます

icon-bar3つの水平線のあるボタンを作成するために使用されます。このボタンは画面幅が小さい場合に表示されます

— NAND
ソース