推特引导导航栏中的“图标栏”答案

【问题标题】："icon-bar" in twitter bootstrap navigation bar推特引导导航栏中的“图标栏”
【发布时间】：2013-09-22 18:22:39
【问题描述】：

我无法理解以下代码在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>

【问题讨论】：

就是创建一个三横线的按钮。当屏幕宽度较小且导航栏折叠时显示此按钮。当您单击它时，导航栏会展开。
@ArpitAgrawal，您是对的，但请考虑将此作为答案而不是评论！

标签： html css twitter-bootstrap

【解决方案1】：

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等你可以随意改。

【讨论】：

我不确定我是否理解最小化的意思，因为如果窗口最小化，我不会得到不同的图标。但是，如果您缩小浏览器窗口的可见部分，那么导航菜单确实会变成一个具有三条水平线的按钮。感谢您为我解开这个谜团。
@Bletch，您可能已经猜到了，他的意思是“最小化”，如“使窗口变小”，而不是通常的“最小化到系统托盘”。
你知道这有什么奇怪的......它是.navbar-toggle .icon-bar。他们没有把它作为一个独立的类，而是把它变成了导航栏切换的子类。这对我来说毫无意义。我希望能够在导航栏之外用它来装饰我自己的按钮和下拉菜单。您可以复制整个 CSS 块并使其成为一个独立的类来完成此操作，但这是重复的代码。不过，我不知道有更好的解决方案。
我不敢相信 hamburger icon 字样没有出现在此页面上。
@JeremyAnderson 现在可以了，不是吗？ :D

【解决方案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;
}

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：