mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-21 13:52:17 +01:00
0e920ce3f4
With the current docs directory setup, I'm making too many mistakes and have to manually address path changes and directory moves on deploy. This makes for a frustrating experience developing locally and shipping releases. With this PR, we're basically back to the same setup from v3—duplicating the dist directory into our docs directory. Not the most ideal, but very straightforward for me as the release manager.
179 lines
9.0 KiB
HTML
179 lines
9.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
<link rel="icon" href="../../../../favicon.ico">
|
|
|
|
<title>Product example for Bootstrap</title>
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="product.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="site-header sticky-top py-1">
|
|
<div class="container d-flex flex-column flex-md-row justify-content-between">
|
|
<a class="py-2" href="#">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
|
|
</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Product</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Features</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Support</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
|
|
<a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
|
|
<div class="col-md-5 p-lg-5 mx-auto my-5">
|
|
<h1 class="display-4 font-weight-normal">Punny headline</h1>
|
|
<p class="lead font-weight-normal">And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple's marketing pages.</p>
|
|
<a class="btn btn-outline-secondary" href="#">Coming soon</a>
|
|
</div>
|
|
<div class="product-device box-shadow d-none d-md-block"></div>
|
|
<div class="product-device product-device-2 box-shadow d-none d-md-block"></div>
|
|
</div>
|
|
|
|
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
|
<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
|
|
<div class="my-3 py-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 p-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 p-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-dark box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
<div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
|
|
<div class="my-3 py-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-light box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 p-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 py-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 p-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
|
|
<div class="my-3 py-3">
|
|
<h2 class="display-5">Another headline</h2>
|
|
<p class="lead">And an even wittier subheading.</p>
|
|
</div>
|
|
<div class="bg-white box-shadow mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="container py-5">
|
|
<div class="row">
|
|
<div class="col-12 col-md">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mb-2"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
|
|
<small class="d-block mb-3 text-muted">© 2017-2018</small>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>Features</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="text-muted" href="#">Cool stuff</a></li>
|
|
<li><a class="text-muted" href="#">Random feature</a></li>
|
|
<li><a class="text-muted" href="#">Team feature</a></li>
|
|
<li><a class="text-muted" href="#">Stuff for developers</a></li>
|
|
<li><a class="text-muted" href="#">Another one</a></li>
|
|
<li><a class="text-muted" href="#">Last time</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>Resources</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="text-muted" href="#">Resource</a></li>
|
|
<li><a class="text-muted" href="#">Resource name</a></li>
|
|
<li><a class="text-muted" href="#">Another resource</a></li>
|
|
<li><a class="text-muted" href="#">Final resource</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>Resources</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="text-muted" href="#">Business</a></li>
|
|
<li><a class="text-muted" href="#">Education</a></li>
|
|
<li><a class="text-muted" href="#">Government</a></li>
|
|
<li><a class="text-muted" href="#">Gaming</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-6 col-md">
|
|
<h5>About</h5>
|
|
<ul class="list-unstyled text-small">
|
|
<li><a class="text-muted" href="#">Team</a></li>
|
|
<li><a class="text-muted" href="#">Locations</a></li>
|
|
<li><a class="text-muted" href="#">Privacy</a></li>
|
|
<li><a class="text-muted" href="#">Terms</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<!-- Bootstrap core JavaScript
|
|
================================================== -->
|
|
<!-- Placed at the end of the document so the pages load faster -->
|
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
|
<script src="../../assets/js/vendor/popper.min.js"></script>
|
|
<script src="../../dist/js/bootstrap.min.js"></script>
|
|
<script src="../../assets/js/vendor/holder.min.js"></script>
|
|
<script>
|
|
Holder.addTheme('thumb', {
|
|
bg: '#55595c',
|
|
fg: '#eceeef',
|
|
text: 'Thumbnail'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|