Django Bootstrap 旋转木马不会骑
Django Bootstrap Carousel wont ride
这是我建立网站的第一个项目。我一直在关注这些我想用的tutorials. I browsed through the Bootstrap components page and found a Carousel method (slides only)。我将其复制并粘贴到我的代码中。第一张图片显示正确,因为它处于活动状态,但轮播不会滑动到下一张图片。第一个代码块显示了一个汇总版本。第二段代码在运行python manage.py runserver
之后。第三段代码是当我打开IP地址link时。我不确定我做错了什么。有什么建议么?如果您需要更多信息,请告诉我。
<!DOCTYPE html>
<html lang="en">
<head>
<title>AeroTract</title>
<meta charset="utf-8" />
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#FFF8DC"> <!-- Main page background color -->
<div class="container-fluid" style="min-height:95%; "> <!-- Footer Height -->
<div class="row">
<div class = "col-sm-2"> </div>
<div class="col-sm-8">
<br>
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/Forestry.png' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Agricultural.png' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Industrial.png' %}" alt="Third slide">
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</body>
</html>
(base) C:\Users\name\PycharmProjects\Django_tutorials\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 07, 2020 - 14:46:06
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://#########/
Quit the server with CTRL-BREAK.
[07/May/2020 14:46:42] "GET / HTTP/1.1" 200 3408
您只包含了 bootstrap 中的 css。我相信你也需要javascript。
您可能想要添加这些脚本:
https://getbootstrap.com/docs/4.4/getting-started/introduction/#js
这是我建立网站的第一个项目。我一直在关注这些我想用的tutorials. I browsed through the Bootstrap components page and found a Carousel method (slides only)。我将其复制并粘贴到我的代码中。第一张图片显示正确,因为它处于活动状态,但轮播不会滑动到下一张图片。第一个代码块显示了一个汇总版本。第二段代码在运行python manage.py runserver
之后。第三段代码是当我打开IP地址link时。我不确定我做错了什么。有什么建议么?如果您需要更多信息,请告诉我。
<!DOCTYPE html>
<html lang="en">
<head>
<title>AeroTract</title>
<meta charset="utf-8" />
{% load static %}
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type = "text/css"/>
<meta name="viewport" content = "width=device-width, initial-scale=1.0">
<style type="text/css">
html,
body {
height:100%
}
</style>
</head>
<body class="body" style="background-color:#FFF8DC"> <!-- Main page background color -->
<div class="container-fluid" style="min-height:95%; "> <!-- Footer Height -->
<div class="row">
<div class = "col-sm-2"> </div>
<div class="col-sm-8">
<br>
<div id="mainCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/Forestry.png' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Agricultural.png' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/Industrial.png' %}" alt="Third slide">
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</body>
</html>
(base) C:\Users\name\PycharmProjects\Django_tutorials\mysite>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 07, 2020 - 14:46:06
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://#########/
Quit the server with CTRL-BREAK.
[07/May/2020 14:46:42] "GET / HTTP/1.1" 200 3408
您只包含了 bootstrap 中的 css。我相信你也需要javascript。 您可能想要添加这些脚本:
https://getbootstrap.com/docs/4.4/getting-started/introduction/#js