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

假设我们已经想好了要给自己的作品弄一个在线站点。一如既往，时间紧迫。我们需要快一点，但作品展示效果又必须专业。当然，站点还得是响应式的，能够在各种设备上正常浏览，因为这是我们向目标客户推销时的卖点。这个项目可以利用Bootstrap的很多内置特性，同时也将根据需要对Bootstrap进行一些定制。

1.设计目标

虽然对大屏幕中的展示效果已经胸有成竹，但我们还应该从小设备开始，强迫自己聚焦在关键的要素上面。

这个作品展示站点应该具有下列功能：

□ 带Logo的可折叠的响应式导航条；

□ 重点展示四张作品的图片传送带；

□ 单栏布局中包含三块内容，每块内容中都包含标题、短段落和吸引人点击阅读的大按钮；

□ 页脚包含社交媒体链接。

下面的屏幕截图展示了设计方案：

总体来看，这将是对我们工作的一个完美的展示。图片传送带比较高，可以充分展示我们作品的图片。当然，导航到底下的内容也不难，用户可以先了解每一项的大致情况，然后决定深入阅读那块内容。通过把重要的练级做成大按钮，从视觉上突出了重要的操作，可以起到吸引用户点击的作用，而且就算是手指粗大的用户都可以轻易点触。

为了便于维护，我们只考虑两个主要的断点。在小于768px的小屏幕中使用单栏布局，否则就切换到一个三栏布局：

在这个针对大屏幕的设计效果中，可以发现下列功能：

□ 位于顶部的导航条，而且各导航条都附带图标；

□ 宽屏版的图片传送带，其中的图片拉伸至与浏览器窗口同宽；

□ 三栏布局分别容纳三块文本内容；

□ 页脚在布局中水平居中。

这个设计的配色很简单，只有灰阶以及用于链接和突出显示的金绿色。

明确了设计目标，接下来就可以布置内容了。

2.基本页面搭建

根据前面文章的说明，我们可以暂时把项目的基本框架搭建起来。其html文档代码如下：

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

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

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

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

3.搭建传送带

下面先来搭建传送带，传送带会循环展示我们作品的四张特写图片。其标记结构的官方文档地址是：

可以按照示例中的结构设置其中的元素。以下代码就是传送带的所有标记，包含各个部分，首先是进度指示器：

整个传送带是一个带ID属性的div标签，其 carousel 类用于把Bootstrap 的传送带CSS应用到这个元素，为指示器、传送带项和前一张及后一张控件添加样式。

进度指示器的 data-target 属性必须使用传送带的 IDcarousel-example-generic 。有了这个属性，JavaScript 插件才能为活动的传送带项添加 active 类。在此我们预先为第一个指示器添加了active类。然后，类的切换就由JavaScript控制了。它会删除第一个指示器的这个类，再添加到后续指示器，如此循环。

此外，还要注意 data-slide-to 的值从0开始，与JavaScript和其他编程语言一样。记住：从0开始，不是从1开始。

指示器后面，是类为 carousel-inner 的元素。这个元素是所有传送带项（item），也就是所有图片。

carousel-inner 元素内部是传送带项，是一组div标签，每个都带有class="item"。把第一项修改成包含item 和active 两个类，使其一开始就可见。

此时的标记结构如下所示：

下面稍微解释下 container 和 row 类的作用：

□ container 类用于约束内容的宽度，并使其在页面内居中；

□ row 类用于包装三个栏，并未栏间流出左右外边距；

□ container 类和row 类都设定了清除，因而它们可以包含浮动元素，同时又清除之前的浮动元素。

现在，保存并刷新。可以看到对应的显示效果如下：

这样就利用响应式网格系统完成了响应式分栏，接下来我们要利用Bootstrap的按钮样式，把内容分块中的链接做成突出的效果。

5.把链接变成按钮

把重要的内容链接转换成突出显示的按钮很简单。为此要用到如下几个关键的类。

□ btn 类用于把链接变成按钮的样式；

□ btn-primary 类用于把按钮变成主品牌颜色；

□ pull-right 类用于把链接浮动到右侧，使其占据更大的空间，从而便于发现和点击。

把上述这几个类添加到三个内容块末尾的链接上：

保存并刷新，其显示效果如下：

此处按钮的标记结构的官方文档地址为：

在基本的标记结构就为的条件下，接下来可以进行微调了。谓词需要用到自定义的CSS，而我们要借此机会体验一下Bootstrap的LESS文件的强大威力。

6.理解LESS

PS:本节基于bootstrap v3.0.2，这个版本在GitHub上的介绍和下载地址为：

PS:当前的最新版本是：

本节会介绍创建创建、编辑、顶置一些LESS文件，以便为我们的设计生成期望的CSS。

□ LESS 文档：

□ Sitepoint 网站关于 LESS 的完整介绍：

简而言之，使用LESS预处理器来生成CSS是一件既令人激动又十分轻松的事。

6.1 嵌套规则

嵌套规则极大提高了组合样式的效率。比如，CSS中的选择符可能会多次重复出现：

其中这些相同的选择符用LESS写会简洁很多，只要使用一个简单的嵌套即可：

编译后，这些规则会生成标准的CSS。但 LESS的嵌套规则更容易写，也更容易维护。

6.2 变量

使用变量可以让我们只设定（或修改）一次，就能自动影响（更新）整个样式表中用到该值的属性。比如，可以像下面这样使用颜色变量：

在这些变量的值变化后，可以自动将它们更新到整个站点。这是因为我们在LESS文件中使用了这些变量：

6.3 混入

混入可以让生成整套规则更方便也容易管理。比如，可以利用它简化为元素应用border-box 属性的任务。在CSS中，要涵盖所有浏览器，需要用到每种浏览器的供应商前缀，为此针对每个元素都要写三行相同的声明，而且还要记住每一种前缀的写法：

在LESS 中，可以只写一个供混入的规则，后面则可以通过 @boxmodel 参数来指定期望的盒模型：

然后就可以在需要的地方使用这个混入了：

编译后，还会为每个元素生成三行CSS 。

6.4 运算式

通过运算式可以基于变量实现数学计算。比如，可以将一种颜色作为基准，对其进行加亮和减暗处理：