miles
/
notes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256
							<!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">&times;</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>