Skip to content

Commit 6f1f7ed

Browse files
davidtmillerdavidtmiller
authored
Merge pull request #64 from StartBootstrap/develop
Bootstrap 5 Update
2 parents 90334eb + 70535c5 commit 6f1f7ed

File tree

8 files changed

+7673
-9619
lines changed

8 files changed

+7673
-9619
lines changed

‎dist/css/styles.css‎

Lines changed: 7087 additions & 6254 deletions
Large diffs are not rendered by default.

‎dist/index.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,31 @@
1313
<body id="page-top">
1414
<!-- Navigation-->
1515
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
16-
<div class="container">
17-
<a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
18-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
16+
<div class="container px-4">
17+
<a class="navbar-brand" href="#page-top">Start Bootstrap</a>
18+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
1919
<div class="collapse navbar-collapse" id="navbarResponsive">
20-
<ul class="navbar-nav ml-auto">
21-
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
22-
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
23-
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
20+
<ul class="navbar-nav ms-auto">
21+
<li class="nav-item"><a class="nav-link" href="#about">About</a></li>
22+
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
23+
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
2424
</ul>
2525
</div>
2626
</div>
2727
</nav>
28-
<header class="bg-primary text-white">
29-
<div class="container text-center">
30-
<h1>Welcome to Scrolling Nav</h1>
31-
<p class="lead">A landing page template freshly redesigned for Bootstrap 4</p>
28+
<!-- Header-->
29+
<header class="bg-primary bg-gradient text-white">
30+
<div class="container px-4 text-center">
31+
<h1 class="fw-bolder">Welcome to Scrolling Nav</h1>
32+
<p class="lead">A functional Bootstrap 5 boilerplate for one page scrolling websites</p>
33+
<a class="btn btn-lg btn-light" href="#about">Start scrolling!</a>
3234
</div>
3335
</header>
36+
<!-- About section-->
3437
<section id="about">
35-
<div class="container">
36-
<div class="row">
37-
<div class="col-lg-8 mx-auto">
38+
<div class="container px-4">
39+
<div class="row gx-4 justify-content-center">
40+
<div class="col-lg-8">
3841
<h2>About this page</h2>
3942
<p class="lead">This is a great place to talk about your webpage. This template is purposefully unstyled so you can use it as a boilerplate or starting point for you own landing page designs! This template features:</p>
4043
<ul>
@@ -47,20 +50,22 @@ <h2>About this page</h2>
4750
</div>
4851
</div>
4952
</section>
53+
<!-- Services section-->
5054
<section class="bg-light" id="services">
51-
<div class="container">
52-
<div class="row">
53-
<div class="col-lg-8 mx-auto">
55+
<div class="container px-4">
56+
<div class="row gx-4 justify-content-center">
57+
<div class="col-lg-8">
5458
<h2>Services we offer</h2>
5559
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut optio velit inventore, expedita quo laboriosam possimus ea consequatur vitae, doloribus consequuntur ex. Nemo assumenda laborum vel, labore ut velit dignissimos.</p>
5660
</div>
5761
</div>
5862
</div>
5963
</section>
64+
<!-- Contact section-->
6065
<section id="contact">
61-
<div class="container">
62-
<div class="row">
63-
<div class="col-lg-8 mx-auto">
66+
<div class="container px-4">
67+
<div class="row gx-4 justify-content-center">
68+
<div class="col-lg-8">
6469
<h2>Contact us</h2>
6570
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero odio fugiat voluptatem dolor, provident officiis, id iusto! Obcaecati incidunt, qui nihil beatae magnam et repudiandae ipsa exercitationem, in, quo totam.</p>
6671
</div>
@@ -69,13 +74,10 @@ <h2>Contact us</h2>
6974
</section>
7075
<!-- Footer-->
7176
<footer class="py-5 bg-dark">
72-
<div class="container"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2021</p></div>
77+
<div class="container px-4"><p class="m-0 text-center text-white">Copyright &copy; Your Website 2021</p></div>
7378
</footer>
7479
<!-- Bootstrap core JS-->
75-
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
76-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
77-
<!-- Third party plugin JS-->
78-
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
80+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
7981
<!-- Core theme JS-->
8082
<script src="js/scripts.js"></script>
8183
</body>

‎dist/js/scripts.js‎

Lines changed: 25 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
11
/*!
2-
* Start Bootstrap - Scrolling Nav v4.3.0 (https://startbootstrap.com/template/scrolling-nav)
2+
* Start Bootstrap - Scrolling Nav v5.0.0 (https://startbootstrap.com/template/scrolling-nav)
33
* Copyright 2013-2021 Start Bootstrap
44
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-scrolling-nav/blob/master/LICENSE)
55
*/
6-
(function ($) {
7-
"use strict"; // Start of use strict
6+
//
7+
// Scripts
8+
//
89

9-
// Smooth scrolling using anime.js
10-
$('a.js-scroll-trigger[href*="#"]:not([href="#"])').on('click', function () {
11-
if (
12-
location.pathname.replace(/^\//, "") ==
13-
this.pathname.replace(/^\//, "") &&
14-
location.hostname == this.hostname
15-
) {
16-
var target = $(this.hash);
17-
target = target.length ?
18-
target :
19-
$("[name=" + this.hash.slice(1) + "]");
20-
if (target.length) {
21-
anime({
22-
targets: 'html, body',
23-
scrollTop: target.offset().top - 56,
24-
duration: 1000,
25-
easing: 'easeInOutExpo'
26-
});
27-
return false;
28-
}
29-
}
30-
});
10+
window.addEventListener('DOMContentLoaded', event => {
3111

32-
// Closes responsive menu when a scroll trigger link is clicked
33-
$(".js-scroll-trigger").on('click', function () {
34-
$(".navbar-collapse").collapse("hide");
35-
});
12+
// Activate Bootstrap scrollspy on the main nav element
13+
const mainNav = document.body.querySelector('#mainNav');
14+
if (mainNav) {
15+
new bootstrap.ScrollSpy(document.body, {
16+
target: '#mainNav',
17+
offset: 74,
18+
});
19+
};
3620

37-
// Activate scrollspy to add active class to navbar items on scroll
38-
$("body").scrollspy({
39-
target: "#mainNav",
40-
offset: 56,
21+
// Collapse responsive navbar when toggler is visible
22+
const navbarToggler = document.body.querySelector('.navbar-toggler');
23+
const responsiveNavItems = [].slice.call(
24+
document.querySelectorAll('#navbarResponsive .nav-link')
25+
);
26+
responsiveNavItems.map(function (responsiveNavItem) {
27+
responsiveNavItem.addEventListener('click', () => {
28+
if (window.getComputedStyle(navbarToggler).display !== 'none') {
29+
navbarToggler.click();
30+
}
31+
});
4132
});
4233

43-
})(jQuery); // End of use strict
34+
});

0 commit comments

Comments
 (0)