Html Twitter 引导程序导航栏中的“图标栏”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18864657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
"icon-bar" in twitter bootstrap navigation bar
提问by JohanTG
I cannot understand what the following code means in terms of 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>
What is icon-barfor? Why are there three similar instances of it?
是icon-bar为了什么？为什么会有三个类似的例子？
This code is in the navigation bar section:
此代码位于导航栏部分：
<div class="navbar-header">
...
</div>
回答by lvarayut
icon-baris used for responsive layouts to create a button that looks like ≡ on narrow browser screens. You can resize your browser window (by making it narrow) to see how the navbar is replaced by that button.
icon-bar用于响应式布局以创建在窄浏览器屏幕上看起来像 ≡ 的按钮。您可以调整浏览器窗口的大小（通过使其变窄）以查看该按钮如何替换导航栏。
The three spantags create three horizontal lines that look like a button, commonly known as the "burger" icon.
这三个span标签创建了三个看起来像按钮的水平线，通常称为“汉堡”图标。
Take a look at icon-barin bootstrap.css:
看看icon-bar在bootstrap.css：
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
It is a block structure, so it is aligned line by line. The background-coloris set to be gray80. Actually, you can change its width, height, background-color, etc. as you wish.
它是一个块结构，所以它是逐行对齐的。将background-color被设置为gray80。其实，你可以改变它width，height，background-color等如你所愿。
回答by streetlogics
I expanded on the OP's answer since this came up during a different search, and I had to make a few modifications to actually get things working that I felt were worth sharing here. Putting it in it's own answer so that it gets proper code formatting.
我扩展了 OP 的答案，因为这是在不同的搜索中出现的，我必须进行一些修改才能使我认为值得在这里分享的东西真正起作用。把它放在它自己的答案中，以便它获得正确的代码格式。
I used this in a dropdown toggle button instead of navbar (same idea). Here's the code I used:
我在下拉切换按钮而不是导航栏（相同的想法）中使用了它。这是我使用的代码：
HTML:
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:
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;
}
回答by NAND
the class="navbar-toggle"is used to get the styles.
将class="navbar-toggle"用于获取的样式。
data-toggle="collapse"attribute is used to control the show and hide.
data-toggle="collapse"属性用于控制显示和隐藏。
the data-target = "#id"attribute is used to connect the button with the collapsible div
该data-target = "#id"属性用于将按钮与可折叠 div 连接起来
icon-baris used o create a button with three horizontal lines. This button is displayed when the screen width is small
icon-bar用于创建具有三个水平线的按钮。屏幕宽度较小时显示此按钮
