Bootstrap作品展示站点实战项目2(6)

在 img 文件夹里找到 logo.png 文件。你会发现这个图片非常大,有900px 宽。在我们最终的设计中,这个Logo只有120px宽。因为多出来的像素将被压缩到较小的空间内,所以这也是让图片在所有设备(包括视网膜屏设备)中保持清晰的一种简便方法。与此同时,这个图片的尺寸也针对Web进行了优化,只有19 KB。

下面就把它放置到位并限制其宽度。

(1) 在html文档中找到导航条标记中的这一行代码:

复制代码 代码如下:

<a href="https://www.jb51.net/index.html">Bootstrappin'</a>

(2) 把其文本 Bootstrap' 替换成 img 标签,并添加 alt 和 width 属性。其修改后的代码为:

复制代码 代码如下:

<a href="https://www.jb51.net/index.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrap'" /></a>

(3) 保持后并刷新浏览器,可以看到Logo已经出现在了相应的位置上。

Bootstrap作品展示站点实战项目2

9.调整导航项内边距

现在,我们来调整一下导航项,以便文本与Logo位于同一基线之上。

(1) 在 less 文件夹下,新建文件_navbar.less,并把其Bootstrap的navbar.less 文件内容拷贝进去。

(2) 在 _navbar.less 中,找到选择符.navbar-nav,这是导航项的父元素 ul。在相应的规则里,可以看到嵌套的媒体查询。(关于媒体查询,可以参考LESS文档:)。

(3) 相关的行如下所示:

// Uncollapse the nav @media (min-width: @grid-float-breakpoint) { float: left; margin: 0; > li { float: left; > a { padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; } } }

这里的变量@grid-float-breakpoint 指定了一个临界宽度,大于这个宽度,导航条就会扩展到与屏幕同宽;小于这个宽度,导航条就会折叠起来变成移动应用风格的响应式导航。(这个变量是在_variables.less 中定义的)。

(4) 现在,padding-top 和 padding-bottom 值都是动态计算的,以确保导航中的文本垂直居中。而我们想增加上内边距,减少下内边距。与此同时,我们还要扩大导航项的间隔,再把字体增大一些。把原来的代码使用单行注释,把需要的规则写在下面:

> a { //padding-top:@navbar-padding-vertical; //padding-bottom: @navbar-padding-vertical; padding:30px 30px 14px; font-size:18px; }

(5) 保存、编译并刷新浏览器,可以看到显示效果如下:

Bootstrap作品展示站点实战项目2

10.添加图标

现在轮到为导航项添加图标了。我们直接使用 Bootstrap 自带的 Glyphicons,然后尝试下 Font Awesome 这个大型图标库。

PS:此组件的官方文档地址:(中文文档:

我们先从 Home 导航项开始。

(1) 要给 Home 导航项添加 Glyphicons Home 图标,只要在文本之前添加一个 span 标签,再加上特定的类即可:

复制代码 代码如下:

<li>  <a href="https://www.jb51.net/index.html">  <span></span> Home</a></li>

(2) 保存并刷新浏览器,可以看到图标。

(3) 如果没看到字体,请确保:

□ Glyphicon 字体位于 fonts 文件夹;

□ 变量文件 _variables.less 中的 @icon-font-path 值正确。本例的是@icon-font-path:"../fonts/":

(4) 接着给剩下的导航项添加对应的图标。以下依此是 Portfolio、Team 和 Contact 的导航项代码:

<li><a href="#"><span></span> Portfolio</a></li> <li><a href="#"><span></span> Team</a></li> <li><a href="#"><span></span> Contact</a></li>

(5) 保存并刷新,可以看到效果:

(6) 对应的折叠后的响应式效果:

Bootstrap作品展示站点实战项目2

还不错。

不过,这里的图标与设计方案中的并不完全一致。设计方案中的是这样的:

Bootstrap 中免费使用的 Glyphicons 不包含计算器显示器和群组图标。此外,我们也没有从 Glyphicons 图标中找到适合页脚中社交媒体链接的图标。

好在,我们还有别的选择。

11.添加 Font Awesome 图标

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdszd.html