Django 模式 bootstrap 不显示

Question

我被这个问题堵了好几天了。我在项目根文件夹中有 bootstrap 3.3.7。我在 django 模板中呈现一些按钮，单击时应该打开模态 windows。但是模态功能不起作用。我正在关注此页面上显示的示例： https://www.quackit.com/bootstrap/bootstrap_3/tutorial/bootstrap_modal.cfm

模板代码如下：

    <h6>
      <button type="button" class="btn btn-sm" data-toggle="modal" data-target="#smallShoes">
        DCCRP 2102
      </button>
      
      <!-- The modal -->
      <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
      <div class="modal-dialog modal-sm">
      <div class="modal-content">

      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
      </button>
      <h4 class="modal-title" id="modalLabelSmall">Modal Title</h4>
      </div>

      <div class="modal-body">
      Modal content...
      </div>

      </div>
      </div>
      </div>
    </h6>

在我的 base.html ... 部分中，我有以下内容：

  {% load static %}
  <link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static '/custom/custom.css' %}">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

谢谢！

Answer 1

  {% load static %}
  <link rel="stylesheet" href="{% static '/boot/css/bootstrap.css' %}">

  <!-- Add additional CSS in static file -->
  {% load static %}
  <link rel="stylesheet" href="{% static '/custom/custom.css' %}">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  // add this.
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Django 模式 bootstrap 不显示

Django modal bootstrap not displaying

django

bootstrap-modal

twitter-bootstrap-3