У меня есть форма, которая имеет классы Bootstrap 4 CSS. Я хочу добавить код загрузки изображения jquery в мою форму, но в этих кодах есть классы Bootstrap 3. CSS.
Я поместил свой блок jquery в файл image_block.html с тегом {% load 'image_block.html %}. Но я загружаю image_block.html в свой файл form.html. Классы BS3 уничтожают мои классы BS4, и страница уничтожается!
image_block.html:
{% load upload_tags %}
<head>
<!-- Bootstrap styles -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Generic page styles -->
<link rel="stylesheet" href="/static/jquery-upload/css/style.css">
<!-- blueimp Gallery styles -->
<link rel="stylesheet" href="/static/jquery-upload/css/blueimp-gallery.min.css">
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="/static/jquery-upload/css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="/staticjquery-upload//css/jquery.fileupload-ui-noscript.css"></noscript>
</head>
{% block upload %}
<div class="container">
<!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<!--<noscript><input type="hidden" name="redirect" value="http://blueimp.github.io/jQuery-File-Upload/"></noscript>-->
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="file" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The loading indicator is shown during file processing -->
<span class="fileupload-loading"></span>
</div>
<!-- The global progress information -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
</div>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
{% upload_js %}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/static/jquery-upload/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="/static/jquery-upload/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/static/jquery-upload/js/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="/static/jquery-upload/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="/static/jquery-upload/js/bootstrap.min.js"></script>
<!-- blueimp Gallery script -->
<script src="/static/jquery-upload/js/jquery.blueimp-gallery.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/static/jquery-upload/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/static/jquery-upload/js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="/static/jquery-upload/js/main.js"></script>
<script src="/static/jquery-upload/js/locale.js"></script>
<script src="/static/jquery-upload/js/csrf.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ -->
<!--[if gte IE 8]>
<script src="/static/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
{% endblock upload %}
И это часть того, куда я помещаюполе изображения form.html:
{% extends "base/layout.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% load upload_tags %}
{% block body %}
<div class="form-group row">
<label class="col-sm-3 col-form-label">Images</label>
<div class="col-sm-8">
{% block upload %}
{% include "product/components/jquery-components/image-block.html" %}
{% endblock upload %}
</div>
</div>
{% endblock body %}
Я хочу использовать свой файл загрузки jquery с собственным CSS (BS3 и другой файл CSS) в {% block upload%}, а другие компоненты моей формы использовать с собственным CSS(BS4 и другой файл CSS). Это возможно?