Question

我正在开发一个网站，我想在Bootstrap的静态导航栏中添加动画。我希望在移动视口上切换按钮时，3个水平条会更改为X.

注意：我使用的是Bootstrap 4，而不是3.有些BS3类在BS4中不起作用

这就是我要完成的任务：example。但是，我发现了多个教程，但我正在努力解决它。原因是所有这些教程都基于BS3。 BS3使用 navbar-toggle -class，但BS4使用 navbar-toggler -class。这是主要区别，因为BS4版本在css中包含一个视图：

.navbar-toggler {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    border-color: rgba(0,0,0,.1);
}

在bootstrap.min.css中，navbar-toggler-class被使用了11次。所以如果我修改这个类，它（可能）会破坏。

HTML of menu:
<div class="container">
        <div class="row hidden-lg-up">
            <div class="wrapper-right">
                <a href="#"><img src="img/placeholders/225x50.png" alt="Logo Company Mobile" class="mobile-only" /></a>
            </div>
        </div>
        <div class="row">
            <nav class="navbar navbar-light navbar-full">
                <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
                <div class="collapse navbar-toggleable-md" id="navbarResponsive">
                    <a class="navbar-brand vc-parent" href="#">
                        <img src="img/placeholders/250x50.png" alt="Logo Company Desktop" class="img-fluid desktop-only" />
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="nav-item active align-middle">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                        <li class="nav-item align-middle">
                            <a class="nav-link" href="#">Item</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>

有人能指出我正确的方向吗？

Answer 1

菜单打开时更改.navbar-toggler-icon背景

background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8l20 16M4 24L24 8'/%3E%3C/svg%3E");

如何在汉堡包菜单Bootstrap 4中添加动画？

1 个答案: