twitter引导导航栏中的"icon- bar“
twitter引导导航栏中的"icon- bar“
提问于 2013-09-18 13:41:04
我无法理解以下代码在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>回答 3
Stack Overflow用户
回答已采纳
发布于 2013-09-18 14:02:03
icon-bar用于响应式布局，用于在狭窄的浏览器屏幕上创建一个看起来像≡的按钮。您可以调整浏览器窗口的大小(通过缩小窗口)，以查看导航栏是如何被该按钮替换的。
这三个span标签创建了三条水平线，看起来像一个按钮，通常被称为“汉堡”图标。
看看bootstrap.css中的icon-bar
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}它是一个块结构，所以它是逐行对齐的。background-color设置为gray80。实际上，您可以随意更改它的width、height、background-color等。
Stack Overflow用户
发布于 2014-05-06 10:58:03
我详述了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;
}Stack Overflow用户
发布于 2015-11-11 14:45:05
class="navbar-toggle"用于获取样式。
data-toggle="collapse"属性用于控制显示和隐藏。
data-target = "#id"属性用于将按钮与可折叠的div连接
icon-bar用于创建一个有三条水平线的按钮。此按钮在屏幕宽度较小时显示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18864657
复制相关文章
相似问题