環境准備：
1、創建一個static web名為bootstrapDemo
2、在bootstrapDemo文件夾下安裝bower
npm install bower
會自動產生node-module文件夾
3、在bootstrapDemo文件夾下安裝所需jar包
npm install bootstrap@3
npm install jquery
會自動在node-module產生安裝的jar源
index.html:
<!--頂部導航條-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>瀏覽器下載</title> <link href="../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> <!--<link href="../resource/css/style.css" rel="stylesheet"> <!–[if lt IE 9]> <!--<script src="../resource/js/html5shiv.js"></script> <script src="../resource/js/respond.min.js"></script>--> <!--[endif]–>--> </head> <body> <!--頂部導航條--> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">現代瀏覽器博物館</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">綜述</a></li> <li><a href="#">簡述</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">特點<span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Chrome</a></li> <li><a href="#">Firefox</a></li> <li><a href="#">IE</a></li> <li><a href="#">Opera</a></li> <li><a href="#">Safari</a></li> </ul> </li> <li><a href="#" data-toggle="modal" data-target="#">關於</a></li> </ul> </div> </div> </nav> <script src="../node_modules/jquery/dist/jquery.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script> </body> </html>
圖片輪番
<!--廣告圖片輪播--> <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> <li data-target="#carousel-example-generic" data-slide-to="3"></li> <li data-target="#carousel-example-generic" data-slide-to="4"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/chrome-big.jpg" alt="1 slide"> <div class="carousel-caption"> <h1>Chrome</h1> <p>Google Chrome，又稱Google瀏覽器，是一個由Google（谷歌）公司開發的網頁瀏覽器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">點我下載</a></p> </div> </div> <div class="item"> <img src="images/firefox-big.jpg" alt="2 slide"> <div class="carousel-caption"> <h1>Firefox</h1> <p>Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個開源網頁瀏覽器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">點我下載</a></p> </div> </div> <div class="item"> <img src="images/ie-big.jpg" alt="3 slide"> <div class="carousel-caption"> <h1>IE</h1> <p>Internet Explorer，簡稱 IE，是微軟公司推出的一款網頁瀏覽器。</p> <p><a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank" role="button">點我下載</a></p> </div> </div> <div class="item"> <img src="images/opera-big.jpg" alt="4 slide"> <div class="carousel-caption"> <h1>Opera</h1> <p>Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁面標簽式瀏覽的網絡瀏覽器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">點我下載</a></p> </div> </div> <div class="item"> <img src="images/safari-big.jpg" alt="5 slide"> <div class="carousel-caption"> <h1>Safari</h1> <p>Safari，是蘋果計算機的最新操作系統Mac OS X中的瀏覽器。</p> <p><a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" role="button">點我下載</a></p> </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>