这是我的第一个项目与建设一个网站。我一直按照这些 教程. 我浏览了Bootstrap组件页面,发现一个Carousel方法 (仅限幻灯片) 我想使用的。我把它复制并粘贴到我的代码中。第一张图片显示出来,这是正确的,因为它是活动的,但旋转木马并没有滑动到下一张图片。第一个代码块显示的是一个总结的版本。第二个代码块是在运行 python manage.py runserver
. 第三块代码是我打开IP地址链接的时候。我不知道我做错了什么。有什么建议吗?如果你需要一些更多的信息,请告诉我。
<!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.comdocs4.4getting-startedintroduction#js。