mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-14 01:24:19 +02:00
update to 4.2.1
This commit is contained in:
Mark Otto
33
docs/4.2/examples/album/album.css
Normal file
33
docs/4.2/examples/album/album.css
Normal file
@@ -0,0 +1,33 @@
|
||||
.jumbotron {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
margin-bottom: 0;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.jumbotron {
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.jumbotron-heading {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.jumbotron .container {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
234
docs/4.2/examples/album/index.html
Normal file
234
docs/4.2/examples/album/index.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Album example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="album.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="collapse bg-dark" id="navbarHeader">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-8 col-md-7 py-4">
|
||||
<h4 class="text-white">About</h4>
|
||||
<p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
|
||||
</div>
|
||||
<div class="col-sm-4 offset-md-1 py-4">
|
||||
<h4 class="text-white">Contact</h4>
|
||||
<ul class="list-unstyled">
|
||||
<li><a href="#" class="text-white">Follow on Twitter</a></li>
|
||||
<li><a href="#" class="text-white">Like on Facebook</a></li>
|
||||
<li><a href="#" class="text-white">Email me</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar navbar-dark bg-dark shadow-sm">
|
||||
<div class="container d-flex justify-content-between">
|
||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2" focusable="false" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
|
||||
<strong>Album</strong>
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
|
||||
<section class="jumbotron text-center">
|
||||
<div class="container">
|
||||
<h1 class="jumbotron-heading">Album example</h1>
|
||||
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
|
||||
<p>
|
||||
<a href="#" class="btn btn-primary my-2">Main call to action</a>
|
||||
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
<div class="card-body">
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
|
||||
</div>
|
||||
<small class="text-muted">9 mins</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="text-muted">
|
||||
<div class="container">
|
||||
<p class="float-right">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
<p>Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
||||
<p>New to Bootstrap? <a href="https://getbootstrap.com">Visit the homepage</a> or read our <a href="/docs/4.2/getting-started/introduction/">getting started guide</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
125
docs/4.2/examples/blog/blog.css
Normal file
125
docs/4.2/examples/blog/blog.css
Normal file
@@ -0,0 +1,125 @@
|
||||
/* stylelint-disable selector-list-comma-newline-after */
|
||||
|
||||
.blog-header {
|
||||
line-height: 1;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
.blog-header-logo {
|
||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
.blog-header-logo:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.display-4 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.display-4 {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-scroller .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.card-img-right {
|
||||
height: 100%;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.h-250 { height: 250px; }
|
||||
@media (min-width: 768px) {
|
||||
.h-md-250 { height: 250px; }
|
||||
}
|
||||
|
||||
/*
|
||||
* Blog name and description
|
||||
*/
|
||||
.blog-title {
|
||||
margin-bottom: 0;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
.blog-description {
|
||||
font-size: 1.1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@media (min-width: 40em) {
|
||||
.blog-title {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination */
|
||||
.blog-pagination {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-pagination > .btn {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Blog posts
|
||||
*/
|
||||
.blog-post {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.blog-post-title {
|
||||
margin-bottom: .25rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.blog-post-meta {
|
||||
margin-bottom: 1.25rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
.blog-footer {
|
||||
padding: 2.5rem 0;
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
border-top: .05rem solid #e5e5e5;
|
||||
}
|
||||
.blog-footer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
227
docs/4.2/examples/blog/index.html
Normal file
227
docs/4.2/examples/blog/index.html
Normal file
@@ -0,0 +1,227 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Blog Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900" rel="stylesheet">
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="blog.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header class="blog-header py-3">
|
||||
<div class="row flex-nowrap justify-content-between align-items-center">
|
||||
<div class="col-4 pt-1">
|
||||
<a class="text-muted" href="#">Subscribe</a>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<a class="blog-header-logo text-dark" href="#">Large</a>
|
||||
</div>
|
||||
<div class="col-4 d-flex justify-content-end align-items-center">
|
||||
<a class="text-muted" href="#">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3" focusable="false" role="img"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
|
||||
</a>
|
||||
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="nav-scroller py-1 mb-2">
|
||||
<nav class="nav d-flex justify-content-between">
|
||||
<a class="p-2 text-muted" href="#">World</a>
|
||||
<a class="p-2 text-muted" href="#">U.S.</a>
|
||||
<a class="p-2 text-muted" href="#">Technology</a>
|
||||
<a class="p-2 text-muted" href="#">Design</a>
|
||||
<a class="p-2 text-muted" href="#">Culture</a>
|
||||
<a class="p-2 text-muted" href="#">Business</a>
|
||||
<a class="p-2 text-muted" href="#">Politics</a>
|
||||
<a class="p-2 text-muted" href="#">Opinion</a>
|
||||
<a class="p-2 text-muted" href="#">Science</a>
|
||||
<a class="p-2 text-muted" href="#">Health</a>
|
||||
<a class="p-2 text-muted" href="#">Style</a>
|
||||
<a class="p-2 text-muted" href="#">Travel</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="jumbotron p-3 p-md-5 text-white rounded bg-dark">
|
||||
<div class="col-md-6 px-0">
|
||||
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
|
||||
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and efficiently about what’s most interesting in this post’s contents.</p>
|
||||
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue reading...</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-2">
|
||||
<div class="col-md-6">
|
||||
<div class="card flex-md-row mb-4 shadow-sm h-md-250">
|
||||
<div class="card-body d-flex flex-column align-items-start">
|
||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
||||
<h3 class="mb-0">
|
||||
<a class="text-dark" href="#">Featured post</a>
|
||||
</h3>
|
||||
<div class="mb-1 text-muted">Nov 12</div>
|
||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#">Continue reading</a>
|
||||
</div>
|
||||
<svg class="bd-placeholder-img card-img-right flex-auto d-none d-lg-block" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card flex-md-row mb-4 shadow-sm h-md-250">
|
||||
<div class="card-body d-flex flex-column align-items-start">
|
||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
||||
<h3 class="mb-0">
|
||||
<a class="text-dark" href="#">Post title</a>
|
||||
</h3>
|
||||
<div class="mb-1 text-muted">Nov 11</div>
|
||||
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#">Continue reading</a>
|
||||
</div>
|
||||
<svg class="bd-placeholder-img card-img-right flex-auto d-none d-lg-block" width="200" height="250" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect fill="#55595c" width="100%" height="100%"/><text fill="#eceeef" dy=".3em" x="50%" y="50%">Thumbnail</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main role="main" class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 blog-main">
|
||||
<h3 class="pb-3 mb-4 font-italic border-bottom">
|
||||
From the Firehose
|
||||
</h3>
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Sample blog post</h2>
|
||||
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
|
||||
|
||||
<p>This blog post shows a few different types of content that’s supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
|
||||
<hr>
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<h2>Heading</h2>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
<pre><code>Example code block</code></pre>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
|
||||
<h3>Sub-heading</h3>
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
<ol>
|
||||
<li>Vestibulum id ligula porta felis euismod semper.</li>
|
||||
<li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
|
||||
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
|
||||
</ol>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">Another blog post</h2>
|
||||
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>
|
||||
<blockquote>
|
||||
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||||
</blockquote>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<div class="blog-post">
|
||||
<h2 class="blog-post-title">New feature</h2>
|
||||
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>
|
||||
|
||||
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
|
||||
<ul>
|
||||
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
|
||||
<li>Donec id elit non mi porta gravida at eget metus.</li>
|
||||
<li>Nulla vitae elit libero, a pharetra augue.</li>
|
||||
</ul>
|
||||
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.</p>
|
||||
</div><!-- /.blog-post -->
|
||||
|
||||
<nav class="blog-pagination">
|
||||
<a class="btn btn-outline-primary" href="#">Older</a>
|
||||
<a class="btn btn-outline-secondary disabled" href="#">Newer</a>
|
||||
</nav>
|
||||
|
||||
</div><!-- /.blog-main -->
|
||||
|
||||
<aside class="col-md-4 blog-sidebar">
|
||||
<div class="p-3 mb-3 bg-light rounded">
|
||||
<h4 class="font-italic">About</h4>
|
||||
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<h4 class="font-italic">Archives</h4>
|
||||
<ol class="list-unstyled mb-0">
|
||||
<li><a href="#">March 2014</a></li>
|
||||
<li><a href="#">February 2014</a></li>
|
||||
<li><a href="#">January 2014</a></li>
|
||||
<li><a href="#">December 2013</a></li>
|
||||
<li><a href="#">November 2013</a></li>
|
||||
<li><a href="#">October 2013</a></li>
|
||||
<li><a href="#">September 2013</a></li>
|
||||
<li><a href="#">August 2013</a></li>
|
||||
<li><a href="#">July 2013</a></li>
|
||||
<li><a href="#">June 2013</a></li>
|
||||
<li><a href="#">May 2013</a></li>
|
||||
<li><a href="#">April 2013</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<h4 class="font-italic">Elsewhere</h4>
|
||||
<ol class="list-unstyled">
|
||||
<li><a href="#">GitHub</a></li>
|
||||
<li><a href="#">Twitter</a></li>
|
||||
<li><a href="#">Facebook</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</aside><!-- /.blog-sidebar -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
|
||||
</main><!-- /.container -->
|
||||
|
||||
<footer class="blog-footer">
|
||||
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
<p>
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
</footer>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
90
docs/4.2/examples/carousel/carousel.css
Normal file
90
docs/4.2/examples/carousel/carousel.css
Normal file
@@ -0,0 +1,90 @@
|
||||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
/* Padding below the footer and lighter body text */
|
||||
|
||||
body {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
|
||||
/* CUSTOMIZE THE CAROUSEL
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Carousel base class */
|
||||
.carousel {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
/* Since positioning the image, we need to help out the caption */
|
||||
.carousel-caption {
|
||||
bottom: 3rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Declare heights because of positioning of img element */
|
||||
.carousel-item {
|
||||
height: 32rem;
|
||||
}
|
||||
.carousel-item > img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
height: 32rem;
|
||||
}
|
||||
|
||||
|
||||
/* MARKETING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
||||
/* Center align the text within the three columns below the carousel */
|
||||
.marketing .col-lg-4 {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.marketing h2 {
|
||||
font-weight: 400;
|
||||
}
|
||||
.marketing .col-lg-4 p {
|
||||
margin-right: .75rem;
|
||||
margin-left: .75rem;
|
||||
}
|
||||
|
||||
|
||||
/* Featurettes
|
||||
------------------------- */
|
||||
|
||||
.featurette-divider {
|
||||
margin: 5rem 0; /* Space out the Bootstrap <hr> more */
|
||||
}
|
||||
|
||||
/* Thin out the marketing headings */
|
||||
.featurette-heading {
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
letter-spacing: -.05rem;
|
||||
}
|
||||
|
||||
|
||||
/* RESPONSIVE CSS
|
||||
-------------------------------------------------- */
|
||||
|
||||
@media (min-width: 40em) {
|
||||
/* Bump up size of carousel content */
|
||||
.carousel-caption p {
|
||||
margin-bottom: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.featurette-heading {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.featurette-heading {
|
||||
margin-top: 7rem;
|
||||
}
|
||||
}
|
||||
190
docs/4.2/examples/carousel/index.html
Normal file
190
docs/4.2/examples/carousel/index.html
Normal file
@@ -0,0 +1,190 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Carousel Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="carousel.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main role="main">
|
||||
|
||||
<div id="myCarousel" class="carousel slide" data-ride="carousel">
|
||||
<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>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-left">
|
||||
<h1>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>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption">
|
||||
<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>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" ><rect fill="#777" width="100%" height="100%"/></svg>
|
||||
<div class="container">
|
||||
<div class="carousel-caption text-right">
|
||||
<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>
|
||||
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<div class="col-lg-4">
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
|
||||
<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>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
|
||||
<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>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
<div class="col-lg-4">
|
||||
<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 140x140"><title>Placeholder</title><rect fill="#777" width="100%" height="100%"/><text fill="#777" dy=".3em" x="50%" y="50%">140x140</text></svg>
|
||||
<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>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!-- /.col-lg-4 -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<!-- START THE FEATURETTES -->
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<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>
|
||||
<div class="col-md-5">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7 order-md-2">
|
||||
<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>
|
||||
<div class="col-md-5 order-md-1">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<div class="row featurette">
|
||||
<div class="col-md-7">
|
||||
<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>
|
||||
<div class="col-md-5">
|
||||
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 500x500"><title>Placeholder</title><rect fill="#eee" width="100%" height="100%"/><text fill="#aaa" dy=".3em" x="50%" y="50%">500x500</text></svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="featurette-divider">
|
||||
|
||||
<!-- /END THE FEATURETTES -->
|
||||
|
||||
</div><!-- /.container -->
|
||||
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="container">
|
||||
<p class="float-right"><a href="#">Back to top</a></p>
|
||||
<p>© 2017-2018 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
5
docs/4.2/examples/checkout/form-validation.css
Normal file
5
docs/4.2/examples/checkout/form-validation.css
Normal file
@@ -0,0 +1,5 @@
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.lh-condensed { line-height: 1.25; }
|
||||
20
docs/4.2/examples/checkout/form-validation.js
Normal file
20
docs/4.2/examples/checkout/form-validation.js
Normal file
@@ -0,0 +1,20 @@
|
||||
// Example starter JavaScript for disabling form submissions if there are invalid fields
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
window.addEventListener('load', function () {
|
||||
// Fetch all the forms we want to apply custom Bootstrap validation styles to
|
||||
var forms = document.getElementsByClassName('needs-validation')
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.prototype.filter.call(forms, function (form) {
|
||||
form.addEventListener('submit', function (event) {
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
form.classList.add('was-validated')
|
||||
}, false)
|
||||
})
|
||||
}, false)
|
||||
}())
|
||||
249
docs/4.2/examples/checkout/index.html
Normal file
249
docs/4.2/examples/checkout/index.html
Normal file
@@ -0,0 +1,249 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Checkout example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="form-validation.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<div class="container">
|
||||
<div class="py-5 text-center">
|
||||
<img class="d-block mx-auto mb-4" src="/docs/4.2/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
|
||||
<h2>Checkout form</h2>
|
||||
<p class="lead">Below is an example form built entirely with Bootstrap’s form controls. Each required form group has a validation state that can be triggered by attempting to submit the form without completing it.</p>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4 order-md-2 mb-4">
|
||||
<h4 class="d-flex justify-content-between align-items-center mb-3">
|
||||
<span class="text-muted">Your cart</span>
|
||||
<span class="badge badge-secondary badge-pill">3</span>
|
||||
</h4>
|
||||
<ul class="list-group mb-3">
|
||||
<li class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
<div>
|
||||
<h6 class="my-0">Product name</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$12</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
<div>
|
||||
<h6 class="my-0">Second product</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$8</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between lh-condensed">
|
||||
<div>
|
||||
<h6 class="my-0">Third item</h6>
|
||||
<small class="text-muted">Brief description</small>
|
||||
</div>
|
||||
<span class="text-muted">$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between bg-light">
|
||||
<div class="text-success">
|
||||
<h6 class="my-0">Promo code</h6>
|
||||
<small>EXAMPLECODE</small>
|
||||
</div>
|
||||
<span class="text-success">-$5</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between">
|
||||
<span>Total (USD)</span>
|
||||
<strong>$20</strong>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form class="card p-2">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Promo code">
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-secondary">Redeem</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8 order-md-1">
|
||||
<h4 class="mb-3">Billing address</h4>
|
||||
<form class="needs-validation" novalidate>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="firstName">First name</label>
|
||||
<input type="text" class="form-control" id="firstName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid first name is required.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="lastName">Last name</label>
|
||||
<input type="text" class="form-control" id="lastName" placeholder="" value="" required>
|
||||
<div class="invalid-feedback">
|
||||
Valid last name is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="username">Username</label>
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">@</span>
|
||||
</div>
|
||||
<input type="text" class="form-control" id="username" placeholder="Username" required>
|
||||
<div class="invalid-feedback" style="width: 100%;">
|
||||
Your username is required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="email">Email <span class="text-muted">(Optional)</span></label>
|
||||
<input type="email" class="form-control" id="email" placeholder="you@example.com">
|
||||
<div class="invalid-feedback">
|
||||
Please enter a valid email address for shipping updates.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="address">Address</label>
|
||||
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
|
||||
<div class="invalid-feedback">
|
||||
Please enter your shipping address.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="address2">Address 2 <span class="text-muted">(Optional)</span></label>
|
||||
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5 mb-3">
|
||||
<label for="country">Country</label>
|
||||
<select class="custom-select d-block w-100" id="country" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>United States</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please select a valid country.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-3">
|
||||
<label for="state">State</label>
|
||||
<select class="custom-select d-block w-100" id="state" required>
|
||||
<option value="">Choose...</option>
|
||||
<option>California</option>
|
||||
</select>
|
||||
<div class="invalid-feedback">
|
||||
Please provide a valid state.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="zip">Zip</label>
|
||||
<input type="text" class="form-control" id="zip" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Zip code required.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="same-address">
|
||||
<label class="custom-control-label" for="same-address">Shipping address is the same as my billing address</label>
|
||||
</div>
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="save-info">
|
||||
<label class="custom-control-label" for="save-info">Save this information for next time</label>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
|
||||
<h4 class="mb-3">Payment</h4>
|
||||
|
||||
<div class="d-block my-3">
|
||||
<div class="custom-control custom-radio">
|
||||
<input id="credit" name="paymentMethod" type="radio" class="custom-control-input" checked required>
|
||||
<label class="custom-control-label" for="credit">Credit card</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input id="debit" name="paymentMethod" type="radio" class="custom-control-input" required>
|
||||
<label class="custom-control-label" for="debit">Debit card</label>
|
||||
</div>
|
||||
<div class="custom-control custom-radio">
|
||||
<input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" required>
|
||||
<label class="custom-control-label" for="paypal">PayPal</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="cc-name">Name on card</label>
|
||||
<input type="text" class="form-control" id="cc-name" placeholder="" required>
|
||||
<small class="text-muted">Full name as displayed on card</small>
|
||||
<div class="invalid-feedback">
|
||||
Name on card is required
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="cc-number">Credit card number</label>
|
||||
<input type="text" class="form-control" id="cc-number" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Credit card number is required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="cc-expiration">Expiration</label>
|
||||
<input type="text" class="form-control" id="cc-expiration" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Expiration date required
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-3">
|
||||
<label for="cc-cvv">CVV</label>
|
||||
<input type="text" class="form-control" id="cc-cvv" placeholder="" required>
|
||||
<div class="invalid-feedback">
|
||||
Security code required
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mb-4">
|
||||
<button class="btn btn-primary btn-lg btn-block" type="submit">Continue to checkout</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="my-5 pt-5 text-muted text-center text-small">
|
||||
<p class="mb-1">© 2017-2018 Company Name</p>
|
||||
<ul class="list-inline">
|
||||
<li class="list-inline-item"><a href="#">Privacy</a></li>
|
||||
<li class="list-inline-item"><a href="#">Terms</a></li>
|
||||
<li class="list-inline-item"><a href="#">Support</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</div>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
|
||||
<script src="form-validation.js"></script></body>
|
||||
</html>
|
||||
106
docs/4.2/examples/cover/cover.css
Normal file
106
docs/4.2/examples/cover/cover.css
Normal file
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
* Globals
|
||||
*/
|
||||
|
||||
/* Links */
|
||||
a,
|
||||
a:focus,
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Custom default button */
|
||||
.btn-secondary,
|
||||
.btn-secondary:hover,
|
||||
.btn-secondary:focus {
|
||||
color: #333;
|
||||
text-shadow: none; /* Prevent inheritance from `body` */
|
||||
background-color: #fff;
|
||||
border: .05rem solid #fff;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
|
||||
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
max-width: 42em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Header
|
||||
*/
|
||||
.masthead {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.masthead-brand {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link {
|
||||
padding: .25rem 0;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, .5);
|
||||
background-color: transparent;
|
||||
border-bottom: .25rem solid transparent;
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link:hover,
|
||||
.nav-masthead .nav-link:focus {
|
||||
border-bottom-color: rgba(255, 255, 255, .25);
|
||||
}
|
||||
|
||||
.nav-masthead .nav-link + .nav-link {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.nav-masthead .active {
|
||||
color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
@media (min-width: 48em) {
|
||||
.masthead-brand {
|
||||
float: left;
|
||||
}
|
||||
.nav-masthead {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Cover
|
||||
*/
|
||||
.cover {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
.cover .btn-lg {
|
||||
padding: .75rem 1.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
.mastfoot {
|
||||
color: rgba(255, 255, 255, .5);
|
||||
}
|
||||
58
docs/4.2/examples/cover/index.html
Normal file
58
docs/4.2/examples/cover/index.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Cover Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="cover.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="text-center">
|
||||
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
|
||||
<header class="masthead mb-auto">
|
||||
<div class="inner">
|
||||
<h3 class="masthead-brand">Cover</h3>
|
||||
<nav class="nav nav-masthead justify-content-center">
|
||||
<a class="nav-link active" href="#">Home</a>
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
<a class="nav-link" href="#">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main role="main" class="inner cover">
|
||||
<h1 class="cover-heading">Cover your page.</h1>
|
||||
<p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
|
||||
<p class="lead">
|
||||
<a href="#" class="btn btn-lg btn-secondary">Learn more</a>
|
||||
</p>
|
||||
</main>
|
||||
|
||||
<footer class="mastfoot mt-auto">
|
||||
<div class="inner">
|
||||
<p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
106
docs/4.2/examples/dashboard/dashboard.css
Normal file
106
docs/4.2/examples/dashboard/dashboard.css
Normal file
@@ -0,0 +1,106 @@
|
||||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
padding: 48px 0 0; /* Height of navbar */
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||||
.sidebar-sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .feather {
|
||||
margin-right: 4px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.sidebar .nav-link:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
* Content
|
||||
*/
|
||||
|
||||
[role="main"] {
|
||||
padding-top: 133px; /* Space for fixed navbar */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
[role="main"] {
|
||||
padding-top: 48px; /* Space for fixed navbar */
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: 1rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.navbar .form-control {
|
||||
padding: .75rem 1rem;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.form-control-dark:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
||||
}
|
||||
53
docs/4.2/examples/dashboard/dashboard.js
Normal file
53
docs/4.2/examples/dashboard/dashboard.js
Normal file
@@ -0,0 +1,53 @@
|
||||
/* globals Chart:false, feather:false */
|
||||
|
||||
(function () {
|
||||
'use strict'
|
||||
|
||||
feather.replace()
|
||||
|
||||
// Graphs
|
||||
var ctx = document.getElementById('myChart')
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [
|
||||
'Sunday',
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday'
|
||||
],
|
||||
datasets: [{
|
||||
data: [
|
||||
15339,
|
||||
21345,
|
||||
18483,
|
||||
24003,
|
||||
23489,
|
||||
24092,
|
||||
12034
|
||||
],
|
||||
lineTension: 0,
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: '#007bff',
|
||||
borderWidth: 4,
|
||||
pointBackgroundColor: '#007bff'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
})
|
||||
}())
|
||||
272
docs/4.2/examples/dashboard/index.html
Normal file
272
docs/4.2/examples/dashboard/index.html
Normal file
@@ -0,0 +1,272 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Dashboard Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="dashboard.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
|
||||
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
|
||||
<ul class="navbar-nav px-3">
|
||||
<li class="nav-item text-nowrap">
|
||||
<a class="nav-link" href="#">Sign out</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
|
||||
<div class="sidebar-sticky">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">
|
||||
<span data-feather="home"></span>
|
||||
Dashboard <span class="sr-only">(current)</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file"></span>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="shopping-cart"></span>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="users"></span>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="bar-chart-2"></span>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="layers"></span>
|
||||
Integrations
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
|
||||
<span>Saved reports</span>
|
||||
<a class="d-flex align-items-center text-muted" href="#">
|
||||
<span data-feather="plus-circle"></span>
|
||||
</a>
|
||||
</h6>
|
||||
<ul class="nav flex-column mb-2">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
Current month
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
Last quarter
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
Social engagement
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">
|
||||
<span data-feather="file-text"></span>
|
||||
Year-end sale
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
|
||||
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
||||
<h1 class="h2">Dashboard</h1>
|
||||
<div class="btn-toolbar mb-2 mb-md-0">
|
||||
<div class="btn-group mr-2">
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Share</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary">Export</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle">
|
||||
<span data-feather="calendar"></span>
|
||||
This week
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
|
||||
|
||||
<h2>Section title</h2>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
<th>Header</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1,001</td>
|
||||
<td>Lorem</td>
|
||||
<td>ipsum</td>
|
||||
<td>dolor</td>
|
||||
<td>sit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,002</td>
|
||||
<td>amet</td>
|
||||
<td>consectetur</td>
|
||||
<td>adipiscing</td>
|
||||
<td>elit</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>Integer</td>
|
||||
<td>nec</td>
|
||||
<td>odio</td>
|
||||
<td>Praesent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,003</td>
|
||||
<td>libero</td>
|
||||
<td>Sed</td>
|
||||
<td>cursus</td>
|
||||
<td>ante</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,004</td>
|
||||
<td>dapibus</td>
|
||||
<td>diam</td>
|
||||
<td>Sed</td>
|
||||
<td>nisi</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,005</td>
|
||||
<td>Nulla</td>
|
||||
<td>quis</td>
|
||||
<td>sem</td>
|
||||
<td>at</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,006</td>
|
||||
<td>nibh</td>
|
||||
<td>elementum</td>
|
||||
<td>imperdiet</td>
|
||||
<td>Duis</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,007</td>
|
||||
<td>sagittis</td>
|
||||
<td>ipsum</td>
|
||||
<td>Praesent</td>
|
||||
<td>mauris</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,008</td>
|
||||
<td>Fusce</td>
|
||||
<td>nec</td>
|
||||
<td>tellus</td>
|
||||
<td>sed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,009</td>
|
||||
<td>augue</td>
|
||||
<td>semper</td>
|
||||
<td>porta</td>
|
||||
<td>Mauris</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,010</td>
|
||||
<td>massa</td>
|
||||
<td>Vestibulum</td>
|
||||
<td>lacinia</td>
|
||||
<td>arcu</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,011</td>
|
||||
<td>eget</td>
|
||||
<td>nulla</td>
|
||||
<td>Class</td>
|
||||
<td>aptent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,012</td>
|
||||
<td>taciti</td>
|
||||
<td>sociosqu</td>
|
||||
<td>ad</td>
|
||||
<td>litora</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,013</td>
|
||||
<td>torquent</td>
|
||||
<td>per</td>
|
||||
<td>conubia</td>
|
||||
<td>nostra</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,014</td>
|
||||
<td>per</td>
|
||||
<td>inceptos</td>
|
||||
<td>himenaeos</td>
|
||||
<td>Curabitur</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1,015</td>
|
||||
<td>sodales</td>
|
||||
<td>ligula</td>
|
||||
<td>in</td>
|
||||
<td>libero</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
|
||||
<script src="dashboard.js"></script></body>
|
||||
</html>
|
||||
102
docs/4.2/examples/floating-labels/floating-labels.css
Normal file
102
docs/4.2/examples/floating-labels/floating-labels.css
Normal file
@@ -0,0 +1,102 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.form-label-group {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-label-group > input,
|
||||
.form-label-group > label {
|
||||
height: 3.125rem;
|
||||
padding: .75rem;
|
||||
}
|
||||
|
||||
.form-label-group > label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 0; /* Override default `<label>` margin */
|
||||
line-height: 1.5;
|
||||
color: #495057;
|
||||
pointer-events: none;
|
||||
cursor: text; /* Match the input under the label */
|
||||
border: 1px solid transparent;
|
||||
border-radius: .25rem;
|
||||
transition: all .1s ease-in-out;
|
||||
}
|
||||
|
||||
.form-label-group input::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::-moz-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input::placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: .25rem;
|
||||
}
|
||||
|
||||
.form-label-group input:not(:placeholder-shown) ~ label {
|
||||
padding-top: .25rem;
|
||||
padding-bottom: .25rem;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Fallback for Edge
|
||||
-------------------------------------------------- */
|
||||
@supports (-ms-ime-align: auto) {
|
||||
.form-label-group > label {
|
||||
display: none;
|
||||
}
|
||||
.form-label-group input::-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fallback for IE
|
||||
-------------------------------------------------- */
|
||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
||||
.form-label-group > label {
|
||||
display: none;
|
||||
}
|
||||
.form-label-group input:-ms-input-placeholder {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
57
docs/4.2/examples/floating-labels/index.html
Normal file
57
docs/4.2/examples/floating-labels/index.html
Normal file
@@ -0,0 +1,57 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Floating labels example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="floating-labels.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<form class="form-signin">
|
||||
<div class="text-center mb-4">
|
||||
<img class="mb-4" src="/docs/4.2/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Floating labels</h1>
|
||||
<p>Build form controls with floating labels via the <code>:placeholder-shown</code> pseudo-element. <a href="https://caniuse.com/#feat=css-placeholder-shown">Works in latest Chrome, Safari, and Firefox.</a></p>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputEmail">Email address</label>
|
||||
</div>
|
||||
|
||||
<div class="form-label-group">
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<label for="inputPassword">Password</label>
|
||||
</div>
|
||||
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted text-center">© 2017-2018</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
6
docs/4.2/examples/grid/grid.css
Normal file
6
docs/4.2/examples/grid/grid.css
Normal file
@@ -0,0 +1,6 @@
|
||||
.themed-grid-col {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .2);
|
||||
}
|
||||
150
docs/4.2/examples/grid/index.html
Normal file
150
docs/4.2/examples/grid/index.html
Normal file
@@ -0,0 +1,150 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Grid Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="grid.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="py-4">
|
||||
<div class="container">
|
||||
|
||||
<h1>Bootstrap grid examples</h1>
|
||||
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
|
||||
<p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in Bootstrap by default.</p>
|
||||
|
||||
<h2 class="mt-4">Five grid tiers</h2>
|
||||
<p>There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
<div class="col-4 themed-grid-col">.col-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
<div class="col-sm-4 themed-grid-col">.col-sm-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
<div class="col-lg-4 themed-grid-col">.col-lg-4</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
<div class="col-xl-4 themed-grid-col">.col-xl-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three equal columns</h2>
|
||||
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Three unequal columns</h2>
|
||||
<p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-3 themed-grid-col">.col-md-3</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Two columns</h2>
|
||||
<p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.col-md-8</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4">Full width, single column</h2>
|
||||
<p class="text-warning">
|
||||
No grid classes are necessary for full-width elements.
|
||||
</p>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Two columns with two nested columns</h2>
|
||||
<p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
|
||||
<p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">
|
||||
<div class="pb-3">
|
||||
.col-md-8
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
<div class="col-md-6 themed-grid-col">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 themed-grid-col">.col-md-4</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile and desktop</h2>
|
||||
<p>The Bootstrap v4 grid system has five tiers of classes: xs (extra small), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
|
||||
<p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-12 col-md-8 themed-grid-col">.col-12 .col-md-8</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
<div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
<div class="col-6 themed-grid-col">.col-6</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
|
||||
<div class="row mb-3">
|
||||
<div class="col-12 col-sm-6 col-lg-8 themed-grid-col">.col-12 .col-sm-6 .col-lg-8</div>
|
||||
<div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
<div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- /container -->
|
||||
</body>
|
||||
</html>
|
||||
415
docs/4.2/examples/index.html
Normal file
415
docs/4.2/examples/index.html
Normal file
@@ -0,0 +1,415 @@
|
||||
<!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="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
|
||||
<title>Examples · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
<!-- Documentation extras -->
|
||||
|
||||
|
||||
<link href="/docs/4.2/assets/css/docs.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/4.2/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/4.2/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/4.2/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/4.2/assets/img/favicons/safari-pinned-tab.svg" color="#563d7c">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="msapplication-config" content="/docs/4.2/assets/img/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#563d7c">
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:site" content="@getbootstrap">
|
||||
<meta name="twitter:creator" content="@getbootstrap">
|
||||
<meta name="twitter:title" content="Examples">
|
||||
<meta name="twitter:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta name="twitter:image" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social-logo.png">
|
||||
|
||||
<!-- Facebook -->
|
||||
<meta property="og:url" content="https://getbootstrap.com/docs/4.2/examples/">
|
||||
<meta property="og:title" content="Examples">
|
||||
<meta property="og:description" content="Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:image" content="http://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:secure_url" content="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-social.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<a class="skippy sr-only sr-only-focusable" href="#content">
|
||||
<span class="skippy-text">Skip to main content</span>
|
||||
</a>
|
||||
|
||||
|
||||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||||
<a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Bootstrap"><svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false" role="img"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||||
</a>
|
||||
|
||||
<div class="navbar-nav-scroll">
|
||||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link " href="/docs/4.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/docs/4.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://expo.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');" target="_blank" rel="noopener">Expo</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" target="_blank" rel="noopener">Blog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
v4.2
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||||
<a class="dropdown-item active" href="/docs/4.2/">Latest (4.2.x)</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.1/">v4.1.3</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/4.0/">v4.0.0</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com/">v4 Alpha 6</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.4/">v3.4.0</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/docs/3.3/">v3.3.7</a>
|
||||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/docs/versions/">All versions</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://github.com/twbs/bootstrap" target="_blank" rel="noopener" aria-label="GitHub"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false" role="img"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener" aria-label="Twitter"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false" role="img"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com/" target="_blank" rel="noopener" aria-label="Slack"><svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false" role="img"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/docs/4.2/getting-started/download/">Download</a>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
<header class="d-flex flex-column flex-md-row align-items-md-center p-5 bg-light">
|
||||
<div class="pt-md-3 pb-md-4">
|
||||
<h1 class="bd-title mt-0">Examples</h1>
|
||||
<p class="bd-lead">Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.</p><a href="https://github.com/twbs/bootstrap/archive/v4.2.1.zip" class="btn btn-lg btn-bd-primary" onclick="ga('send', 'event', 'Examples', 'Hero', 'Download');">Download source code</a></div>
|
||||
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJL&placement=getbootstrapcom" id="_carbonads_js"></script>
|
||||
|
||||
</header>
|
||||
|
||||
<main class="bd-content p-5" id="content" role="main">
|
||||
|
||||
<h2>Custom components</h2>
|
||||
<p>Brand new components and templates to help folks quickly get started with Bootstrap and demonstrate best practices for adding onto the framework.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/album/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/album.png,
|
||||
/docs/4.2/assets/img/examples/album@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/album.png" alt="Album screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Album</h5>
|
||||
</a>
|
||||
<p class="text-muted">Simple one-page template for photo galleries, portfolios, and more.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/pricing/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/pricing.png,
|
||||
/docs/4.2/assets/img/examples/pricing@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/pricing.png" alt="Pricing screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Pricing</h5>
|
||||
</a>
|
||||
<p class="text-muted">Example pricing page built with Cards and featuring a custom header and footer.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/checkout/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/checkout.png,
|
||||
/docs/4.2/assets/img/examples/checkout@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/checkout.png" alt="Checkout screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Checkout</h5>
|
||||
</a>
|
||||
<p class="text-muted">Custom checkout form showing our form components and their validation features.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/product/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/product.png,
|
||||
/docs/4.2/assets/img/examples/product@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/product.png" alt="Product screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Product</h5>
|
||||
</a>
|
||||
<p class="text-muted">Lean product-focused marketing page with extensive grid and image work.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/cover/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/cover.png,
|
||||
/docs/4.2/assets/img/examples/cover@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/cover.png" alt="Cover screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Cover</h5>
|
||||
</a>
|
||||
<p class="text-muted">A one-page template for building simple and beautiful home pages.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/carousel/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/carousel.png,
|
||||
/docs/4.2/assets/img/examples/carousel@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/carousel.png" alt="Carousel screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Carousel</h5>
|
||||
</a>
|
||||
<p class="text-muted">Customize the navbar and carousel, then add some new components.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/blog/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/blog.png,
|
||||
/docs/4.2/assets/img/examples/blog@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/blog.png" alt="Blog screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Blog</h5>
|
||||
</a>
|
||||
<p class="text-muted">Magazine like blog template with header, navigation, featured content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/dashboard/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/dashboard.png,
|
||||
/docs/4.2/assets/img/examples/dashboard@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/dashboard.png" alt="Dashboard screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Dashboard</h5>
|
||||
</a>
|
||||
<p class="text-muted">Basic admin dashboard shell with fixed sidebar and navbar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/sign-in/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sign-in.png,
|
||||
/docs/4.2/assets/img/examples/sign-in@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/sign-in.png" alt="Sign-in screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Sign-in</h5>
|
||||
</a>
|
||||
<p class="text-muted">Custom form layout and design for a simple sign in form.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/sticky-footer/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer.png,
|
||||
/docs/4.2/assets/img/examples/sticky-footer@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/sticky-footer.png" alt="Sticky footer screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Sticky footer</h5>
|
||||
</a>
|
||||
<p class="text-muted">Attach a footer to the bottom of the viewport when page content is short.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/sticky-footer-navbar/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/sticky-footer-navbar.png,
|
||||
/docs/4.2/assets/img/examples/sticky-footer-navbar@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/sticky-footer-navbar.png" alt="Sticky footer navbar screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Sticky footer navbar</h5>
|
||||
</a>
|
||||
<p class="text-muted">Attach a footer to the bottom of the viewport with a fixed top navbar.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Framework</h2>
|
||||
<p>Examples that focus on implementing uses of built-in components provided by Bootstrap.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/starter-template/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/starter-template.png,
|
||||
/docs/4.2/assets/img/examples/starter-template@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/starter-template.png" alt="Starter template screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Starter template</h5>
|
||||
</a>
|
||||
<p class="text-muted">Nothing but the basics: compiled CSS and JavaScript.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/grid/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/grid.png,
|
||||
/docs/4.2/assets/img/examples/grid@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/grid.png" alt="Grid screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Grid</h5>
|
||||
</a>
|
||||
<p class="text-muted">Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/jumbotron/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/jumbotron.png,
|
||||
/docs/4.2/assets/img/examples/jumbotron@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/jumbotron.png" alt="Jumbotron screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Jumbotron</h5>
|
||||
</a>
|
||||
<p class="text-muted">Build around the jumbotron with a navbar and some basic grid columns.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Navbars</h2>
|
||||
<p>Taking the default navbar component and showing how it can be moved, placed, and extended.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/navbars/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbars.png,
|
||||
/docs/4.2/assets/img/examples/navbars@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/navbars.png" alt="Navbars screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Navbars</h5>
|
||||
</a>
|
||||
<p class="text-muted">Demonstration of all responsive and container options for the navbar.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/navbar-static/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-static.png,
|
||||
/docs/4.2/assets/img/examples/navbar-static@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/navbar-static.png" alt="Navbar static screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Navbar static</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example of a static top navbar along with some additional content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/navbar-fixed/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-fixed.png,
|
||||
/docs/4.2/assets/img/examples/navbar-fixed@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/navbar-fixed.png" alt="Navbar fixed screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Navbar fixed</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example with a fixed top navbar along with some additional content.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/navbar-bottom/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/navbar-bottom.png,
|
||||
/docs/4.2/assets/img/examples/navbar-bottom@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/navbar-bottom.png" alt="Navbar bottom screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Navbar bottom</h5>
|
||||
</a>
|
||||
<p class="text-muted">Single navbar example with a bottom navbar along with some additional content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Experiments</h2>
|
||||
<p>Examples that focus on future-friendly features or techniques.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/floating-labels/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/floating-labels.png,
|
||||
/docs/4.2/assets/img/examples/floating-labels@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/floating-labels.png" alt="Floating labels screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Floating labels</h5>
|
||||
</a>
|
||||
<p class="text-muted">Beautifully simple forms with floating labels over your inputs.</p>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
||||
<a href="/docs/4.2/examples/offcanvas/">
|
||||
<img class="img-thumbnail mb-3" srcset="/docs/4.2/assets/img/examples/offcanvas.png,
|
||||
/docs/4.2/assets/img/examples/offcanvas@2x.png 2x"
|
||||
src="/docs/4.2/assets/img/examples/offcanvas.png" alt="Offcanvas screenshot" width="480" height="300">
|
||||
<h5 class="mb-1">Offcanvas</h5>
|
||||
</a>
|
||||
<p class="text-muted">Turn your expandable navbar into a sliding offcanvas menu.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<footer class="bd-footer text-muted">
|
||||
<div class="container-fluid p-3 p-md-5">
|
||||
<ul class="bd-footer-links">
|
||||
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
|
||||
<li><a href="https://twitter.com/getbootstrap">Twitter</a></li>
|
||||
<li><a href="/docs/4.2/examples/">Examples</a></li>
|
||||
<li><a href="/docs/4.2/about/overview/">About</a></li>
|
||||
</ul>
|
||||
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank" rel="noopener">@mdo</a> and <a href="https://twitter.com/fat" target="_blank" rel="noopener">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
|
||||
<p>Currently v4.2.1. Code licensed <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank" rel="license noopener">MIT</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script><script src="/docs/4.2/assets/js/docs.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
106
docs/4.2/examples/jumbotron/index.html
Normal file
106
docs/4.2/examples/jumbotron/index.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Jumbotron Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="jumbotron.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main">
|
||||
|
||||
<!-- Main jumbotron for a primary marketing message or call to action -->
|
||||
<div class="jumbotron">
|
||||
<div class="container">
|
||||
<h1 class="display-3">Hello, world!</h1>
|
||||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
|
||||
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- Example row of columns -->
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<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>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
</div> <!-- /container -->
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="container">
|
||||
<p>© Company 2017-2018</p>
|
||||
</footer>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
4
docs/4.2/examples/jumbotron/jumbotron.css
Normal file
4
docs/4.2/examples/jumbotron/jumbotron.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Move down content because we have a fixed navbar that is 3.5rem tall */
|
||||
body {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
65
docs/4.2/examples/navbar-bottom/index.html
Normal file
65
docs/4.2/examples/navbar-bottom/index.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Bottom navbar example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="jumbotron mt-3">
|
||||
<h1>Bottom Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how the bottom navbar works.</p>
|
||||
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Bottom navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropup">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown10">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
64
docs/4.2/examples/navbar-fixed/index.html
Normal file
64
docs/4.2/examples/navbar-fixed/index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Fixed top navbar example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navbar-top-fixed.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
|
||||
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</main>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
5
docs/4.2/examples/navbar-fixed/navbar-top-fixed.css
Normal file
5
docs/4.2/examples/navbar-fixed/navbar-top-fixed.css
Normal file
@@ -0,0 +1,5 @@
|
||||
/* Show it is fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
padding-top: 4.5rem;
|
||||
}
|
||||
64
docs/4.2/examples/navbar-static/index.html
Normal file
64
docs/4.2/examples/navbar-static/index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Top navbar example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navbar-top.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
|
||||
<a class="navbar-brand" href="#">Top navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="container">
|
||||
<div class="jumbotron">
|
||||
<h1>Navbar example</h1>
|
||||
<p class="lead">This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.</p>
|
||||
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
|
||||
</div>
|
||||
</main>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
4
docs/4.2/examples/navbar-static/navbar-top.css
Normal file
4
docs/4.2/examples/navbar-static/navbar-top.css
Normal file
@@ -0,0 +1,4 @@
|
||||
/* Show it's not fixed to the top */
|
||||
body {
|
||||
min-height: 75rem;
|
||||
}
|
||||
350
docs/4.2/examples/navbars/index.html
Normal file
350
docs/4.2/examples/navbars/index.html
Normal file
@@ -0,0 +1,350 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Navbar Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="navbar.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Never expand</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample01">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Always expand</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample02">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Expand at sm</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample03">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown03" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown03">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Expand at md</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample04">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown04">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Expand at lg</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample05">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown05" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown05">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-xl navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Expand at xl</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample06">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown06" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown06">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">Container</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown07" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown07">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Centered nav only <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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown08">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample09">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown09">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-md-0">
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample10">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Centered nav only <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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown10">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main">
|
||||
<div class="jumbotron">
|
||||
<div class="col-sm-8 mx-auto">
|
||||
<h1>Navbar examples</h1>
|
||||
<p>This example is a quick exercise to illustrate how the navbar and its contents work. Some navbars extend the width of the viewport, others are confined within a <code>.container</code>. For positioning of navbars, checkout the <a href="/docs/4.2/examples/navbar-static/">top</a> and <a href="/docs/4.2/examples/navbar-fixed/">fixed top</a> examples.</p>
|
||||
<p>At the smallest breakpoint, the collapse plugin is used to hide the links and show a menu button to toggle the collapsed content.</p>
|
||||
<p>
|
||||
<a class="btn btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
7
docs/4.2/examples/navbars/navbar.css
Normal file
7
docs/4.2/examples/navbars/navbar.css
Normal file
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
161
docs/4.2/examples/offcanvas/index.html
Normal file
161
docs/4.2/examples/offcanvas/index.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Offcanvas template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="offcanvas.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
|
||||
<a class="navbar-brand mr-auto mr-lg-0" href="#">Offcanvas navbar</a>
|
||||
<button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Notifications</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Switch account</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="nav-scroller bg-white shadow-sm">
|
||||
<nav class="nav nav-underline">
|
||||
<a class="nav-link active" href="#">Dashboard</a>
|
||||
<a class="nav-link" href="#">
|
||||
Friends
|
||||
<span class="badge badge-pill bg-light align-text-bottom">27</span>
|
||||
</a>
|
||||
<a class="nav-link" href="#">Explore</a>
|
||||
<a class="nav-link" href="#">Suggestions</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main role="main" class="container">
|
||||
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm">
|
||||
<img class="mr-3" src="/docs/4.2/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
|
||||
<div class="lh-100">
|
||||
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
|
||||
<small>Since 2011</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#007bff" width="100%" height="100%"/><text fill="#007bff" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#e83e8c" width="100%" height="100%"/><text fill="#e83e8c" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#6f42c1" width="100%" height="100%"/><text fill="#6f42c1" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
</div>
|
||||
<small class="d-block text-right mt-3">
|
||||
<a href="#">All updates</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="my-3 p-3 bg-white rounded shadow-sm">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#007bff" width="100%" height="100%"/><text fill="#007bff" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#007bff" width="100%" height="100%"/><text fill="#007bff" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<svg class="bd-placeholder-img mr-2 rounded" width="32" height="32" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: 32x32"><title>Placeholder</title><rect fill="#007bff" width="100%" height="100%"/><text fill="#007bff" dy=".3em" x="50%" y="50%">32x32</text></svg>
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="d-block text-right mt-3">
|
||||
<a href="#">All suggestions</a>
|
||||
</small>
|
||||
</div>
|
||||
</main>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
|
||||
<script src="offcanvas.js"></script></body>
|
||||
</html>
|
||||
75
docs/4.2/examples/offcanvas/offcanvas.css
Normal file
75
docs/4.2/examples/offcanvas/offcanvas.css
Normal file
@@ -0,0 +1,75 @@
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.offcanvas-collapse {
|
||||
position: fixed;
|
||||
top: 56px; /* Height of navbar */
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
visibility: hidden;
|
||||
background-color: #343a40;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: .3s;
|
||||
transition-property: left, visibility;
|
||||
}
|
||||
.offcanvas-collapse.open {
|
||||
left: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link:hover {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.nav-underline .active {
|
||||
font-weight: 500;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.text-white-50 { color: rgba(255, 255, 255, .5); }
|
||||
|
||||
.bg-purple { background-color: #6f42c1; }
|
||||
|
||||
.lh-100 { line-height: 1; }
|
||||
.lh-125 { line-height: 1.25; }
|
||||
.lh-150 { line-height: 1.5; }
|
||||
7
docs/4.2/examples/offcanvas/offcanvas.js
Normal file
7
docs/4.2/examples/offcanvas/offcanvas.js
Normal file
@@ -0,0 +1,7 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
$('[data-toggle="offcanvas"]').on('click', function () {
|
||||
$('.offcanvas-collapse').toggleClass('open')
|
||||
})
|
||||
})
|
||||
135
docs/4.2/examples/pricing/index.html
Normal file
135
docs/4.2/examples/pricing/index.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Pricing example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="pricing.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
|
||||
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
|
||||
<nav class="my-2 my-md-0 mr-md-3">
|
||||
<a class="p-2 text-dark" href="#">Features</a>
|
||||
<a class="p-2 text-dark" href="#">Enterprise</a>
|
||||
<a class="p-2 text-dark" href="#">Support</a>
|
||||
<a class="p-2 text-dark" href="#">Pricing</a>
|
||||
</nav>
|
||||
<a class="btn btn-outline-primary" href="#">Sign up</a>
|
||||
</div>
|
||||
|
||||
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
|
||||
<h1 class="display-4">Pricing</h1>
|
||||
<p class="lead">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="card-deck mb-3 text-center">
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 font-weight-normal">Free</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>10 users included</li>
|
||||
<li>2 GB of storage</li>
|
||||
<li>Email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 font-weight-normal">Pro</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>20 users included</li>
|
||||
<li>10 GB of storage</li>
|
||||
<li>Priority email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-header">
|
||||
<h4 class="my-0 font-weight-normal">Enterprise</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
|
||||
<ul class="list-unstyled mt-3 mb-4">
|
||||
<li>30 users included</li>
|
||||
<li>15 GB of storage</li>
|
||||
<li>Phone and email support</li>
|
||||
<li>Help center access</li>
|
||||
</ul>
|
||||
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="pt-4 my-md-5 pt-md-5 border-top">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md">
|
||||
<img class="mb-2" src="/docs/4.2/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
|
||||
<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>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>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
docs/4.2/examples/pricing/pricing.css
Normal file
20
docs/4.2/examples/pricing/pricing.css
Normal file
@@ -0,0 +1,20 @@
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.pricing-header {
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.card-deck .card {
|
||||
min-width: 220px;
|
||||
}
|
||||
172
docs/4.2/examples/product/index.html
Normal file
172
docs/4.2/examples/product/index.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Product example · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- 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" focusable="false" role="img"><title>Product</title><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 shadow-sm d-none d-md-block"></div>
|
||||
<div class="product-device product-device-2 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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 shadow-sm 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" focusable="false" role="img"><title>Product</title><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>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
74
docs/4.2/examples/product/product.css
Normal file
74
docs/4.2/examples/product/product.css
Normal file
@@ -0,0 +1,74 @@
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Custom translucent site header
|
||||
*/
|
||||
|
||||
.site-header {
|
||||
background-color: rgba(0, 0, 0, .85);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
}
|
||||
.site-header a {
|
||||
color: #999;
|
||||
transition: ease-in-out color .15s;
|
||||
}
|
||||
.site-header a:hover {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dummy devices (replace them with your own or something else entirely!)
|
||||
*/
|
||||
|
||||
.product-device {
|
||||
position: absolute;
|
||||
right: 10%;
|
||||
bottom: -30%;
|
||||
width: 300px;
|
||||
height: 540px;
|
||||
background-color: #333;
|
||||
border-radius: 21px;
|
||||
-webkit-transform: rotate(30deg);
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.product-device::before {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
right: 10px;
|
||||
bottom: 10%;
|
||||
left: 10px;
|
||||
content: "";
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.product-device-2 {
|
||||
top: -25%;
|
||||
right: auto;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Extra utilities
|
||||
*/
|
||||
|
||||
.flex-equal > * {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.flex-md-equal > * {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-hidden { overflow: hidden; }
|
||||
47
docs/4.2/examples/sign-in/index.html
Normal file
47
docs/4.2/examples/sign-in/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Signin Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="signin.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="text-center">
|
||||
<form class="form-signin">
|
||||
<img class="mb-4" src="/docs/4.2/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
|
||||
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
|
||||
<label for="inputEmail" class="sr-only">Email address</label>
|
||||
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
|
||||
<label for="inputPassword" class="sr-only">Password</label>
|
||||
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
|
||||
<div class="checkbox mb-3">
|
||||
<label>
|
||||
<input type="checkbox" value="remember-me"> Remember me
|
||||
</label>
|
||||
</div>
|
||||
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
|
||||
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
44
docs/4.2/examples/sign-in/signin.css
Normal file
44
docs/4.2/examples/sign-in/signin.css
Normal file
@@ -0,0 +1,44 @@
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
margin: auto;
|
||||
}
|
||||
.form-signin .checkbox {
|
||||
font-weight: 400;
|
||||
}
|
||||
.form-signin .form-control {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-signin .form-control:focus {
|
||||
z-index: 2;
|
||||
}
|
||||
.form-signin input[type="email"] {
|
||||
margin-bottom: -1px;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.form-signin input[type="password"] {
|
||||
margin-bottom: 10px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
74
docs/4.2/examples/starter-template/index.html
Normal file
74
docs/4.2/examples/starter-template/index.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Starter Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="starter-template.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="form-inline my-2 my-lg-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main role="main" class="container">
|
||||
|
||||
<div class="starter-template">
|
||||
<h1>Bootstrap starter template</h1>
|
||||
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
|
||||
</div>
|
||||
|
||||
</main><!-- /.container -->
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
7
docs/4.2/examples/starter-template/starter-template.css
Normal file
7
docs/4.2/examples/starter-template/starter-template.css
Normal file
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
.starter-template {
|
||||
padding: 3rem 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
74
docs/4.2/examples/sticky-footer-navbar/index.html
Normal file
74
docs/4.2/examples/sticky-footer-navbar/index.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-100">
|
||||
<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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Sticky Footer Navbar Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="sticky-footer-navbar.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
|
||||
<a class="navbar-brand" href="#">Fixed navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<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>
|
||||
<form class="form-inline mt-2 mt-md-0">
|
||||
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Begin page content -->
|
||||
<main role="main" class="flex-shrink-0">
|
||||
<div class="container">
|
||||
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
|
||||
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main > .container</code>.</p>
|
||||
<p>Back to <a href="/docs/4.2/examples/sticky-footer/">the default sticky footer</a> minus the navbar.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer mt-auto py-3">
|
||||
<div class="container">
|
||||
<span class="text-muted">Place sticky footer content here.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
main > .container {
|
||||
padding: 60px 15px 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.footer > .container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 80%;
|
||||
}
|
||||
47
docs/4.2/examples/sticky-footer/index.html
Normal file
47
docs/4.2/examples/sticky-footer/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!doctype html>
|
||||
<html lang="en" class="h-100">
|
||||
<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="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Jekyll v3.8.5">
|
||||
<title>Sticky Footer Template · Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/4.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="sticky-footer.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="d-flex flex-column h-100">
|
||||
<!-- Begin page content -->
|
||||
<main role="main" class="flex-shrink-0">
|
||||
<div class="container">
|
||||
<h1 class="mt-5">Sticky footer</h1>
|
||||
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
|
||||
<p>Use <a href="/docs/4.2/examples/sticky-footer-navbar/">the sticky footer with a fixed navbar</a> if need be, too.</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer mt-auto py-3">
|
||||
<div class="container">
|
||||
<span class="text-muted">Place sticky footer content here.</span>
|
||||
</div>
|
||||
</footer>
|
||||
<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="/docs/4.2/assets/js/vendor/jquery-slim.min.js"><\/script>')</script><script src="/docs/4.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script></body>
|
||||
</html>
|
||||
13
docs/4.2/examples/sticky-footer/sticky-footer.css
Normal file
13
docs/4.2/examples/sticky-footer/sticky-footer.css
Normal file
@@ -0,0 +1,13 @@
|
||||
/* Custom page CSS
|
||||
-------------------------------------------------- */
|
||||
/* Not required for template or sticky footer method. */
|
||||
|
||||
.container {
|
||||
width: auto;
|
||||
max-width: 680px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
Reference in New Issue
Block a user