Question

我正在开发基于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">

请提出任何建议。

感谢。

Answer 1

也许您可以使用“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>

Answer 2

您可以取出图像并将其替换为div：

<a href="" class="logo">
  <div id="responsivelogo">
  </div>
</a>

CSS：

#responsivelogo {
  display: inline-block;
  background-image: url("path/to/logo1.png");
  background-position: center center;
  background-size: cover;
  height: 40px;
}

然后添加您的媒体查询

@media (max-width: 768px){
/*Unless you changed the collapse point, this is the default*/
#responsivelogo {
    background-image: url("path/to/logo2.png");
 }
}

由于您使用PHP将源推送到图像，因此您必须将CSS置于内部并将脚本放在background-image选择器的URL上。

或者，您也可以使用此技术http://littlegreenfootballs.com/article/43278_Tech_Note-_Using_Media_Queries_With_PHP

如果你要去那条路线，只需在你的img src上设置一个变量，然后用他在那个网站上显示的if / else语句设置变量。

希望这有帮助！

折叠导航栏时更改徽标

2 个答案: