假设我们已经想好了要给自己的作品弄一个在线站点。一如既往，时间紧迫。我们需要快一点，但作品展示效果又必须专业。当然，站点还得是响应式的，能够在各种设备上正常浏览，因为这是我们向目标客户推销时的卖点。这个项目可以利用Bootstrap的很多内置特性，同时也将根据需要对Bootstrap进行一些定制。
1.设计目标
虽然对大屏幕中的展示效果已经胸有成竹，但我们还应该从小设备开始，强迫自己聚焦在关键的要素上面。
这个作品展示站点应该具有下列功能：
□ 带Logo的可折叠的响应式导航条；
□ 重点展示四张作品的图片传送带；
□ 单栏布局中包含三块内容，每块内容中都包含标题、短段落和吸引人点击阅读的大按钮；
□ 页脚包含社交媒体链接。
下面的屏幕截图展示了设计方案：
总体来看，这将是对我们工作的一个完美的展示。图片传送带比较高，可以充分展示我们作品的图片。当然，导航到底下的内容也不难，用户可以先了解每一项的大致情况，然后决定深入阅读那块内容。通过把重要的练级做成大按钮，从视觉上突出了重要的操作，可以起到吸引用户点击的作用，而且就算是手指粗大的用户都可以轻易点触。
为了便于维护，我们只考虑两个主要的断点。在小于768px的小屏幕中使用单栏布局，否则就切换到一个三栏布局：
在这个针对大屏幕的设计效果中，可以发现下列功能：
□ 位于顶部的导航条，而且各导航条都附带图标；
□ 宽屏版的图片传送带，其中的图片拉伸至与浏览器窗口同宽；
□ 三栏布局分别容纳三块文本内容；
□ 页脚在布局中水平居中。
这个设计的配色很简单，只有灰阶以及用于链接和突出显示的金绿色。
明确了设计目标，接下来就可以布置内容了。
2.基本页面搭建
根据前面文章【Bootstrap】1.初识Bootstrap的说明，我们可以暂时把项目的基本框架搭建起来。其html文档代码如下：
<!DOCTYPE html> <!--[if lt IE 7]> <html> <![endif]--> <!--[if IE 7]> <html> <![endif]--> <!--[if IE 8]> <html> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>作品展示站点</title> <meta content=""> <meta content="width=device-width"> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon" /> <!-- Main Style Sheet --> <link href="https://www.jb51.net/css/main.css"> <!-- Modernizr --> <script src="https://www.jb51.net/js/vendor/modernizr-2.6.2.min.js"></script> <!-- Respond.js for IE 8 or less only --> <!--[if (lt IE 9) & (!IEMobile)]> <script src="https://www.jb51.net/js/vendor/respond.min.js"></script> <![endif]--> </head> <body> <!--[if lte IE 7]> <p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <header role="banner"> <nav role="navigation"> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> <a href="https://www.jb51.net/index.html">Bootstrappin'</a> </div> <div> <ul> <li><a href="https://www.jb51.net/index.html">Home</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Team</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container --> </nav> </header> <div role="main"> <img src="https://www.jb51.net/img/okwu.jpg" alt="OKWU.edu Homepage"> <img src="https://www.jb51.net/img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> <img src="https://www.jb51.net/img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> <img src="https://www.jb51.net/img/emancipation.jpg" alt="Emancipation Stories"> <h2>Welcome!</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See our portfolio</a></p> <h2>Recent Updates</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">See what's new!</a></p> <h2>Our Team</h2> <p>Suspendisse et arcu felis, ac gravida turpis. Suspendisse potenti. Ut porta rhoncus ligula, sed fringilla felis feugiat eget. In non purus quis elit iaculis tincidunt. Donec at ultrices est.</p> <p><a href="#">Meet the team!</a></p> </div> <footer role="contentinfo"> <p><a href="https://www.jb51.net/index.html"> <img src="https://www.jb51.net/img/logo.png" alt="Bootstrappin'"></a></p> <ul> <li><a href="#" title="Twitter Profile">Twitter</a></li> <li><a href="#" title="Facebook Page">Facebook</a></li> <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li> <li><a href="#" title="Google+ Profile">Google+</a></li> <li><a href="#" title="GitHub Profile">GitHub</a></li> </ul> </footer> <script src="https://www.jb51.net/js/vendor/jquery-1.10.2.min.js"></script> <script src="https://www.jb51.net/js/plugins.js"></script> <script src="https://www.jb51.net/js/main.js"></script> </body> </html>
打开页面后，可以看到导航栏后面就是作品图片：
作品图片后面就是文本块和包含一组社交链接的页脚：
倒也简单。还是开始让它变身吧！
我们从添加Bootstrap类着手，这样可以利用Bootstrap默认的CSS样式和JavaScript行为，迅速搭建起来基本的界面元素。
3.搭建传送带
下面先来搭建传送带，传送带会循环展示我们作品的四张特写图片。其标记结构的官方文档地址是： 。
可以按照示例中的结构设置其中的元素。以下代码就是传送带的所有标记，包含各个部分，首先是进度指示器：