Попробуйте это:
Использование <script type="text/javascript" src="JS/main.js"></script> в качестве ссылки на ваш HTML, при условии, что каталог JS находится в том же каталоге, что и ваш файл index.html.
Поместите ваши ссылки на внешние материалы в заголовок HTML. (Из вашего поста было неясно, сделали ли вы это или нет.) Вам не нужно помещать их в конец HTML, если вы используете $(document).ready(function(){ //do stuff here });, который вы должны использовать в любом случае, потому что jQuery уже включен в ваш проект, так как вы ' использовать Bootstrap. (Вы можете объявить свою тестовую функцию вне вызова document ready, и должны.)
Я почти уверен, что используемая вами ссылка на Bootstrap CSS была повреждена (или что-то в этом роде), поэтому я изменил ее, чтобы использовать MaxCDN.
Полагаю, ваш CSS тоже не работает. Попробуйте изменить что-то очевидное, чтобы проверить. «..» в ссылке означает перемещение «назад» на один каталог, поэтому, скорее всего, браузер ищет этот файл где-то, что он не существует.
Взгляните на this для получения дополнительной информации о том, как создавать ссылки на файлы, и попробуйте попробовать HTML-валидатор .
Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или если это не работает для вас. Когда я начинал веб-разработку, я тратил часов , пытаясь разобраться в этом.
Так ваш HTML будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="../CSS/main1.css" rel="stylesheet" />
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- BOOTSTRAP -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
<script type="text/javascript" src="JS/main.js"></script>
<?php require 'scripts.php'; ?>
</head>
<header>
<?php include 'header.php'; ?>
</header>
<body>
<div class="container-fluid d-block d-sm-none">
<!-- LAYOUT FOR MOBILE -->
<div class="row">
<div class="col">
<button class="s-button" id="show-login" onclick="test()">Login</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="s-button">Register</button>
</div>
</div>
</div>
</body>
</html>
Для получения бонусных баллов: , если вам нужно увидеть консоль или узнать что-нибудь о том, что происходит в Firefox или Chrome, нажмите ctrl shift i и нажмите вокруг. Если вы считаете, что что-то пошло не так, просто нажмите кнопку обновления.