在twitter bootstrap导航栏中的“图标栏”

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (42)

我研究twitter bootstrap并在bootstrap网站上阅读bootstrap示例。我不明白以下代码的含义:

<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>

做什么的?为什么三个类似的标签

此代码位于导航栏部分中:

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

有人可以帮助我的链接或描述?

提问于
用户回答回答于

它用于响应式布局,在狭窄的浏览器屏幕上创建一个看起来像≡的按钮。您可以调整浏览器窗口大小,以查看导航栏如何被该按钮替代。

这三个span创建三条水平线,看起来像iOS中的按钮。

我们来看看 bootstrap.css

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

它是一个块结构,所以它是一行一行地排列的。背景颜色设置为灰色80。实际上,您可以根据需要更改其宽度,高度和背景颜色。

用户回答回答于

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

扫码关注云+社区

领取腾讯云代金券