本次我们将采用Bootstrap来快速构建一个响应式的，支持多种设备的在线站点。
一、设计目标
站点具备功能：
1.带有Logo的可折叠的响应式导航条；
2.重点展示四张作品的图片传送带；
3.单栏布局中包含三块内容，每块内容都包含标题、短段落和吸引人点击阅读的大按钮；
4.页脚包含社交媒体链接
基本HTML样式 1 <!DOCTYPE html> <!-- html5标签 -->
2 3 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 4 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> 5 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> 6 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> 7 8 <head>
10 <meta charset="utf-8"> 11 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 12 <title></title> 13 <meta name="description" content=""> 14 <meta name="viewport" content="width=device-width"> 15 16 <!-- Main Style Sheet --> 17 <link rel="stylesheet" href="css/main.css"> 18 <!-- Modernizr --> 19 <script src="js/vendor/modernizr-2.6.2.min.js"></script> 20 <!-- Respond.js for IE 8 or less only --> 21 <!--[if (lt IE 9) & (!IEMobile)]> 22 <script src="js/vendor/respond.min.js"></script> 23 <![endif]--> 24 25 </head> 26 <body> 27 <!--[if lte IE 7]> 28 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://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> 29 <![endif]--> 30 31 <header role="banner"> 32 <nav role="navigation" class="navbar navbar-default"> 33 <div class="container"> 34 <div class="navbar-header"> 35 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 36 <span class="icon-bar"></span> 37 <span class="icon-bar"></span> 38 <span class="icon-bar"></span> 39 </button> 40 <a class="navbar-brand" href="index.html">Bootstrappin'</a> 41 </div> 42 <div class="navbar-collapse collapse"> 43 <ul class="nav navbar-nav"> 44 <li class="active"><a href="index.html">Home</a></li> 45 <li><a href="#">Portfolio</a></li> 46 <li><a href="#">Team</a></li> 47 <li><a href="#">Contact</a></li> 48 </ul> 49 </div><!--/.nav-collapse --> 50 </div><!--/.container --> 51 </nav> 52 </header> 53 54 <main role="main"> 55 56 <img src="img/okwu.jpg" alt="OKWU.edu Homepage"> 57 <img src="img/okwu-athletics.jpg" alt="OKWU Athletics Homepage"> 58 <img src="img/bartlesvillecf.jpg" alt="Bartlesville Community Foundation"> 59 <img src="img/emancipation.jpg" alt="Emancipation Stories"> 60 61 <h2>Welcome!</h2> 62 <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> 63 <p><a href="#">See our portfolio</a></p> 64 65 <h2>Recent Updates</h2> 66 <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> 67 <p><a href="#">See what's new!</a></p> 68 69 <h2>Our Team</h2> 70 <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> 71 <p><a href="#">Meet the team!</a></p> 72 73 </main> 74 75 <footer role="contentinfo"> 76 77 <p><a href="index.html"><img src="img/logo.png" width="80" alt="Bootstrappin'"></a></p> 78 79 <ul class="social"> 80 <li><a href="#" title="Twitter Profile">Twitter</a></li> 81 <li><a href="#" title="Facebook Page">Facebook</a></li> 82 <li><a href="#" title="LinkedIn Profile">LinkedIn</a></li> 83 <li><a href="#" title="Google+ Profile">Google+</a></li> 84 <li><a href="#" title="GitHub Profile">GitHub</a></li> 85 </ul> 86 87 </footer> 88 89 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 90 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 91 <script src="js/plugins.js"></script> 92 <script src="js/main.js"></script> 93 94 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 95 <script> 96 var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; 97 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; 98 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; 99 s.parentNode.insertBefore(g,s)}(document,'script')); 100 </script> 101 102 </body> 103 </html>
这个基本的页面包含导航条、主题内容、页脚。目前没有加入bootstrap样式。
二、Bootstrap 引入
2.1 搭建传送带
（1）基本传送带
根据Bootstrap文档上的传送带例子修改；
教程例子：
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>