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为了什么为什么会有三个类似的例子呢？

此代码位于导航栏部分：

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

html css twitter-bootstrap

— 约翰·TG
source

这将创建一个具有三个水平线的按钮。屏幕宽度较小且导航栏折叠时，将显示此按钮。当您单击它时，导航栏将展开。

— Arpit Agrawal

@ArpitAgrawal，您是正确的，但请考虑将其作为答案而不是评论！

— MEMark 2014年

Answers:

130

icon-bar用于响应式布局，以在狭窄的浏览器屏幕上创建类似于≡的按钮。您可以调整浏览器窗口的大小（使其变窄），以查看导航栏如何被该按钮替换。

这三个span标签创建了三个水平线，它们看起来像一个按钮，通常称为“汉堡”图标。

看看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等如你所愿。

— 瓦瓦鲁特
source

我不确定我是否理解最小化的含义，因为如果最小化窗口，则不会得到其他图标。但是，如果您缩小浏览器窗口的可见部分，则导航菜单实际上变成了一个具有三条水平线的按钮。感谢您为我消除这个谜团。

— Bletch 2014年

您可能已经知道，@ Bletch的意思是“最小化”，如“使窗口变小”，而不是通常的“最小化至系统托盘”。

— MEMark 2014年

您知道这很奇怪...是.navbar-toggle .icon-bar。他们没有将其保留为独立类，而是使其成为导航栏切换的子类。对我而言，这毫无意义。我希望能够在导航栏外部装饰自己的按钮和下拉菜单。您可以复制整个CSS块，并使其成为独立的类来完成此操作，但这是重复的代码。不过，我不知道有更好的解决方案。

— 克里斯·西里菲斯

我不敢相信“ 汉堡图标 ”一词不会出现在此页面上。

— 杰里米·安德森

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

— 街头逻辑
source

将class="navbar-toggle"用于获取的样式。

data-toggle="collapse" 属性用于控制显示和隐藏。

该data-target = "#id"属性用于将按钮与可折叠div连接

icon-bar用于创建具有三条水平线的按钮。屏幕宽度较小时显示此按钮

— 与非
source