twitter-bootstrap – 折叠导航栏时更改徽标

2023年7月21日 251次阅读

我正在开发基于Bootstrap v3的仪表板界面.导航栏可以折叠,我想知道当导航栏折叠时是否有办法让徽标图像发生变化？

<div class="topbar">
            <div class="topbar-left">
                <div class="text-center">
                    <a href="" class="logo"><img src="<? echo $appUrl ?>/system/assets/img/logo.png" height="40px"></a>
                </div>
            </div>
            <!-- Button mobile view to collapse sidebar menu -->
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div class="">
                        <div class="pull-left">
                            <button class="button-menu-mobile open-left">
                                <i class="fa fa-bars"></i>
                            </button>
                            <span class="clearfix"></span>
                        </div>

                        <ul class="nav navbar-nav navbar-right pull-right">
                            <li class="dropdown">

请给我任何建议.

谢谢.

最佳答案 也许你可以用“hidden-xs”隐藏你的“主要”标识,你的“二级”标识隐藏了sm和lg尺寸

<div class="col-sm-x hidden-md hidden-lg">
   <img src="mainLogo.gif" alt="main">
</div>
<div class="hidden-sm col-md-x col-lg-x">
   <img src="secondaryLogo.gif" alt="secondary">
</div>
点赞