mirror of
https://github.com/pojokcodeid/nvim-lazy.git
synced 2025-06-23 17:28:50 +02:00
update cmd line
This commit is contained in:
asep komarudin
parent
67a507d530
commit
8c55f6b749
214 changed files with 48553 additions and 48489 deletions
4
snippets/B5-Snippets/templates/Untitled-1.html
Normal file
4
snippets/B5-Snippets/templates/Untitled-1.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
|
||||
// ${2|primary,secondary,success,danger,warning,info,light,dark|}
|
||||
|
||||
321
snippets/B5-Snippets/templates/album.html
Normal file
321
snippets/B5-Snippets/templates/album.html
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Album example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/album/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</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">
|
||||
<a href="#" class="navbar-brand d-flex align-items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="mr-2"
|
||||
viewBox="0 0 24 24">
|
||||
<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" />
|
||||
<circle cx="12" cy="13" r="4" /></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>
|
||||
|
||||
<section class="py-5 text-center container">
|
||||
<div class="row py-lg-5">
|
||||
<div class="col-lg-6 col-md-8 mx-auto">
|
||||
<h1 class="font-weight-light">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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="album py-5 bg-light">
|
||||
<div class="container">
|
||||
|
||||
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
|
||||
<div class="col">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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">
|
||||
<div class="card shadow-sm">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">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 py-5">
|
||||
<div class="container">
|
||||
<p class="float-right mb-1">
|
||||
<a href="#">Back to top</a>
|
||||
</p>
|
||||
<p class="mb-1">Album example is © Bootstrap, but please download and customize it for yourself!</p>
|
||||
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a
|
||||
href="/docs/5.0/getting-started/introduction/">getting started guide</a>.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
snippets/B5-Snippets/templates/blocks/featured-post.html
Normal file
31
snippets/B5-Snippets/templates/blocks/featured-post.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bootstrap Site</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello-Bootstrap</h1>
|
||||
<div class="col p-4 d-flex flex-column position-static ">
|
||||
<strong class="d-inline-block mb-2 text-primary">Utility</strong>
|
||||
<h3 class="mb-0">Featured post</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="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<div class="col p-4 d-flex flex-column position-static ">
|
||||
<strong class="d-inline-block mb-2 text-primary">Utility</strong>
|
||||
<h3 class="mb-0">Featured post</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="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
418
snippets/B5-Snippets/templates/blog.html
Normal file
418
snippets/B5-Snippets/templates/blog.html
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Blog Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/blog/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@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&display=swap" rel="stylesheet">
|
||||
<!-- Custom styles for this template -->
|
||||
<style>
|
||||
/* 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: flex;
|
||||
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 {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.h-250 {
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.h-md-250 {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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: #727272;
|
||||
}
|
||||
|
||||
/*
|
||||
* Footer
|
||||
*/
|
||||
.blog-footer {
|
||||
padding: 2.5rem 0;
|
||||
color: #727272;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
border-top: .05rem solid #e5e5e5;
|
||||
}
|
||||
|
||||
.blog-footer p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
</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="link-secondary" 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="link-secondary" href="#" aria-label="Search">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="mx-3" role="img"
|
||||
viewBox="0 0 24 24">
|
||||
<title>Search</title>
|
||||
<circle cx="10.5" cy="10.5" r="7.5" />
|
||||
<path d="M21 21l-5.2-5.2" />
|
||||
</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 link-secondary" href="#">World</a>
|
||||
<a class="p-2 link-secondary" href="#">U.S.</a>
|
||||
<a class="p-2 link-secondary" href="#">Technology</a>
|
||||
<a class="p-2 link-secondary" href="#">Design</a>
|
||||
<a class="p-2 link-secondary" href="#">Culture</a>
|
||||
<a class="p-2 link-secondary" href="#">Business</a>
|
||||
<a class="p-2 link-secondary" href="#">Politics</a>
|
||||
<a class="p-2 link-secondary" href="#">Opinion</a>
|
||||
<a class="p-2 link-secondary" href="#">Science</a>
|
||||
<a class="p-2 link-secondary" href="#">Health</a>
|
||||
<a class="p-2 link-secondary" href="#">Style</a>
|
||||
<a class="p-2 link-secondary" href="#">Travel</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="p-4 p-md-5 mb-4 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="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-primary">World</strong>
|
||||
<h3 class="mb-0">Featured post</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="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img"
|
||||
focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">Thumbnail</text>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div
|
||||
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
|
||||
<div class="col p-4 d-flex flex-column position-static">
|
||||
<strong class="d-inline-block mb-2 text-success">Design</strong>
|
||||
<h3 class="mb-0">Post title</h3>
|
||||
<div class="mb-1 text-muted">Nov 11</div>
|
||||
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to
|
||||
additional content.</p>
|
||||
<a href="#" class="stretched-link">Continue reading</a>
|
||||
</div>
|
||||
<div class="col-auto d-none d-lg-block">
|
||||
<svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg"
|
||||
aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" role="img"
|
||||
focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef"
|
||||
dy=".3em">Thumbnail</text>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<h3 class="pb-4 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="#" tabindex="-1" aria-disabled="true">Newer</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<aside class="col-md-4">
|
||||
<div class="p-4 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-4">
|
||||
<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-4">
|
||||
<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>
|
||||
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
370
snippets/B5-Snippets/templates/carousel.html
Normal file
370
snippets/B5-Snippets/templates/carousel.html
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Carousel Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/carousel/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
</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">
|
||||
<div class="container-fluid">
|
||||
<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 mb-2 mb-md-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
<form class="d-flex">
|
||||
<input class="form-control mr-2" type="search" placeholder="Search" aria-label="Search">
|
||||
<button class="btn btn-outline-success" type="submit">Search</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<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" role="img" focusable="false">
|
||||
<rect width="100%" height="100%" fill="#777" /></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" role="img" focusable="false">
|
||||
<rect width="100%" height="100%" fill="#777" /></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" role="img" focusable="false">
|
||||
<rect width="100%" height="100%" fill="#777" /></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"
|
||||
aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">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"
|
||||
aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">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"
|
||||
aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#777" /><text x="50%" y="50%" fill="#777" dy=".3em">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" aria-label="Placeholder: 500x500"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">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" aria-label="Placeholder: 500x500"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">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" aria-label="Placeholder: 500x500"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#eee" /><text x="50%" y="50%" fill="#aaa" dy=".3em">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-2020 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
396
snippets/B5-Snippets/templates/dashboard.html
Normal file
396
snippets/B5-Snippets/templates/dashboard.html
Normal file
|
|
@ -0,0 +1,396 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Dashboard Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/dashboard/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.sidebar {
|
||||
top: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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. */
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .feather {
|
||||
margin-right: 4px;
|
||||
color: #727272;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/*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 .navbar-toggler {
|
||||
top: .25rem;
|
||||
right: 1rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
|
||||
<a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Company name</a>
|
||||
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
|
||||
data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<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 id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
|
||||
<div class="position-sticky pt-3">
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">
|
||||
<span data-feather="home"></span>
|
||||
Dashboard
|
||||
</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="link-secondary" href="#" aria-label="Add a new report">
|
||||
<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 class="col-md-9 ml-sm-auto col-lg-10 px-md-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="/docs/5.0/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js"
|
||||
integrity="sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"
|
||||
integrity="sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="dashboard.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
snippets/B5-Snippets/templates/demo.html
Normal file
16
snippets/B5-Snippets/templates/demo.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bootstrap Site</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello-Bootstrap</h1>
|
||||
<div class="d-flex align-content-sm-start"></div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
snippets/B5-Snippets/templates/favicon-32x32.png
Normal file
BIN
snippets/B5-Snippets/templates/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
244
snippets/B5-Snippets/templates/grid.html
Normal file
244
snippets/B5-Snippets/templates/grid.html
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Grid Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/grid/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@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>
|
||||
|
||||
<div class="row mb-3">
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-4</div>
|
||||
<div class="col-xxl-4 themed-grid-col">.col-xxl-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 equal columns alternative</h2>
|
||||
<p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
|
||||
<div class="row row-cols-md-3 mb-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
|
||||
<div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></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, this class infix is not used), 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 md, lg and xl, you only
|
||||
need to specify md.</p>
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-8 themed-grid-col">.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-sm-6 col-lg-8 themed-grid-col">.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>
|
||||
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Gutters</h2>
|
||||
<p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gx-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gx-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 gy-4">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
|
||||
</div>
|
||||
<p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
|
||||
<div class="row row-cols-1 row-cols-md-3 g-3">
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
<div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container" id="containers">
|
||||
<hr class="my-4">
|
||||
|
||||
<h2 class="mt-4">Containers</h2>
|
||||
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.
|
||||
v5 adds a new <code>xxl</code> breakpoint.</p>
|
||||
</div>
|
||||
|
||||
<div class="container themed-container">.container</div>
|
||||
<div class="container-sm themed-container">.container-sm</div>
|
||||
<div class="container-md themed-container">.container-md</div>
|
||||
<div class="container-lg themed-container">.container-lg</div>
|
||||
<div class="container-xl themed-container">.container-xl</div>
|
||||
<div class="container-xxl themed-container">.container-xxl</div>
|
||||
<div class="container-fluid themed-container">.container-fluid</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
24
snippets/B5-Snippets/templates/hello.html
Normal file
24
snippets/B5-Snippets/templates/hello.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>${1:Bootstrap Site}</title>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3804
snippets/B5-Snippets/templates/kitchen.html
Normal file
3804
snippets/B5-Snippets/templates/kitchen.html
Normal file
File diff suppressed because it is too large
Load diff
193
snippets/B5-Snippets/templates/masonary.html
Normal file
193
snippets/B5-Snippets/templates/masonary.html
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Masonry example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/masonry/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Favicons -->
|
||||
<!-- <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||
-->
|
||||
|
||||
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container py-5">
|
||||
<h1>Bootstrap and Masonry</h1>
|
||||
<p class="lead">Integrate <a href="https://masonry.desandro.com/">Masonry</a> with the Bootstrap grid system and
|
||||
cards component.</p>
|
||||
|
||||
<p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like
|
||||
so:</p>
|
||||
|
||||
<pre><code>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>
|
||||
</code></pre>
|
||||
|
||||
<p>By adding <code>data-masonry='{"percentPosition": true }'</code> to the <code>.row</code> wrapper, we can
|
||||
combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>
|
||||
|
||||
<hr class="my-5">
|
||||
|
||||
<div class="row" data-masonry='{"percentPosition": true }'>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200"
|
||||
xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
|
||||
dy=".3em">Image cap</text>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3">
|
||||
<figure class="p-3 mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img-top" width="100%" height="200"
|
||||
xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Image cap"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
|
||||
dy=".3em">Image cap</text>
|
||||
</svg>
|
||||
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional
|
||||
content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card bg-primary text-white text-center p-3">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-white">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has a regular title and short paragraph of text below it.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<svg class="bd-placeholder-img card-img" width="100%" height="260"
|
||||
xmlns="http://www.w3.org/2000/svg" aria-label="Placeholder: Card image"
|
||||
preserveAspectRatio="xMidYMid slice" role="img" focusable="false">
|
||||
<title>Placeholder</title>
|
||||
<rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6"
|
||||
dy=".3em">Card image</text>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card p-3 text-right">
|
||||
<figure class="mb-0">
|
||||
<blockquote class="blockquote">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
<figcaption class="blockquote-footer mb-0 text-muted">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-lg-4 mb-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is another card with title and supporting text below. This card has
|
||||
some additional content to make it slightly taller overall.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script async src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
|
||||
integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D"
|
||||
crossorigin="anonymous"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
94
snippets/B5-Snippets/templates/navbar-bottom.html
Normal file
94
snippets/B5-Snippets/templates/navbar-bottom.html
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="Hans McMurdy">
|
||||
<title>Bootstrap 5 Navbar Bottom Template · Bootstrap</title>
|
||||
<meta name="title" content="#JavaScriptFirst">
|
||||
<meta name="description"
|
||||
content="Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/navbar-bottom/">
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<main class="container">
|
||||
<div class="d-flex align-items-center p-3 my-3 text-dark-50 bg-purple rounded shadow-sm">
|
||||
<img class="mr-3" src="https://hansmcmurdy.com/JavaScript-First/logo.svg" alt="" width="48" height="48">
|
||||
<div class="lh-1">
|
||||
<h6 class="mb-1 text-dark lh-2">#JavaScriptFirst</h6>
|
||||
<small class="text-sm-left lh-base font-normal text-lowercase text-decoration-none text-reset">
|
||||
${1:Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using
|
||||
the node.js runtime environment rather than a browser and by the end, you will build a server and a website
|
||||
using JavaScript.}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<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">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
<li class="nav-item dropup">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown10" data-toggle="dropdown"
|
||||
aria-expanded="false">Dropup</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdown10">
|
||||
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
159
snippets/B5-Snippets/templates/offcanvas.html
Normal file
159
snippets/B5-Snippets/templates/offcanvas.html
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="author" content="Hans McMurdy">
|
||||
<title>Bootstrap 5 Offcanvas Template · Bootstrap</title>
|
||||
<meta name="title" content="#JavaScriptFirst">
|
||||
<meta name="description"
|
||||
content="Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First">
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
<!-- Favicons -->
|
||||
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
/* Prevent scroll on narrow devices */
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
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: transform .3s ease-in-out, visibility .3s ease-in-out;
|
||||
}
|
||||
|
||||
.offcanvas-collapse.open {
|
||||
visibility: visible;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-light">
|
||||
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" 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 mb-2 mb-lg-0">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<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="https://hansmcmurdy.com/JavaScript-First/logo.svg" alt="" width="48" height="48">
|
||||
<div class="lh-1">
|
||||
<h6 class="mb-0 text-white lh-1">#JavaScriptFirst</h6>
|
||||
<small>Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript
|
||||
using the node.js runtime environment rather than a browser and by the end, you will build a server and a
|
||||
website using JavaScript.</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<script type="text/javascript">
|
||||
(function () {
|
||||
'use strict'
|
||||
document.querySelector('[data-toggle="offcanvas"]').addEventListener('click', function () {
|
||||
document.querySelector('.offcanvas-collapse').classList.toggle('open')
|
||||
})
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
169
snippets/B5-Snippets/templates/pricing.html
Normal file
169
snippets/B5-Snippets/templates/pricing.html
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Pricing example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/pricing/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@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="row row-cols-1 row-cols-md-3 mb-3 text-center">
|
||||
<div class="col">
|
||||
<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>
|
||||
<div class="col">
|
||||
<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>
|
||||
<div class="col">
|
||||
<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>
|
||||
</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/5.0/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
|
||||
<small class="d-block mb-3 text-muted">© 2017-2020</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="link-secondary" href="#">Cool stuff</a></li>
|
||||
<li><a class="link-secondary" href="#">Random feature</a></li>
|
||||
<li><a class="link-secondary" href="#">Team feature</a></li>
|
||||
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
|
||||
<li><a class="link-secondary" href="#">Another one</a></li>
|
||||
<li><a class="link-secondary" 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="link-secondary" href="#">Resource</a></li>
|
||||
<li><a class="link-secondary" href="#">Resource name</a></li>
|
||||
<li><a class="link-secondary" href="#">Another resource</a></li>
|
||||
<li><a class="link-secondary" 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="link-secondary" href="#">Team</a></li>
|
||||
<li><a class="link-secondary" href="#">Locations</a></li>
|
||||
<li><a class="link-secondary" href="#">Privacy</a></li>
|
||||
<li><a class="link-secondary" href="#">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
294
snippets/B5-Snippets/templates/product.html
Normal file
294
snippets/B5-Snippets/templates/product.html
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Product example · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/product/">
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
||||
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
||||
crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
||||
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.bd-placeholder-img-lg {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<!-- <link href="product.css" rel="stylesheet"> -->
|
||||
<style>
|
||||
.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: #727272;
|
||||
transition: color .15s ease-in-out;
|
||||
}
|
||||
|
||||
.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;
|
||||
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>* {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.flex-md-equal>* {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</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="#" aria-label="Product">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img"
|
||||
viewBox="0 0 24 24">
|
||||
<title>Product</title>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
|
||||
</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" fill="none" stroke="currentColor"
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img"
|
||||
viewBox="0 0 24 24">
|
||||
<title>Product</title>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path
|
||||
d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
|
||||
</svg>
|
||||
<small class="d-block mb-3 text-muted">© 2017-2020</small>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>Features</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="link-secondary" href="#">Cool stuff</a></li>
|
||||
<li><a class="link-secondary" href="#">Random feature</a></li>
|
||||
<li><a class="link-secondary" href="#">Team feature</a></li>
|
||||
<li><a class="link-secondary" href="#">Stuff for developers</a></li>
|
||||
<li><a class="link-secondary" href="#">Another one</a></li>
|
||||
<li><a class="link-secondary" 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="link-secondary" href="#">Resource name</a></li>
|
||||
<li><a class="link-secondary" href="#">Resource</a></li>
|
||||
<li><a class="link-secondary" href="#">Another resource</a></li>
|
||||
<li><a class="link-secondary" 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="link-secondary" href="#">Business</a></li>
|
||||
<li><a class="link-secondary" href="#">Education</a></li>
|
||||
<li><a class="link-secondary" href="#">Government</a></li>
|
||||
<li><a class="link-secondary" href="#">Gaming</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-md">
|
||||
<h5>About</h5>
|
||||
<ul class="list-unstyled text-small">
|
||||
<li><a class="link-secondary" href="#">Team</a></li>
|
||||
<li><a class="link-secondary" href="#">Locations</a></li>
|
||||
<li><a class="link-secondary" href="#">Privacy</a></li>
|
||||
<li><a class="link-secondary" href="#">Terms</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl"
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
74
snippets/B5-Snippets/templates/sign-in.html
Normal file
74
snippets/B5-Snippets/templates/sign-in.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">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
|
||||
<meta name="generator" content="Hugo 0.72.0">
|
||||
<title>Signin Template · Bootstrap</title>
|
||||
|
||||
<link rel="canonical" href="https://v5.getbootstrap.com/docs/5.0/examples/sign-in/">
|
||||
|
||||
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
|
||||
|
||||
<!-- Favicons -->
|
||||
<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
|
||||
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
|
||||
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
|
||||
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
|
||||
<meta name="theme-color" content="#7952b3">
|
||||
|
||||
|
||||
<style>
|
||||
.bd-placeholder-img {
|
||||
font-size: 1.125rem;
|
||||
text-anchor: middle;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@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/5.0/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-2020</p>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
141
snippets/B5-Snippets/templates/snippets/flex-utility.html
Normal file
141
snippets/B5-Snippets/templates/snippets/flex-utility.html
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<div class="d-${1|flex,inline-flex,sm-flex,sm-inline-flex,md-flex,md-inline-flex,lg-flex,lg-inline-flex,xl-flex,xl-inline-flex,xxl-flex,xxl-inline-flex|} ${2|row,row-reverse,column,column-reverse,sm-row,sm-row-reverse,sm-column,sm-column-reverse,md-row,md-row-reverse,md-column,md-column-reverse,lg-row,lg-row-reverse,lg-column,lg-column-reverse,xl-row,xl-row-reverse,xl-column,xl-column-reverse,xxl-row,xxl-row-reverse,xxl-column,xxl-column-reverse|} ${3|!spacing,!shadow,!color,!font|}">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
This has x options:
|
||||
1. behavior
|
||||
2. direction
|
||||
3. justify content
|
||||
4. align-items
|
||||
5.
|
||||
|
||||
|
||||
!flex-justify
|
||||
justify-content-${|start,end,center,between,around,evenly,sm-start,sm-end,sm-center,sm-between,sm-around,sm-evenly,md-start,md-end,md-center,md-between,md-around,md-evenly,lg-start,lg-end,lg-center,lg-between,lg-around,lg-evenly,xl-start,xl-end,xl-center,xl-between,xl-around,xl-evenly,xxl-start,xxl-end,xxl-center,xxl-between,xxl-around,xxl-evenly|}
|
||||
|
||||
Options:
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- between,
|
||||
- around,
|
||||
- evenly,
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-between,
|
||||
- sm-around,
|
||||
- sm-evenly,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-between,
|
||||
- md-around,
|
||||
- md-evenly,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-between,
|
||||
- lg-around,
|
||||
- lg-evenly,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-between,
|
||||
- xl-around,
|
||||
- xl-evenly,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-between,
|
||||
- xxl-around,
|
||||
- xxl-evenly,
|
||||
|
||||
|
||||
!flex-align-item
|
||||
align-items-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
|
||||
|
||||
Options:
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- baseline,
|
||||
- stretch,
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-baseline,
|
||||
- sm-stretch,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-baseline,
|
||||
- md-stretch,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-baseline,
|
||||
- lg-stretch,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-baseline,
|
||||
- xl-stretch,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-baseline,
|
||||
- xxl-stretch,
|
||||
|
||||
|
||||
!flex-align-self
|
||||
align-self-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
|
||||
|
||||
Options:
|
||||
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- baseline,
|
||||
- stretch,
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-baseline,
|
||||
- sm-stretch,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-baseline,
|
||||
- md-stretch,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-baseline,
|
||||
- lg-stretch,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-baseline,
|
||||
- xl-stretch,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-baseline,
|
||||
- xxl-stretch,
|
||||
|
||||
|
||||
|
||||
!flex-fill
|
||||
Description:
|
||||
|
||||
flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}
|
||||
|
||||
Options:
|
||||
- fill
|
||||
- sm-fill
|
||||
- md-fill
|
||||
- lg-fill
|
||||
- xl-fill
|
||||
- xxl-fill
|
||||
475
snippets/B5-Snippets/templates/snippets/flex-utility.md
Normal file
475
snippets/B5-Snippets/templates/snippets/flex-utility.md
Normal file
|
|
@ -0,0 +1,475 @@
|
|||
<!--
|
||||
Read the docs: \n https://deploy-preview-29017--twbs-bootstrap.netlify.app/docs/5.0/utilities/flex/
|
||||
|
||||
|
||||
-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-${1|flex,inline-flex,sm-flex,sm-inline-flex,md-flex,md-inline-flex,lg-flex,lg-inline-flex,xl-flex,xl-inline-flex,xxl-flex,xxl-inline-flex|} ${2|row,row-reverse,column,column-reverse,sm-row,sm-row-reverse,sm-column,sm-column-reverse,md-row,md-row-reverse,md-column,md-column-reverse,lg-row,lg-row-reverse,lg-column,lg-column-reverse,xl-row,xl-row-reverse,xl-column,xl-column-reverse,xxl-row,xxl-row-reverse,xxl-column,xxl-column-reverse|} ">
|
||||
|
||||
${3| ,!direction,!justify,!align|}
|
||||
<!-- ${|!spacing,!shadow,!color,!font,!flex,!direction,!justify,!align|} -->
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
This has x options:
|
||||
1. behavior
|
||||
2. direction
|
||||
3. justify content
|
||||
4. align-items,self,content
|
||||
5.
|
||||
|
||||
|
||||
# Display
|
||||
|
||||
d-sm--flex
|
||||
|
||||
d${1|\b,-sm,-md,-lg,-xl,-xxl|}-${2|flex,inline-flex,none,block,inline,inline-block,table,table-cell,table-row|}
|
||||
|
||||
${3| ,!direction,!justify,!align|}
|
||||
|
||||
|
||||
none
|
||||
inline
|
||||
inline-block
|
||||
block
|
||||
table
|
||||
table-cell
|
||||
table-row
|
||||
flex
|
||||
inline-flex
|
||||
|
||||
|
||||
# Justify Content
|
||||
|
||||
`!justify`
|
||||
|
||||
.justify-content-start
|
||||
.justify-content-end
|
||||
.justify-content-center
|
||||
.justify-content-between
|
||||
.justify-content-around
|
||||
.justify-content-evenly
|
||||
|
||||
Description: change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column)
|
||||
|
||||
Options:
|
||||
|
||||
justify-content${2|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${3|start,end,center,baseline,stretch,around,between,evenly|}
|
||||
|
||||
!flex-justify
|
||||
justify-content-${|start,end,center,between,around,evenly,sm-start,sm-end,sm-center,sm-between,sm-around,sm-evenly,md-start,md-end,md-center,md-between,md-around,md-evenly,lg-start,lg-end,lg-center,lg-between,lg-around,lg-evenly,xl-start,xl-end,xl-center,xl-between,xl-around,xl-evenly,xxl-start,xxl-end,xxl-center,xxl-between,xxl-around,xxl-evenly|}
|
||||
|
||||
Options:
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- between,
|
||||
- around,
|
||||
- evenly,
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-between,
|
||||
- sm-around,
|
||||
- sm-evenly,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-between,
|
||||
- md-around,
|
||||
- md-evenly,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-between,
|
||||
- lg-around,
|
||||
- lg-evenly,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-between,
|
||||
- xl-around,
|
||||
- xl-evenly,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-between,
|
||||
- xxl-around,
|
||||
- xxl-evenly,
|
||||
|
||||
|
||||
!flex-align-item
|
||||
align-items-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
|
||||
|
||||
Options:
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- baseline,
|
||||
- stretch,
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-baseline,
|
||||
- sm-stretch,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-baseline,
|
||||
- md-stretch,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-baseline,
|
||||
- lg-stretch,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-baseline,
|
||||
- xl-stretch,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-baseline,
|
||||
- xxl-stretch,
|
||||
|
||||
|
||||
# !flex-align
|
||||
|
||||
`!flex-align`
|
||||
|
||||
align-self-sm-start
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Descriptions: 1. align-content: aligns items together on the CROSS axis (horizontal) \n 2. align-content: change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column) \n 3. align-self: change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column)
|
||||
|
||||
Usage: align-${1|items,self,content|}-${2|\b,-sm,-sm,-md,-md,-lg,-lg,-xl,-xl,-xxl,-xxl|}-${3|start,end,center,baseline,stretch|}
|
||||
|
||||
align-self-${1|start,end,center,baseline,stretch,sm-start,sm-end,sm-center,sm-baseline,sm-stretch,md-start,md-end,md-center,md-baseline,md-stretch,lg-start,lg-end,lg-center,lg-baseline,lg-stretch,xl-start,xl-end,xl-center,xl-baseline,xl-stretch,xxl-start,xxl-end,xxl-center,xxl-baseline,xxl-stretch|}
|
||||
|
||||
Options:
|
||||
|
||||
- start,
|
||||
- end,
|
||||
- center,
|
||||
- baseline,
|
||||
- stretch,
|
||||
|
||||
- sm-start,
|
||||
- sm-end,
|
||||
- sm-center,
|
||||
- sm-baseline,
|
||||
- sm-stretch,
|
||||
- md-start,
|
||||
- md-end,
|
||||
- md-center,
|
||||
- md-baseline,
|
||||
- md-stretch,
|
||||
- lg-start,
|
||||
- lg-end,
|
||||
- lg-center,
|
||||
- lg-baseline,
|
||||
- lg-stretch,
|
||||
- xl-start,
|
||||
- xl-end,
|
||||
- xl-center,
|
||||
- xl-baseline,
|
||||
- xl-stretch,
|
||||
- xxl-start,
|
||||
- xxl-end,
|
||||
- xxl-center,
|
||||
- xxl-baseline,
|
||||
- xxl-stretch,
|
||||
|
||||
|
||||
# Flex-fill
|
||||
`!fill`
|
||||
Description: use on sibling elements to force them into widths equal to their content
|
||||
|
||||
Usage: flex-${1|fill,sm-fill,md-fill,lg-fill,xl-fill,xxl-fill|}
|
||||
|
||||
|
||||
|
||||
Options:
|
||||
- fill
|
||||
- sm-fill
|
||||
- md-fill
|
||||
- lg-fill
|
||||
- xl-fill
|
||||
- xxl-fill
|
||||
|
||||
|
||||
# Grow and shrink
|
||||
|
||||
`!flex-grow-shrink`
|
||||
|
||||
Description: utilities to toggle a flex item’s ability to grow to fill available space
|
||||
|
||||
Usage: flex-${1|\b,-sm,-sm,-md,-md,-lg,-lg,-xl,-xl,-xxl,-xxl|}-${2|grow,shrink|}${3|0,1|}
|
||||
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
|
||||
.flex${1|-,-sm,-md-,-lg-,-xl-,-xxl-|}{grow|shrink}-${3|0,1|}
|
||||
.flex-{grow|shrink}-1
|
||||
.flex-sm-{grow|shrink}-0
|
||||
.flex-sm-{grow|shrink}-1
|
||||
.flex-md-{grow|shrink}-0
|
||||
.flex-lg-{grow|shrink}-0
|
||||
.flex-xl-{grow|shrink}-0
|
||||
.flex-xl-{grow|shrink}-1
|
||||
.flex-xxl-{grow|shrink}-0
|
||||
.flex-xxl-{grow|shrink}-1
|
||||
|
||||
|
||||
|
||||
# Wrap
|
||||
|
||||
`!flex-wrap`
|
||||
|
||||
Description: utilities to toggle a flex item’s ability to grow to fill available space.
|
||||
|
||||
|
||||
flex-${2|\b,sm-,md-,lg-,xl-,xxl-|}${3| ,wrap,nowrap,wrap-reverse, |}
|
||||
|
||||
Options:
|
||||
.flex-nowrap
|
||||
.flex-wrap
|
||||
.flex-wrap-reverse
|
||||
.flex-sm-nowrap
|
||||
.flex-sm-wrap
|
||||
.flex-sm-wrap-reverse
|
||||
.flex-md-nowrap
|
||||
.flex-md-wrap
|
||||
.flex-md-wrap-reverse
|
||||
.flex-lg-nowrap
|
||||
.flex-lg-wrap
|
||||
.flex-lg-wrap-reverse
|
||||
.flex-xl-nowrap
|
||||
.flex-xl-wrap
|
||||
.flex-xl-wrap-reverse
|
||||
.flex-xxl-nowrap
|
||||
.flex-xxl-wrap
|
||||
.flex-xxl-wrap-reverse
|
||||
|
||||
|
||||
|
||||
|
||||
# Order
|
||||
|
||||
`!order`
|
||||
|
||||
Description: Change the visual order of specific flex items with a handful of order utilities.
|
||||
|
||||
|
||||
|
||||
order-${1|\b,sm-,md-,lg-,xl-,xxl-|}${2|1,2,3,4,5,first,last|}
|
||||
|
||||
order-first
|
||||
|
||||
Options:
|
||||
|
||||
.order-first
|
||||
.order-last
|
||||
.order-sm-first
|
||||
.order-sm-last
|
||||
.order-md-first
|
||||
.order-md-last
|
||||
.order-lg-first
|
||||
.order-lg-last
|
||||
.order-xl-first
|
||||
.order-xl-last
|
||||
.order-xxl-first
|
||||
.order-xxl-last
|
||||
|
||||
|
||||
.order-0
|
||||
.order-1
|
||||
.order-2
|
||||
.order-3
|
||||
.order-4
|
||||
.order-5
|
||||
.order-sm-0
|
||||
.order-sm-1
|
||||
.order-sm-2
|
||||
.order-sm-3
|
||||
.order-sm-4
|
||||
.order-sm-5
|
||||
.order-md-0
|
||||
.order-md-1
|
||||
.order-md-2
|
||||
.order-md-3
|
||||
.order-md-4
|
||||
.order-md-5
|
||||
.order-lg-0
|
||||
.order-lg-1
|
||||
.order-lg-2
|
||||
.order-lg-3
|
||||
.order-lg-4
|
||||
.order-lg-5
|
||||
.order-xl-0
|
||||
.order-xl-1
|
||||
.order-xl-2
|
||||
.order-xl-3
|
||||
.order-xl-4
|
||||
.order-xl-5
|
||||
.order-xxl-0
|
||||
.order-xxl-1
|
||||
.order-xxl-2
|
||||
.order-xxl-3
|
||||
.order-xxl-4
|
||||
.order-xxl-5
|
||||
|
||||
|
||||
|
||||
# border
|
||||
|
||||
`!border`
|
||||
|
||||
|
||||
Description:
|
||||
|
||||
Options:
|
||||
|
||||
rounded rounded-sm
|
||||
|
||||
|
||||
# Round
|
||||
|
||||
`!round`
|
||||
|
||||
Description:
|
||||
|
||||
Options:
|
||||
|
||||
rounded rounded-sm
|
||||
|
||||
|
||||
# align-content
|
||||
|
||||
`!flex-align-content`
|
||||
|
||||
Description: align flex items together on the cross axis. Choose from start (browser default), end, center, between, around, or stretch
|
||||
|
||||
align-content-${1|\b,sm-,md-,lg-,xl-,xxl-|}${2|start,end,center,around,stretch|}
|
||||
|
||||
|
||||
|
||||
Options:
|
||||
|
||||
.align-content-start
|
||||
.align-content-end
|
||||
.align-content-center
|
||||
.align-content-around
|
||||
.align-content-stretch
|
||||
.align-content-sm-start
|
||||
.align-content-sm-end
|
||||
.align-content-sm-center
|
||||
.align-content-sm-around
|
||||
.align-content-sm-stretch
|
||||
.align-content-md-start
|
||||
.align-content-md-end
|
||||
.align-content-md-center
|
||||
.align-content-md-around
|
||||
.align-content-md-stretch
|
||||
.align-content-lg-start
|
||||
.align-content-lg-end
|
||||
.align-content-lg-center
|
||||
.align-content-lg-around
|
||||
.align-content-lg-stretch
|
||||
.align-content-xl-start
|
||||
.align-content-xl-end
|
||||
.align-content-xl-center
|
||||
.align-content-xl-around
|
||||
.align-content-xl-stretch
|
||||
.align-content-xxl-start
|
||||
.align-content-xxl-end
|
||||
.align-content-xxl-center
|
||||
.align-content-xxl-around
|
||||
.align-content-xxl-stretch
|
||||
|
||||
# Flex Utility
|
||||
|
||||
`!flex`
|
||||
|
||||
Usage:
|
||||
d-${1|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${2|flex,inline-flex|}
|
||||
|
||||
Description:
|
||||
Create a flexbox container and transform direct children elements into flex items. \n\n Ends with an option to continue tabing out the direction utilities.
|
||||
|
||||
Options:
|
||||
|
||||
.d-flex
|
||||
.d-inline-flex
|
||||
.d-sm-flex
|
||||
.d-sm-inline-flex
|
||||
.d-md-flex
|
||||
.d-md-inline-flex
|
||||
.d-lg-flex
|
||||
.d-lg-inline-flex
|
||||
.d-xl-flex
|
||||
.d-xl-inline-flex
|
||||
.d-xxl-flex
|
||||
.d-xxl-inline-flex
|
||||
|
||||
|
||||
|
||||
|
||||
# Direction
|
||||
|
||||
`!direction`
|
||||
|
||||
Usage:
|
||||
flex${1|\b-,-sm-,-md-,-lg-,-xl-,-xxl-|}${2|row-,row-reverse,column,column-reverse|}
|
||||
|
||||
.flex-row
|
||||
.flex-row-reverse
|
||||
.flex-column
|
||||
.flex-column-reverse
|
||||
.flex-sm-row
|
||||
.flex-sm-row-reverse
|
||||
.flex-sm-column
|
||||
.flex-sm-column-reverse
|
||||
.flex-md-row
|
||||
.flex-md-row-reverse
|
||||
.flex-md-column
|
||||
.flex-md-column-reverse
|
||||
.flex-lg-row
|
||||
.flex-lg-row-reverse
|
||||
.flex-lg-column
|
||||
.flex-lg-column-reverse
|
||||
.flex-xl-row
|
||||
.flex-xl-row-reverse
|
||||
.flex-xl-column
|
||||
.flex-xl-column-reverse
|
||||
.flex-xxl-row
|
||||
.flex-xxl-row-reverse
|
||||
.flex-xxl-column
|
||||
.flex-xxl-column-reverse
|
||||
|
||||
|
||||
Description:
|
||||
|
||||
Options:
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue