9 years ago · 789a519f50
--- a/chapter4/10carousel.html
+++ b/chapter4/10carousel.html
@@ -0,0 +1,77 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <title>Blasting off with Bootstrap</title>
			
 
				+  <meta charset="utf-8"/>
			
 
				+  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
			
 
				+  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
			
 
				+  <!--[if lt IE 9]>
			
 
				+  <script src="../js/html5shiv.3-7-0.js"></script>
			
 
				+  <script src="../js/respond.1-4-2.min.js"></script>
			
 
				+  <![endif]-->
			
 
				+
			
 
				+  <style type="text/css">
			
 
				+    img {
			
 
				+      width: 100%;
			
 
				+      height: 50vh !important;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+<div class="container">
			
 
				+  <div id="bestCarsCarousel" class="carousel slide" data-ride="carousel">
			
 
				+    <!-- Indicators -->
			
 
				+    <ol class="carousel-indicators">
			
 
				+      <li data-target="#bestCarsCarousel" data-slide-to="0" class="active"></li>
			
 
				+      <li data-target="#bestCarsCarousel" data-slide-to="1"></li>
			
 
				+      <li data-target="#bestCarsCarousel" data-slide-to="2"></li>
			
 
				+    </ol>
			
 
				+
			
 
				+    <!-- Wrapper for slides -->
			
 
				+    <div class="carousel-inner">
			
 
				+      <div class="item active">
			
 
				+        <img src="images/car1.jpg" />
			
 
				+        <div class="carousel-caption">
			
 
				+          <h3>Concept-car Alfa-Romeo</h3>
			
 
				+          <p>Lorem ipsum dolor sic amet, consectetur ...</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="item">
			
 
				+        <img src="images/car2.jpg"/>
			
 
				+        <div class="carousel-caption">
			
 
				+          <h3>Concept-car Honda</h3>
			
 
				+          <p>Lorem ipsum dolor sic amet, consectetur ...</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div class="item">
			
 
				+        <img src="images/car3.jpg" />
			
 
				+        <div class="carousel-caption">
			
 
				+          <h3>Concept-car Chrysler BMW</h3>
			
 
				+          <p>Loorem ipsum dolor sic amet, consectetur ...</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <!-- Controls -->
			
 
				+      <a href="#bestCarsCarousel" class="left carousel-control" data-slide="prev">
			
 
				+        <span class="glyphicon glyphicon-chevron-left"></span>
			
 
				+      </a>
			
 
				+      <a href="#bestCarsCarousel" class="right carousel-control" data-slide="next">
			
 
				+        <span class="glyphicon glyphicon-chevron-right"></span>
			
 
				+      </a>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</div>
			
 
				+
			
 
				+
			
 
				+<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
			
 
				+<script src="../js/jquery-1.11.2.min.js"></script>
			
 
				+<script src="../js/bootstrap.js"></script>
			
 
				+
			
 
				+<script type="text/javascript">
			
 
				+</script>
			
 
				+</body>
			
 
				+</html>
			
--- a/chapter4/images/car1.jpg
+++ b/chapter4/images/car1.jpg
--- a/chapter4/images/car2.jpg
+++ b/chapter4/images/car2.jpg
--- a/chapter4/images/car3.jpg
+++ b/chapter4/images/car3.jpg