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

此代码位于导航栏部分：

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

3 回答 3

131

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 。实际上，您可以根据需要更改其, ,等。widthheightbackground-color

于 2013-09-18T06:02:03.397 回答
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用于创建具有三个水平线的按钮。屏幕宽度较小时显示此按钮

于 2015-11-11T06:45:04.700 回答