环境准备：
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>