`

Bootstrap旋转木马

阅读更多
carousel-finish.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转木马</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"
	type="text/css">
<!--[if lt IE 9]>
      <script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
  <h1 class="page-header">旋转木马</h1>
  
  <div id="carousel1" class="carousel slide">
  	<div class="carousel-inner">
      <div class="item active">
	      <img src="http://placehold.it/940x360/C24704/FFFFFF&text=Wordpress" alt="">
	      <div class="carousel-caption">
	      	<h4>标题一</h4>          
	      	<p>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
	      </div>
      </div>
	  
      <div class="item">
	      <img src="http://placehold.it/940x360/FFEB79&text=Joomla" alt="">
	      <div class="carousel-caption">
		      <h4>标题二</h4>
		      <p> Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
		  </div>
      </div>
	  
      <div class="item">
	      <img src="http://placehold.it/940x360/A0E0A9/FFFFFF&text=Drupal" alt="">
	      <div class="carousel-caption">
	      	<h4>标题三</h4>
	      	<p>Egestas eget quam. Donec id elit non mi porta gravida at eget metus. </p>
	      </div>
	      </div>
    </div>
    <a href="#carousel1" data-slide="prev" class="left carousel-control">‹</a>
    <a href="#carousel1" data-slide="next" class="right carousel-control">›</a>
   </div>

  
</div>

<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics