<div class="container">
<a class="banner-brand" href="index.html">
<img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>
</div>
(5) 保存修改,刷新显示,就可以在导航条上面看到新的Logo了:
下面我们需要调整 Logo,让它只在必要时显示。
在 _variables.less 中,找到变量 @grid-float-breakpoint ,并修改为:
复制代码 代码如下:@grid-float-breakpoint: @screen-md-min;
这个变量决定了导航条在窄视口中折叠,在宽视口中展开。在我们的实际中,考虑到导航的复杂性,需要在接近的下一个较宽的断点折叠导航
条。因此,需要把变量的值设置为@screen-md-min。
设置完这个变量后,我们要考虑让 banner-brand 只在中、大型视口中显示,而让 navbar-brand 只在小和超小型视口中显示。Bootstrap 为此提
供了一组响应式实用类,具体可以参考在线文档:http://getbootstrap.com/css/(中文文档:http://v3.bootcss.com/css/)
下面我们就按照需求来应用这些类。
(1) 把 visible-md visible-lg 添加到 banner-brand 类后面:
<a class="banner-brand visible-md visible-lg" href="#">
<img src="img/logo.png" alt="Bootstrap'" width="180" />
</a>
(2) 把 visible-xs visible-sm 添加到 navbar-brand 类后面:
<a class="navbar-brand visible-xs visible-sm" href="#">
<img src="img/logo.png" alt="Bootstrap'" width="120" />
</a>
(3) 保存修改,刷新网页。可以看到,在中、大型视口中,只会显示 banner-brand 中的 Logo:
在小型和超小型视口中,只会显示 navbar-brand 中的 Logo:
2.3 调整导航条
现在导航条包含7项,每项又各有子菜单,体现了一个大型复杂网站的需求。
接下来,我们要把 All Departments 菜单挪到导航条的最右端,让它与其他菜单保持最大距离。
操作步骤是:我们先把 All Departments 菜单移除父元素 ul,并列排在原父元素 ul 后;然后使其包含在新的 ul 标签内,新标签的类名为 “nav
navbar-nav pull-right”。
</ul>
<ul class="nav navbar-nav pull-right">