在twitter bootstrap导航栏中的“图标栏”
我研究twitter引导，并在引导站点上阅读引导示例。 我不明白以下代码的含义：
<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>
有人可以帮助我的链接或描述？
它用于响应式布局，在狭窄的浏览器屏幕上创build一个看起来像≡的button。 您可以调整浏览器窗口大小，以查看导航栏如何被该buttonreplace。
三个span创build三条水平线，看起来像iOS中的button。
我们来看看bootstrap.css
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; background-color: #cccccc; border-radius: 1px; }
它是一个块结构，所以它是一致的逐行alignment。 背景颜色设置为灰色80 。 其实，你可以随意改变它的宽度，高度和背景颜色。
希望有所帮助。
我在OP的答案中做了扩展，因为这是在不同的search过程中出现的，所以我不得不做一些修改，以便让我觉得在这里值得分享的东西工作。 把它放在它自己的答案，以便它得到正确的代码格式。
我用下拉切换button，而不是导航栏（相同的想法）。 这是我使用的代码：
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; }
class="navbar-toggle"用于获取样式。
data-toggle="collapse"属性用于控制显示和隐藏。
data-target = "#id"属性用于连接button和可折叠div
icon-bar o用三条水平线创build一个button。 当屏幕宽度很小时，会显示此button
