rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Fix image paths and carousel controls for carousel example

Browse Source
This commit is contained in:
Robert Burns 2013-03-31 21:25:45 -04:00
parent 4c49458336
commit d299ff4fce
1 changed files with 19 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/examples/carousel.html
View File

@ -55,12 +55,6 @@ body {
padding: 15px 20px;
}
/* Offset the responsive button for proper vertical alignment */
.navbar .navbar-toggle {
margin-top: 10px;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
@ -75,16 +69,6 @@ body {
z-index: 9;
}
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
z-index: 10;
}
.carousel .item {
height: 500px;
}
@ -252,25 +236,21 @@ body {
<!-- NAVBAR
================================================== -->
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">Project name</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
@ -284,13 +264,12 @@ body {
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
</div>
</div>
</div>
</div>
</div>
<!-- Carousel
@ -298,7 +277,7 @@ body {
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="../assets/img/examples/slide-01.jpg" alt="">
<img src="../../assets/img/examples/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
@ -308,7 +287,7 @@ body {
</div>
</div>
<div class="item">
<img src="../assets/img/examples/slide-02.jpg" alt="">
<img src="../../assets/img/examples/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
@ -318,7 +297,7 @@ body {
</div>
</div>
<div class="item">
<img src="../assets/img/examples/slide-03.jpg" alt="">
<img src="../../assets/img/examples/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
@ -328,8 +307,8 @@ body {
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div><!-- /.carousel -->
@ -368,7 +347,7 @@ body {
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
<img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-chrome.png">
<h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
@ -376,7 +355,7 @@ body {
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
<img class="featurette-image pull-left" src="../../assets/img/examples/browser-icon-firefox.png">
<h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
@ -384,7 +363,7 @@ body {
<hr class="featurette-divider">
<div class="featurette">
<img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
<img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-safari.png">
<h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>