1.设计目标
虽然对大屏幕中的展示效果已经胸有成竹，但我们还应该从小设备开始，强迫自己聚焦在关键的要素上面。
这个作品展示站点应该具有下列功能：
□ 带Logo的可折叠的响应式导航条；
□ 重点展示四张作品的图片传送带；
□ 单栏布局中包含三块内容，每块内容中都包含标题、短段落和吸引人点击阅读的大按钮；
□ 页脚包含社交媒体链接。
下面的屏幕截图展示了设计方案：
总体来看，这将是对我们工作的一个完美的展示。图片传送带比较高，可以充分展示我们作品的图片。当然，导航到底下的内容也不难，用户可以先了解每一项的大致情况，然后决定深入阅读那块内容。通过把重要的练级做成大按钮，从视觉上突出了重要的操作，可以起到吸引用户点击的作用，而且就算是手指粗大的用户都可以轻易点触。
为了便于维护，我们只考虑两个主要的断点。在小于768px的小屏幕中使用单栏布局，否则就切换到一个三栏布局：
在这个针对大屏幕的设计效果中，可以发现下列功能：
□ 位于顶部的导航条，而且各导航条都附带图标；
□ 宽屏版的图片传送带，其中的图片拉伸至与浏览器窗口同宽；
□ 三栏布局分别容纳三块文本内容；
□ 页脚在布局中水平居中。
这个设计的配色很简单，只有灰阶以及用于链接和突出显示的金绿色。
明确了设计目标，接下来就可以布置内容了。
2.基本页面搭建
根据前面文章 【Bootstrap】1.初识Bootstrap 的说明，我们可以暂时把项目的基本框架搭建起来。其html文档代码如下：
DOCTYPE html >
[if lt IE 7]> -->
[if IE 7]> -->
[if IE 8]> -->
[if gt IE 8]> -->
html class ="no-js" >
-->
head >
meta charset ="utf-8" >
meta http-equiv ="X-UA-Compatible" content ="IE=edge,chrome=1" >
title > 作品展示站点 title >
meta name ="description" content ="" >
meta name ="viewport" content ="width=device-width" >
link href ="favicon.ico" type ="image/x-icon" rel ="shortcut icon" />
Main Style Sheet -->
link rel ="stylesheet" href ="css/main.css" >
Modernizr -->
script src ="js/vendor/modernizr-2.6.2.min.js" > script >
Respond.js for IE 8 or less only -->
[if (lt IE 9) & (!IEMobile)]>
-->
head >
body >
[if lte IE 7]>
You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.
-->
header role ="banner" >
nav role ="navigation" class ="navbar navbar-default" >
div class ="container" >
div class ="navbar-header" >
button type ="button" class ="navbar-toggle" data-toggle ="collapse" data-target =".navbar-collapse" >
span class ="icon-bar" > span >
span class ="icon-bar" > span >
span class ="icon-bar" > span >
button >
a class ="navbar-brand" href ="index.html" > Bootstrappin' a >
div >
div class ="navbar-collapse collapse" >
ul class ="nav navbar-nav" >
li class ="active" > a href ="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 ="img/okwu.jpg" alt ="OKWU.edu Homepage" >
img src ="img/okwu-athletics.jpg" alt ="OKWU Athletics Homepage" >
img src ="img/bartlesvillecf.jpg" alt ="Bartlesville Community Foundation" >
img src ="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 ="index.html" >
img src ="img/logo.png" width ="80" alt ="Bootstrappin'" > a > p >
ul class ="social" >
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 ="js/vendor/jquery-1.10.2.min.js" > script >
script src ="js/plugins.js" > script >
script src ="js/main.js" > script >
body >
html >
查看更多关于【Bootstrap】2.作品展示站点的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did101641