{% extends ‘tools/base.html’ %} {% load django_bootstrap5 %} {% block content %} <!– tools/upload.html –> <h2 class=”h2″>サーバーへファイルをバックアップ</h2> <form action=”” method=”post” enctype=”multipart/form-data”> {% csrf_token %} <input type=”file” name=”files” multiple> <input type=”submit” value=”Upload”> </form> {% endblock %}

2024年6月8日

あなたの提供されたコードは、tools/base.html を拡張している tools/upload.html の一部です。このコードにBootstrap 5を適用するには、Bootstrapのクラスやスタイルをフォームに追加します。

以下は、フォームにBootstrap 5のクラスやスタイルを追加する例です。

html
{% extends 'tools/base.html' %}
{% load django_bootstrap5 %}

{% block content %}
  <!-- tools/upload.html -->
  <h2 class="h2">サーバーへファイルをバックアップ</h2>
  <form action="" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="mb-3">
          <label for="files" class="form-label">ファイルを選択してください</label>
          <input type="file" class="form-control" id="files" name="files" multiple>
      </div>
      <button type="submit" class="btn btn-primary">Upload</button>
  </form>
{% endblock %}

上記の例では、form-control クラスを使用してフォームの入力フィールドにBootstrapのスタイルを適用し、btn btn-primary クラスを使用してボタンにプライマリボタンのスタイルを追加しています。

このコードを使用する前に、プロジェクトにBootstrap 5のライブラリが正しく導入されていることを確認してください。必要に応じて、Bootstrap 5のCSSとJavaScriptファイルをプロジェクトに追加してください。