Я изо всех сил пытаюсь понять, почему следующий код не работает правильно.
Кажется, что скрипты .js в нижнем колонтитуле не работают вообще, и все 3, включая .css, быливзяты прямо из 'GetBoostrap' сегодня и являются их предлагаемыми версиями, поэтому не знаю, почему они не работают, когда они локально хранятся на моем ПК, и все пути к файлам, показанные в коде, верны. CSS работает нормально и использует тот же стиль пути, что и файлы .js. Кроме того, порядок файлов .js в точности соответствует инструкциям GetBootstrap.
Используются следующие версии скриптов: (и все самые современные доступные версии) :
- Bootstrap.css - v4.3.1
- Jquery.js - v3.3.1
- Popper.js - v1.14.7
- Bootstrap.js- v4.3.1
Пожалуйста, не обращайте внимания на фиктивный текст, используемый в середине - Это просто, чтобы добавить некоторую структуру на страницу.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="col-xs-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h2>Jumbatron</h2>
<h6>This is an example of the use of a Jumbatron on the page. It can hold all sorts of content and is a good way to break up long sections of page content or draw a users eye to specific content that you would like them to see. The title in this Jumbatron is using the H2 tag where as the main body of content is using the H6 tag.</h6>
</div>
</div>
<div class="container">
<div class="col-xs-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam neque risus, accumsan vestibulum facilisis in, elementum at arcu. Vestibulum maximus egestas justo, nec euismod elit auctor et. Nam a enim neque. Nullam urna mauris, scelerisque sed rhoncus at, porta at ligula. Cras feugiat, neque non tempus congue, est neque efficitur velit, eget luctus lacus enim luctus lorem. Pellentesque a justo a ligula viverra fringilla vel id metus. Integer tempor pharetra dictum. Suspendisse potenti.</p>
<p>Morbi ultricies orci eros. Fusce iaculis leo in sapien suscipit, ac eleifend nibh viverra. Pellentesque dictum bibendum quam eu pretium. In luctus interdum consectetur. Aenean blandit eros in turpis aliquet imperdiet. Fusce finibus odio non dui volutpat rhoncus. Praesent sed congue orci. Mauris rutrum finibus nisi, vel porttitor odio cursus et. Sed eget sem nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus magna ex, sagittis sodales odio consectetur sit amet. Cras ullamcorper molestie turpis ac porttitor. Aenean pretium augue velit, nec laoreet magna elementum a. Suspendisse nec tincidunt nunc. Nullam porta mi non neque pharetra congue.</p>
<p>Nunc non porttitor enim. Sed quis arcu risus. Sed eleifend, justo eu volutpat posuere, metus est placerat sem, vel elementum felis ante eget dolor. Ut at urna metus. Duis convallis elit ut facilisis tristique. Etiam eget pulvinar mi. Nullam vitae tempor ante, eget venenatis ipsum. Fusce lobortis sollicitudin tortor eu pulvinar. Suspendisse potenti. Aenean id ante quis velit dapibus commodo. Mauris convallis venenatis odio, eu tincidunt enim rhoncus ut. Nunc commodo urna sapien, quis interdum turpis accumsan fermentum. Quisque auctor velit vel tincidunt interdum. Proin vehicula, justo nec lacinia rutrum, mauris risus mollis quam, ut mattis ex turpis in augue. Suspendisse elit nisl, semper quis erat a, congue egestas tortor. Suspendisse ultrices elementum consectetur.</p>
<p>Suspendisse lacus neque, ornare eget blandit vel, elementum vitae ex. Curabitur eros metus, ullamcorper et finibus et, elementum in mi. Suspendisse mattis ex id libero pretium aliquam. Ut posuere, erat vitae aliquet ornare, purus urna laoreet arcu, non consectetur metus purus et eros. Etiam nec odio ex. Donec sed lorem lobortis sapien sagittis bibendum. Fusce lorem enim, efficitur eget ipsum vitae, tempus pretium risus. Mauris nisl justo, faucibus et magna cursus, iaculis egestas ligula. Cras iaculis consequat dolor id pretium. Sed vitae posuere lorem.</p>
<p>Maecenas in lacus sit amet elit malesuada consectetur. Etiam enim tellus, mattis sed justo vitae, tincidunt congue velit. Nulla vitae elementum mauris. Donec sit amet suscipit neque. Aenean odio nulla, tristique et cursus ornare, laoreet ut velit. Sed tortor sapien, condimentum ac scelerisque sit amet, lobortis a tellus. Cras aliquam fermentum nisl, quis efficitur elit tempus et. In tincidunt purus sit amet nisi malesuada blandit. Suspendisse suscipit felis in justo tincidunt viverra. Mauris sagittis rutrum ligula, posuere dignissim sem laoreet id. Aliquam velit magna, sodales non pellentesque sit amet, dapibus ut mauris. Cras vel tristique dui.</p>
</div>
</div>
<footer>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</footer>
</body>
</html>