rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Code Issues Actions Packages Releases Activity
d8a5147c38
Bootstrap/docs/4.0/examples/carousel/index.html

185 lines
9.6 KiB
HTML
Raw Normal View History

Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Add shrink-to-fit viewport directive Fixes potential problems with iOS9's new viewport behavior - see for instance https://forums.developer.apple.com/thread/13510
2015-10-06 13:35:39 +02:00
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<meta name="description" content="">
<meta name="author" content="">
fix location of favicons so it loads when viewing the examples. This is the only one I found in the project, so I am assuming it is the right one to point to (#22895)
2017-07-16 15:19:20 +02:00
<link rel="icon" href="../../../../favicon.ico">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
change file names to example names
2013-07-21 08:17:01 +02:00
<title>Carousel Template for Bootstrap</title>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<!-- Bootstrap core CSS -->
more examples path fixing
2017-05-29 20:55:36 +02:00
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<!-- Custom styles for this template -->
add git ignore
2013-07-21 08:30:08 +02:00
<link href="carousel.css" rel="stylesheet">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</head>
<body>
update navbars to rename .navbar-inverse to .navbar-dark, update all navbar examples and variables
2017-06-26 03:29:43 +02:00
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
more docs updates
2017-03-21 07:13:34 +01:00
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
put new toggler markup to use
2016-12-22 07:11:04 +01:00
<span class="navbar-toggler-icon"></span>
</button>
fix carousel navbar
2016-12-22 05:54:00 +01:00
<div class="collapse navbar-collapse" id="navbarCollapse">
update all examples
2016-12-29 02:25:00 +01:00
<ul class="navbar-nav mr-auto">
fix carousel navbar
2016-12-22 05:54:00 +01:00
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
unify alignment of all these dang navbar forms
2016-12-23 08:04:02 +01:00
<form class="form-inline mt-2 mt-md-0">
Add explicit aria-label to placeholder-only inputs While `placeholder` is nominally valid per spec http://rawgit.com/w3c/html-api-map/master/index.html#accessible-name-and-description-calculation it is inelegant, a fallback, and not supported in ios/safari/voiceover and android/chrome/talkback, to name a few combinations `aria-describedby` is also not really the right tool for providing a name/label equivalent, so remove that from the list of possible alternative methods / clarify how it can be used
2017-03-30 23:45:36 +02:00
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
unify alignment of all these dang navbar forms
2016-12-23 08:04:02 +01:00
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
fix carousel navbar
2016-12-22 05:54:00 +01:00
</form>
</div>
new look for carousel example, convert to rems
2014-12-04 23:18:13 +01:00
</nav>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
use data-ride="carousel" in the docs & examples; fixes #11005
2013-10-10 04:29:25 +02:00
<div id="myCarousel" class="carousel slide" data-ride="carousel">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
Remove inappropriate role="listbox" from carousels
2017-04-11 12:12:30 +02:00
<div class="carousel-inner">
rename .item => .carousel-item
2014-12-18 03:30:16 +01:00
<div class="carousel-item active">
keep the base64
2015-01-22 06:06:11 +01:00
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<div class="container">
Remove the unneeded `d-block` from `.carousel-item`s. (#23472)
2017-08-17 11:11:31 +02:00
<div class="carousel-caption text-left">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h1>Example headline.</h1>
remove more Glyphicon references from the docs
2015-01-09 21:00:10 +01:00
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
Updated the old btn-large in carousel example
2013-09-11 01:34:56 +02:00
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
</div>
</div>
rename .item => .carousel-item
2014-12-18 03:30:16 +01:00
<div class="carousel-item">
keep the base64
2015-01-22 06:06:11 +01:00
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<div class="container">
Remove the unneeded `d-block` from `.carousel-item`s. (#23472)
2017-08-17 11:11:31 +02:00
<div class="carousel-caption">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
Updated the old btn-large in carousel example
2013-09-11 01:34:56 +02:00
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
</div>
</div>
rename .item => .carousel-item
2014-12-18 03:30:16 +01:00
<div class="carousel-item">
keep the base64
2015-01-22 06:06:11 +01:00
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<div class="container">
Remove the unneeded `d-block` from `.carousel-item`s. (#23472)
2017-08-17 11:11:31 +02:00
<div class="carousel-caption text-right">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
Updated the old btn-large in carousel example
2013-09-11 01:34:56 +02:00
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
</div>
</div>
</div>
drop the .carousel-control base class
2016-12-05 08:19:54 +01:00
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
redo the carousel example to match
2016-12-05 07:18:49 +01:00
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
Add screenreader text to prev/next carousel buttons in examples to improve accessibility Refs #13556. Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#carousel Credit: https://github.com/paypal/bootstrap-accessibility-plugin [skip sauce]
2014-07-08 05:04:22 +02:00
<span class="sr-only">Previous</span>
</a>
drop the .carousel-control base class
2016-12-05 08:19:54 +01:00
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
redo the carousel example to match
2016-12-05 07:18:49 +01:00
<span class="carousel-control-next-icon" aria-hidden="true"></span>
Add screenreader text to prev/next carousel buttons in examples to improve accessibility Refs #13556. Per https://github.com/paypal/bootstrap-accessibility-plugin/blob/master/README.md#carousel Credit: https://github.com/paypal/bootstrap-accessibility-plugin [skip sauce]
2014-07-08 05:04:22 +02:00
<span class="sr-only">Next</span>
</a>
redo the carousel example to match
2016-12-05 07:18:49 +01:00
</div>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div class="row">
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-lg-4">
replace img-circle by rounded-circle css class
2016-11-03 05:00:29 +01:00
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h2>Heading</h2>
<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
.btn-default to .btn-secondary
2014-07-09 02:14:14 +02:00
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div><!-- /.col-lg-4 -->
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-lg-4">
replace img-circle by rounded-circle css class
2016-11-03 05:00:29 +01:00
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h2>Heading</h2>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
.btn-default to .btn-secondary
2014-07-09 02:14:14 +02:00
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div><!-- /.col-lg-4 -->
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-lg-4">
replace img-circle by rounded-circle css class
2016-11-03 05:00:29 +01:00
<img class="rounded-circle" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="140" height="140">
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
.btn-default to .btn-secondary
2014-07-09 02:14:14 +02:00
<p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<!-- START THE FEATURETTES -->
<hr class="featurette-divider">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<div class="row featurette">
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-md-7">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<h2 class="featurette-heading">First featurette heading. <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>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-md-5">
v4: Fix outdated utilites classes
2016-10-12 00:46:10 +02:00
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
</div>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
<hr class="featurette-divider">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<div class="row featurette">
Update docs and carousel example for `order-`.
2017-07-20 16:58:26 +02:00
<div class="col-md-7 order-md-2">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<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>
Update docs and carousel example for `order-`.
2017-07-20 16:58:26 +02:00
<div class="col-md-5 order-md-1">
v4: Fix outdated utilites classes
2016-10-12 00:46:10 +02:00
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
Fix image order in carousel example When the screen is shrunk below the md threshold, all the featurette columns stack. However, since the second featurette is "backwards", when stacked the second featurette looked awkward as the image came before the heading.
2015-01-23 11:14:12 +01:00
</div>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
<hr class="featurette-divider">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<div class="row featurette">
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-md-7">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
<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>
flip things around again, no more base class, try out some new stuff to keep responsive flex grid working
2016-02-06 19:51:59 +01:00
<div class="col-md-5">
v4: Fix outdated utilites classes
2016-10-12 00:46:10 +02:00
<img class="featurette-image img-fluid mx-auto" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
basic cleanup on carousel example (fixes #9709 and #9700)
2013-08-16 22:50:17 +02:00
</div>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</div>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
Rename `.navbar-toggleable-xs` to `.navbar-toggleable` + more cleanup (#21226) * Clean up some utilities - Align CSS properties - In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies * Remove '-xs' from `.navbar-toggleable-xs` and remove duplication * Fix outdated classes to use newer ones
2016-11-28 07:23:12 +01:00
<p class="float-right"><a href="#">Back to top</a></p>
Update more copyright years to 2017 (#21491) * Update ie10-viewport-bug-workaround.js year * Update narrow-jumbotron copyright year to 2017 * Update carousel/index.html copyright year to 2017 * Update browsers-devices.md copyright year to 2017 * Update change-version.js copyright year to 2017
2017-01-01 21:02:41 +01:00
<p>&copy; 2017 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</footer>
</div><!-- /.container -->
fix up carousel holder and navbar probs
2013-07-27 05:48:10 +02:00
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
bump to jquery 3.2.1
2017-03-21 07:04:14 +01:00
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
more examples path fixing
2017-05-29 20:55:36 +02:00
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery.min.js"><\/script>')</script>
Update Popper.js 1.10.1
2017-06-14 21:00:01 +02:00
<script src="../../../../assets/js/vendor/popper.min.js"></script>
more examples path fixing
2017-05-29 20:55:36 +02:00
<script src="../../../../dist/js/bootstrap.min.js"></script>
Use just holder.js instead of docs.min.js in examples when possible And add explanatory comments to the Carousel & Dashboard examples regarding holder.js [skip sauce]
2015-02-08 02:59:19 +01:00
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
more examples path fixing
2017-05-29 20:55:36 +02:00
<script src="../../../../assets/js/vendor/holder.min.js"></script>
Update remaining templates to match starter template
2013-06-24 02:17:08 +02:00
</body>
fix up carousel holder and navbar probs
2013-07-27 05:48:10 +02:00
</html>
Reference in New Issue Copy Permalink