我们来看看这个练习用的文件,就在本书源代码的02_Code_BEGIN文件夹中。看起来这里的文件与第1章中模板文件夹差不多。

{%}

新增的一些内容如下。

  • less文件夹里有一些改动,但我们不着急介绍,还是先看看与内容与关的变化吧。

  • img文件夹现在包含5张图片:

    • 1张Logo图片,名为logo.png;

    • 4张作品图片。

  • index.html的改动之处如下:

    • 导航栏更新了,以反映新站点的架构;

    • 图片、内容块、页脚中Logo和社交链接都有了各自基本的标记。

与第1章中的导航栏不同,此时的传送带、分栏和图片都没有添加Bootstrap类。可以在浏览器中看一看结果。

打开页面后,可以看到导航栏后面就是作品图片:

{%}

作品图片后面就是文本块和包含一组社交链接的页脚:

{%}

倒也简单。还是开始让它变身吧!

我们从添加Bootstrap类着手,这样可以利用Bootstrap默认的CSS样式和JavaScript行为,迅速搭建起基本的界面元素。

30:00