twitter引導程序導航欄中的“icon-bar”

Question

我無法理解以下代碼在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 ？ 為什么有三個相似的實例呢？

此代碼位於導航欄部分：

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

Answer 1

icon-bar用於響應式布局，在狹窄的瀏覽器屏幕上創建一個看起來像≡的按鈕。 您可以調整瀏覽器窗口的大小（縮小范圍），以查看導航欄如何被該按鈕替換。

三個span標簽創建三條水平線，看起來像一個按鈕，通常稱為“漢堡”圖標。

看一下bootstrap.css中的icon-bar ：

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

它是一種塊結構，因此它是逐行對齊的。 background-color設置為灰色80 。 實際上，您可以根據需要更改其width ， height ， background-color等。

Answer 2

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

Answer 3

class="navbar-toggle"用於獲取樣式。

data-toggle="collapse"屬性用於控制顯示和隱藏。

data-target = "#id"屬性用於將按鈕與可折疊div連接

icon-bar o創建一個帶有三條水平線的按鈕。 屏幕寬度較小時顯示此按鈕