97

に関して、次のコードが何を意味するのか理解できません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>
4

3 に答える 3

7

これは別の検索中に出てきたので、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;
}
于 2014-05-06T02:58:03.330 に答える
3

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

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

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

icon-barを使用して、3 本の水平線でボタンを作成します。このボタンは画面幅が小さい場合に表示されます

于 2015-11-11T06:45:04.700 に答える