twitter-bootstrap 用于引导程序切换的动画“X”图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37758887/
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
Animated 'X' icon for bootstrap toggle
提问by machinebit
I am attempting to animate the horizontal lines in the navbar to an 'X' when the page is reduced in size.
当页面缩小时，我试图将导航栏中的水平线动画化为“X”。
My navbar code is as follows:
我的导航栏代码如下：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Company</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="certification.html">Certification</a>
</li>
<li>
<a href="downloads.html">Download PDF</a>
</li>
</ul>
</li>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="inquiry.html">Inquiry</a>
</li>
<li>
<a href="events.html">Events</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
When I attempt to use the CSS shown hereit does not work. Is there something I need to modify for my navbar specifically? I also notice that when I add the css, the :
当我尝试使用此处显示的 CSS 时，它不起作用。有什么我需要专门为我的导航栏修改的吗？我还注意到，当我添加 css 时，：
&:hover {
background: transparent !important;
}
the closing curly brace does not recognize the opening one. What am i missing?
结束的大括号不能识别开始的大括号。我错过了什么？
回答by Mathieu Schaeffer
It's because the tutorial is using Less, a CSS pre-processor, extending the CSS language.
这是因为本教程使用的是Less，一个 CSS 预处理器，扩展了 CSS 语言。
However, you just have to use the compiled CSS, and make a few changes.
但是，您只需要使用已编译的 CSS，并进行一些更改即可。
In your html, add some classes to the bars in order to distinguish each of them :
在您的 html 中，向条形添加一些类以区分它们中的每一个：
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
Also, init your button with the class collapsed, or it will first render as a 'X'.
此外，使用 class 初始化您的按钮collapsed，否则它将首先呈现为“X”。
Then add the CSS compiled :
然后添加已编译的 CSS：
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
And now it should work like a charm.
现在它应该像魅力一样工作。
Here's a JsFiddle : Demo
这是一个 JsFiddle：演示
回答by user10078095
.navbar-toggle .icon-bar {
width: 26px;
height: 2px;
transition: all 0.2s;
}
This should do it, if not just try to adjust the width value in the range of 20px-26px.
这应该可以做到，如果不只是尝试在 20px-26px 范围内调整宽度值。
