mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-08 17:22:31 +03:00
Examples updates (#24898)
* fix cover nav * Improve signin visuals and alignment with that flexbox love * rewrite cover example in flexbox * lighten signin bg * first pass at pricing example * redo examples index with data file * tighten up spacing a bit * update navbar descriptions * link pricing * move that back * property order * Fix test errors. * Compress pricing.png. * add form validation example * remove that * rename that * restyle and space out * fix errors * change order * cleanup album css and styles * tweak examples index * make it a badge * options * improve sticky footer alignment * redesign example index * brand new blog layout * start new screenshots * new product example page a la apple * add email field * fix linter, remove unused blog css * hook up feather icons to start * redo dashboard * fix linting * add floating labels example * formatting * formatting * lint * fix values on select * optional input, plus input group * new dashboard image * start to reboot the offcanvas example * updated images * new offcanvas mostly implemented * linting * edit description * more description changes * - Add vertical margin to album hero buttons for when they're stacked - Adjust font-size and padding for pricing header and hero - Fix checkout's stacked column margins, plus update their check/radio markup - Update product's utilities to be responsive - Made blog cards somewhat responsive (needs a bit more work tbh) * drop leading zero * more linting * swap empty images for holder, fix border * dist the docs * navbars have no margin-bottom to begin * add css var, tweak padding for mobile * comment headers * nix commented out code * nix the navbar structure for a custom one, stack it on mobile * tweak heading button group for mobile * Removed narrow jumbotron and justified nav examples as these are easily accomplished with new components in v4 * improve card sizing on pricing * update and compress
This commit is contained in:
Mark Otto
@@ -7,7 +7,7 @@
|
||||
<meta name="author" content="">
|
||||
<link rel="icon" href="../../../../favicon.ico">
|
||||
|
||||
<title>Off Canvas Template for Bootstrap</title>
|
||||
<title>Offcanvas template for Bootstrap</title>
|
||||
|
||||
<!-- Bootstrap core CSS -->
|
||||
<link href="../../../../dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
@@ -16,27 +16,30 @@
|
||||
<link href="offcanvas.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="bg-light">
|
||||
|
||||
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<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="collapse navbar-collapse" id="navbarsExampleDefault">
|
||||
<div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
<a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Notifications</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#">Disabled</a>
|
||||
<a class="nav-link" href="#">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Switch account</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown01">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
@@ -51,75 +54,97 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="nav-scroller bg-white box-shadow">
|
||||
<nav class="nav nav-underline">
|
||||
<a class="nav-link active" href="#">Dashboard</a>
|
||||
<a class="nav-link" href="#">
|
||||
Friends
|
||||
<span class="badge badge-pill bg-light align-text-bottom">27</span>
|
||||
</a>
|
||||
<a class="nav-link" href="#">Explore</a>
|
||||
<a class="nav-link" href="#">Suggestions</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main role="main" class="container">
|
||||
<div class="d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded box-shadow">
|
||||
<img class="mr-3" src="https://getbootstrap.com/assets/brand/bootstrap-outline.svg" alt="" width="48" height="48">
|
||||
<div class="lh-100">
|
||||
<h6 class="mb-0 text-white lh-100">Bootstrap</h6>
|
||||
<small>Since 2011</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
|
||||
<div class="col-12 col-md-9">
|
||||
<p class="float-right d-md-none">
|
||||
<button type="button" class="btn btn-primary btn-sm" data-toggle="offcanvas">Toggle nav</button>
|
||||
<div class="my-3 p-3 bg-white rounded box-shadow">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Recent updates</h6>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
<div class="jumbotron">
|
||||
<h1>Hello, world!</h1>
|
||||
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=e83e8c&fg=e83e8c&size=1" alt="" class="mr-2 rounded">
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=6f42c1&fg=6f42c1&size=1" alt="" class="mr-2 rounded">
|
||||
<p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<strong class="d-block text-gray-dark">@username</strong>
|
||||
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
|
||||
</p>
|
||||
</div>
|
||||
<small class="d-block text-right mt-3">
|
||||
<a href="#">All updates</a>
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div class="my-3 p-3 bg-white rounded box-shadow">
|
||||
<h6 class="border-bottom border-gray pb-2 mb-0">Suggestions</h6>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
<div class="col-6 col-lg-4">
|
||||
<h2>Heading</h2>
|
||||
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
|
||||
<p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
</div><!--/span-->
|
||||
|
||||
<div class="col-6 col-md-3 sidebar-offcanvas" id="sidebar">
|
||||
<div class="list-group">
|
||||
<a href="#" class="list-group-item active">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
<a href="#" class="list-group-item">Link</a>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div><!--/span-->
|
||||
</div><!--/row-->
|
||||
|
||||
<hr>
|
||||
|
||||
</main><!--/.container-->
|
||||
|
||||
<footer>
|
||||
<p>© Company 2017</p>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="media text-muted pt-3">
|
||||
<img data-src="holder.js/32x32?theme=thumb&bg=007bff&fg=007bff&size=1" alt="" class="mr-2 rounded">
|
||||
<div class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
|
||||
<div class="d-flex justify-content-between align-items-center w-100">
|
||||
<strong class="text-gray-dark">Full Name</strong>
|
||||
<a href="#">Follow</a>
|
||||
</div>
|
||||
<span class="d-block">@username</span>
|
||||
</div>
|
||||
</div>
|
||||
<small class="d-block text-right mt-3">
|
||||
<a href="#">All suggestions</a>
|
||||
</small>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
@@ -128,6 +153,7 @@
|
||||
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||||
<script src="../../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../../../dist/js/bootstrap.min.js"></script>
|
||||
<script src="../../../../assets/js/vendor/holder.min.js"></script>
|
||||
<script src="offcanvas.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,63 +1,80 @@
|
||||
/*
|
||||
* Style tweaks
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden; /* Prevent scroll on narrow devices */
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px;
|
||||
}
|
||||
footer {
|
||||
padding: 30px 0;
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Off Canvas
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
@media screen and (max-width: 767.98px) {
|
||||
.row-offcanvas {
|
||||
position: relative;
|
||||
transition: all .25s ease-out;
|
||||
@media (max-width: 767.98px) {
|
||||
.offcanvas-collapse {
|
||||
position: fixed;
|
||||
top: 56px; /* Height of navbar */
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
overflow-y: auto;
|
||||
background-color: var(--gray-dark);
|
||||
transition: -webkit-transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out;
|
||||
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.row-offcanvas-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.row-offcanvas-left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.row-offcanvas-right .sidebar-offcanvas {
|
||||
right: -100%; /* 12 columns */
|
||||
}
|
||||
|
||||
.row-offcanvas-right.active .sidebar-offcanvas {
|
||||
right: -50%; /* 6 columns */
|
||||
}
|
||||
|
||||
.row-offcanvas-left .sidebar-offcanvas {
|
||||
left: -100%; /* 12 columns */
|
||||
}
|
||||
|
||||
.row-offcanvas-left.active .sidebar-offcanvas {
|
||||
left: -50%; /* 6 columns */
|
||||
}
|
||||
|
||||
.row-offcanvas-right.active {
|
||||
right: 50%; /* 6 columns */
|
||||
}
|
||||
|
||||
.row-offcanvas-left.active {
|
||||
left: 50%; /* 6 columns */
|
||||
}
|
||||
|
||||
.sidebar-offcanvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50%; /* 6 columns */
|
||||
.offcanvas-collapse.open {
|
||||
-webkit-transform: translateX(-1rem);
|
||||
transform: translateX(-1rem); /* Account for horizontal padding on navbar */
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 2.75rem;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.nav-scroller .nav {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
padding-bottom: 1rem;
|
||||
margin-top: -1px;
|
||||
overflow-x: auto;
|
||||
color: rgba(255, 255, 255, .75);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-underline .nav-link {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: .875rem;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.nav-underline .nav-link:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.nav-underline .active {
|
||||
font-weight: 500;
|
||||
color: var(--gray-dark);
|
||||
}
|
||||
|
||||
.text-white-50 { color: rgba(255, 255, 255, .5); }
|
||||
|
||||
.bg-purple { background-color: var(--purple); }
|
||||
|
||||
.border-bottom { border-bottom: 1px solid #e5e5e5; }
|
||||
|
||||
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
|
||||
|
||||
.lh-100 { line-height: 1; }
|
||||
.lh-125 { line-height: 1.25; }
|
||||
.lh-150 { line-height: 1.5; }
|
||||
|
||||
@@ -2,6 +2,6 @@ $(function () {
|
||||
'use strict'
|
||||
|
||||
$('[data-toggle="offcanvas"]').on('click', function () {
|
||||
$('.row-offcanvas').toggleClass('active')
|
||||
$('.offcanvas-collapse').toggleClass('open')
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user