Bootstrap lässt sich irgendwie nicht über einbinden...
Verfasst: Donnerstag 26. Mai 2022, 11:54
Ich habe vor, Bootstrapdateien für ein Carousel mit {% load static %} einzubinden. Das möchte ich so machen:
Den collectstatic-Befel habe ich ausgeführt. Dies scheint nichts zu bringen, weswege ich das jetzt so gemacht hab:
Problem ist: Zweiteres geht, ersteres nicht. An der Verzeichnisstruktur von allem, was unter dem static-Folder ist, kann keinen Pfadfehler erkennen.
Kann es sein, dass da Bootstrap und jQuery nicht kompatibel sind? Mit jQuery-3.3.1.min.js geht es auch nicht. So sieht meine base.html aus, welche dann von der Templatedatei erweitert wird:
Code: Alles auswählen
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
Code: Alles auswählen
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Kann es sein, dass da Bootstrap und jQuery nicht kompatibel sind? Mit jQuery-3.3.1.min.js geht es auch nicht. So sieht meine base.html aus, welche dann von der Templatedatei erweitert wird:
Code: Alles auswählen
<!doctype html>
<html>
<head>
<title>myworld</title>
<meta charset="utf-8">
<!--
{% load static %}
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
body {
background-color: lightgreen;
font-size:21px;
font-weight:bold;
margin:15px 0px 0px 15px;
}
</style>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>