base.html
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/static/slick/slick.css">
<link rel="stylesheet" href="/static/slick/slick-theme.css">
<link rel="stylesheet" href="/static/css/main.css">
<link rel="stylesheet" href="/static/css/main.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
{% block title %}{% endblock %}
<title>{{ page_title }}</title>
</head>
<body>
{% include 'menu.html' %} {% block body %}{{ heading }}{% endblock %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="/static/slick/slick.js"></script>
<script src="/static/slick/slick.min.js"></script>
<script src="/static/slick/slider.js"></script>
введите сюда код
<footer><br><br>
<div class="container" style="color:#0000CD;">
<div class="row">введите сюда код
<div class="col-md-6 col-md-pull-6">
<div class="f-box left">
<div class="phone-box">
<i class="demo-icon app-phone"></i>
<a href="tel:+7"><span>Телефон: 8 977</span> </a>
<p>115201. Москва<br><br>дом 3, офис 49</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
-->
</body>
</html>
menu.html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<strong><em><a class="nav-link" href="/">МИР ДВЕРЕЙ</a></em></strong>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/glass"><button type="button" class="btn btn-outline-primary"><em>Межкомнатные двери</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/peregorodki"><button type="button" class="btn btn-outline-primary"><em>Перегородки</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/sauna"><button type="button" class="btn btn-outline-primary"><em>Для сауны и бани</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/showers"><button type="button" class="btn btn-outline-primary"><em>Душевые ограждения</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/mirrors"><button type="button" class="btn btn-outline-primary"><em>Зеркала</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/constructions"><button type="button" class="btn btn-outline-primary"><em>Стеклянные конструкции</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand" href="/delivery"><button type="button" class="btn btn-outline-primary"><em>Доставка</em></button></a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand" href=""><button type="button" class="btn btn-outline-primary"><em> Телефон:<br>
</em></button></a>
</li>
</ul>
</div>
</nav>
Добавить комментарий
|
1 ответ
Эти товарищи за какой-то непонятной надобностью в 5-й версии добавили в дата-атрибуты префикс -bs-, и без него новый 5-й js-бандл не работает (можно пользоваться старым, 4-м). Теперь нужно писать data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet">
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<strong><em><a class="nav-link" href="/">МИР ДВЕРЕЙ</a></em></strong>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/glass"><button type="button" class="btn btn-outline-primary"><em>Межкомнатные двери</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/peregorodki"><button type="button" class="btn btn-outline-primary"><em>Перегородки</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/sauna"><button type="button" class="btn btn-outline-primary"><em>Для сауны и бани</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/showers"><button type="button" class="btn btn-outline-primary"><em>Душевые ограждения</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/mirrors"><button type="button" class="btn btn-outline-primary"><em>Зеркала</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<a class="navbar-brand" href="/constructions"><button type="button" class="btn btn-outline-primary"><em>Стеклянные конструкции</em></button></a>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand" href="/delivery"><button type="button" class="btn btn-outline-primary"><em>Доставка</em></button></a>
</li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="navbar-brand" href=""><button type="button" class="btn btn-outline-primary"><em> Телефон:<br>
</em></button></a>
</li>
</ul>
</div>
</nav>
-
Спасибо большое! Меню заработала. Странно как-то. Я его внес в свой код и он не работает, а сделал другой hnml тест, там все работает. Не знаете в чем еще может быть причина?– Игорёк24 мар 2021 в 9:12
-
@Игорёк, ещё причина может быть в том, что бутстрап требует подключения jquery - у Вас подключена библиотека? 24 мар 2021 в 9:14
-
Тоже про это слышал. Вроде нет, точно не могу сказать. Я новичок и не могу точно на все отвечать. Через pip install jquery или он еще где-то в html должен быть?– Игорёк24 мар 2021 в 11:56
-
@Игорёк я в Питон не умею, так что насчет pip install ничего сказать не могу. Подключите туда же, куда Вы бутстраповский бандл подключаете (только перед ним). 24 мар 2021 в 12:05
-