|
|
@@ -0,0 +1,256 @@
|
|
|
+<!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">
|
|
|
+ <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
|
|
|
+ <title>My Bootstrap Demo</title>
|
|
|
+
|
|
|
+ <!-- Bootstrap -->
|
|
|
+ <!-- Latest compiled and minified CSS -->
|
|
|
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
|
|
+
|
|
|
+ <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
|
+ <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
|
|
+ <!--[if lt IE 9]>
|
|
|
+ <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
|
+ <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
|
+ <![endif]-->
|
|
|
+
|
|
|
+ <!-- Custom stylesheet -->
|
|
|
+ <link rel="stylesheet" href="style.css">
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <nav class="navbar navbar-inverse navbar-fixed-top">
|
|
|
+ <div class="container">
|
|
|
+ <!-- Header and mobile display -->
|
|
|
+ <div class="navbar-header">
|
|
|
+ <button type="button" class="navbar-toggle collasped" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
|
|
|
+ <span class="sr-only">Toggle navigation</span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ <span class="icon-bar"></span>
|
|
|
+ </button>
|
|
|
+ <a class="navbar-brand" href="#">现代浏览器博物馆</a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Toggle and contents -->
|
|
|
+ <div class="collapse navbar-collapse" id="navbar-collapse-1">
|
|
|
+ <ul class="nav navbar-nav">
|
|
|
+ <li><a href="#">综述</a></li>
|
|
|
+ <li><a href="#">简述</a></li>
|
|
|
+ <li class="dropdown">
|
|
|
+ <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#">特点 <span class="caret"></span></a>
|
|
|
+ <ul class="dropdown-menu">
|
|
|
+ <li class="dropdown-header">Popular</li>
|
|
|
+ <li><a href="#tab-chrome">Chrome</a></li>
|
|
|
+ <li><a href="#tab-firefox">Firefox</a></li>
|
|
|
+ <li role="separator" class="divider"></li>
|
|
|
+ <li class="dropdown-header">Others</li>
|
|
|
+ <li><a href="#tab-safari">Safari</a></li>
|
|
|
+ <li><a href="#tab-opera">Opera</a></li>
|
|
|
+ <li><a href="#tab-ie">IE</a></li>
|
|
|
+ </ul>
|
|
|
+ </li>
|
|
|
+ <li><a href="#" data-toggle="modal" data-target="#modal-about">关于</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+
|
|
|
+ <!-- Slide -->
|
|
|
+ <div id="carousel-generic" class="carousel slide" data-ride="carousel">
|
|
|
+ <!-- Indicators -->
|
|
|
+ <ol class="carousel-indicators">
|
|
|
+ <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
|
|
|
+ <li data-target="#carousel-generic" data-slide-to="1"></li>
|
|
|
+ <li data-target="#carousel-generic" data-slide-to="2"></li>
|
|
|
+ <li data-target="#carousel-generic" data-slide-to="3"></li>
|
|
|
+ <li data-target="#carousel-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="Chrome">
|
|
|
+ <div class="carousel-caption">
|
|
|
+ <h3>Chrome</h3>
|
|
|
+ <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
|
|
|
+ <p><a class="btn btn-lg btn-primary" href="#">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <img src="images/firefox-big.jpg" alt="Firefox">
|
|
|
+ <div class="carousel-caption">
|
|
|
+ <h3>Firefox</h3>
|
|
|
+ <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
|
|
|
+ <p><a class="btn btn-lg btn-primary" href="#">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <img src="images/safari-big.jpg" alt="Safari">
|
|
|
+ <div class="carousel-caption">
|
|
|
+ <h3>Safari</h3>
|
|
|
+ <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
|
|
|
+ <p><a class="btn btn-lg btn-primary" href="#">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <img src="images/opera-big.jpg" alt="Opera">
|
|
|
+ <div class="carousel-caption">
|
|
|
+ <h3>Opera</h3>
|
|
|
+ <p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
|
|
|
+ <p><a class="btn btn-lg btn-primary" href="#">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <img src="images/ie-big.jpg" alt="Safari">
|
|
|
+ <div class="carousel-caption">
|
|
|
+ <h3>IE</h3>
|
|
|
+ <p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
|
|
|
+ <p><a class="btn btn-lg btn-primary" href="#">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Controls -->
|
|
|
+ <a class="left carousel-control" href="#carousel-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-generic" role="button" data-slide="next">
|
|
|
+ <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
|
|
|
+ <span class="sr-only">Next</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 3 grid -->
|
|
|
+ <div class="container" id="summary">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col-md-4">
|
|
|
+ <img src="images/chrome-logo-small.jpg" alt="chrome">
|
|
|
+ <h2>Chrome</h2>
|
|
|
+ <p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
|
|
|
+ <p><a href="#" class="btn btn-primary">Download</a></p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4">
|
|
|
+ <img src="images/firefox-logo-small.jpg" alt="firefox">
|
|
|
+ <h2>Firefox</h2>
|
|
|
+ <p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
|
|
|
+ <p><a href="#" class="btn btn-primary">Download</a></p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-4">
|
|
|
+ <img src="images/safari-logo-small.jpg" alt="safari">
|
|
|
+ <h2>Safari</h2>
|
|
|
+ <p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
|
|
|
+ <p><a href="#" class="btn btn-primary">Download</a></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr class="feature-divider">
|
|
|
+
|
|
|
+ <!-- Tabs -->
|
|
|
+ <ul class="nav nav-tabs" role="tablist" id="tablist-1">
|
|
|
+ <li role="presentation" class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>
|
|
|
+ <li role="presentation"><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>
|
|
|
+ <li role="presentation"><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>
|
|
|
+ <li role="presentation"><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>
|
|
|
+ <li role="presentation"><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <!-- Tab panes -->
|
|
|
+ <div class="tab-content">
|
|
|
+ <div class="tab-pane active" id="tab-chrome">
|
|
|
+ <div class="row feature">
|
|
|
+ <div class="col-md-7">
|
|
|
+ <h1 class="feature-heading">Chrome <span class="text-muted">使用最广的浏览器</span></h1>
|
|
|
+ <p class="lead">Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。 该浏览器是基于其他开源软件所撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。</p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-5">
|
|
|
+ <img class="img-responsive" src="images/chrome-logo.jpg" alt="chrome">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="tab-firefox">
|
|
|
+ <div class="row feature">
|
|
|
+ <div class="col-md-5">
|
|
|
+ <img class="img-responsive" src="images/firefox-logo.jpg" alt="firefox">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <h1 class="feature-heading">Firefox <span class="text-muted">火狐</span></h1>
|
|
|
+ <p class="lead">Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器， 使用Gecko引擎（非ie内核），支持多种操作系统如Windows、Mac和linux。</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="tab-safari">
|
|
|
+ <div class="row feature">
|
|
|
+ <div class="col-md-7">
|
|
|
+ <h1 class="feature-heading">Safari <span class="text-muted">Mac用户首选</span></h1>
|
|
|
+ <p class="lead">Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。 Safari在2003年1月7日首度发行测试版，并成为Mac OS X v10.3与之后的默认浏览器，也是iPhone与IPAD和iPod touch的指定浏览器。</p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-5">
|
|
|
+ <img class="img-responsive" src="images/safari-logo.jpg" alt="safari">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="tab-opera">
|
|
|
+ <div class="row feature">
|
|
|
+ <div class="col-md-5">
|
|
|
+ <img class="img-responsive" src="images/opera-logo.jpg" alt="opera">
|
|
|
+ </div>
|
|
|
+ <div class="col-md-7">
|
|
|
+ <h1 class="feature-heading">Opera <span class="text-muted">小众但易用</span></h1>
|
|
|
+ <p class="lead">Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="tab-pane" id="tab-ie">
|
|
|
+ <div class="row feature">
|
|
|
+ <div class="col-md-7">
|
|
|
+ <h1 class="feature-heading">IE <span class="text-muted">你懂的</span></h1>
|
|
|
+ <p class="lead">Internet Explorer，原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7，8，9，10版本)， 简称IE，是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
|
|
|
+ </div>
|
|
|
+ <div class="col-md-5">
|
|
|
+ <img class="img-responsive" src="images/ie-logo.jpg" alt="ie">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr class="feature-divider">
|
|
|
+
|
|
|
+ <footer>
|
|
|
+ <p class="pull-right"><a href="#top">Top</a></p>
|
|
|
+ <p>2014 Miles</p>
|
|
|
+ </footer>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Modal -->
|
|
|
+ <div class="modal fade" id="modal-about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
|
|
+ <div class="modal-dialog" role="document">
|
|
|
+ <div class="modal-content">
|
|
|
+ <div class="modal-header">
|
|
|
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
|
|
+ <h4 class="modal-title" id="myModalLabel">关于</h4>
|
|
|
+ </div>
|
|
|
+ <div class="modal-body">
|
|
|
+ <p class="lead">This is a bootstrap demo made by Mp.
|
|
|
+ Hope you enjoy it.</p>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
|
|
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
|
|
|
+ <!-- Latest compiled and minified JavaScript -->
|
|
|
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
|
|
|
+ <!-- Custom js -->
|
|
|
+ <script src="main.js"></script>
|
|
|
+ </body>
|
|
|
+</html>
|
