zostera / django-bootstrap4 Goto Github PK
View Code? Open in Web Editor NEWBootstrap 4 integration with Django.
Home Page: https://django-bootstrap4.readthedocs.io/
License: BSD 3-Clause "New" or "Revised" License
Bootstrap 4 integration with Django.
Home Page: https://django-bootstrap4.readthedocs.io/
License: BSD 3-Clause "New" or "Revised" License
Hi,
Im getting a error when django tries to load icons.svg from aws s3.
The error i get is "Unsafe attempt to load URL from frame with URL . Domains, protocols and ports must match."
Its trying to load from https://bucket_name.s3.amazonaws.com/static/djangocms_bootstrap4/sprites/icons.svg any idea why?
django version: 1.11
python version: 3.6.1 x64
the traceback as follows:
Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x0000000003F592F0> Traceback (most recent call last): File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\utils\autoreload.py", line 228, in wrapper fn(*args, **kwargs) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\core\management\commands\runserver.py", line 117, in inner_run autoreload.raise_last_exception() File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\utils\autoreload.py", line 251, in raise_last_exception six.reraise(*_exception) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\utils\six.py", line 685, in reraise raise value.with_traceback(tb) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\utils\autoreload.py", line 228, in wrapper fn(*args, **kwargs) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\__init__.py", line 27, in setup apps.populate(settings.INSTALLED_APPS) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\apps\registry.py", line 116, in populate app_config.ready() File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\admin\apps.py", line 23, in ready self.module.autodiscover() File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\admin\__init__.py", line 26, in autodiscover autodiscover_modules('admin', register_to=site) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\utils\module_loading.py", line 50, in autodiscover_modules import_module('%s.%s' % (app_config.name, module_to_search)) File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\importlib\__i nit__.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "<frozen importlib._bootstrap>", line 978, in _gcd_import File "<frozen importlib._bootstrap>", line 961, in _find_and_load File "<frozen importlib._bootstrap>", line 950, in _find_and_load_unlocked File "<frozen importlib._bootstrap>", line 655, in _load_unlocked File "<frozen importlib._bootstrap_external>", line 678, in exec_module File "<frozen importlib._bootstrap>", line 205, in _call_with_frames_removed File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\admin\__init__.py", line 5, in <module> from django.contrib.gis.admin.options import GeoModelAdmin, OSMGeoAdmin File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\admin\options.py", line 2, in <module> from django.contrib.gis.admin.widgets import OpenLayersWidget File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\admin\widgets.py", line 3, in <module> from django.contrib.gis.gdal import GDALException File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\gdal\__init__.py", line 28, in <module> from django.contrib.gis.gdal.datasource import DataSource File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\gdal\datasource.py", line 39, in <module> from django.contrib.gis.gdal.driver import Driver File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\gdal\driver.py", line 5, in <module> from django.contrib.gis.gdal.prototypes import ds as vcapi, raster as rcapi File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\gdal\prototypes\ds.py", line 9, in <module> from django.contrib.gis.gdal.libgdal import GDAL_VERSION, lgdal File "C:\Users\dollar\AppData\Local\Programs\Python\Python36\lib\site-packages \django\contrib\gis\gdal\libgdal.py", line 45, in <module> % '", "'.join(lib_names) django.core.exceptions.ImproperlyConfigured: Could not find the GDAL library (tr ied "gdal201", "gdal20", "gdal111", "gdal110", "gdal19"). Is GDAL installed? If it is, try setting GDAL_LIBRARY_PATH in your settings.
Hi,
Thanks for django-bootstrap :)
Bootstrap 4.1 is out, any chance of a new release onto pypi ?
https://blog.getbootstrap.com/2018/04/09/bootstrap-4-1/
Cheers
S
django-bootstrap4 versions 0.0.6
django version 2.0.2
Is there a way to set a cosmetic default selection for a select field.
For example:
<select>
<option value="" selected disabled hidden>Choose here</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
Right now my form looks like this:
<div class="row">
<div class="col">
{% bootstrap_messages %}
<form action="{% url 'foo-br' %}?{{ url_args }}" method="POST" class="form">
{% csrf_token %}
{% bootstrap_form form %}
{% buttons %}
<button type="submit" class="btn btn-primary">Submit</button>
{% endbuttons %}
</form>
</div>
</div>
so I'm using django-bootstrap4 for all my heavy lifting.
I'm thinking of removing the template tags for inclusion of JS and CSS. When using local source/dist a dev should know what to include, may use webpack or another tool to combine static files, et cetera. So the only viable use case for including through tags would be CDN. This would burden us with keeping up with Bootstrap releases to adjust CDN URL's and signatures.
Any input on this matter?
I pass addon_after="%"
when creating a form field (with layout="horizontal"
, if that matters), and no addon appears.
I'd like to show field errors at the field, instead of at the top of the form. (In horizontal mode, if it matters).
I've looked at the source for FormRendered a bit but it doesn't seem there's a way to do this, is there?
As per the title, it looks as if the form classes have had a few name changes in v4.
What was .control-label
is now .form-control-label
.
Bootstrap 4 Docs reference: https://getbootstrap.com/docs/4.0/components/forms/#form-groups
Will this be updated for BS4 final any time soon? Just curious. Would like to use it.
How change the field_class of input for use readonly plain text class "form-control-plaintext" ?
https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text
Please address the breaking changes in beta 3.
https://getbootstrap.com/docs/4.0/migration/#beta-3-changes
One example would be the addons which changed a lot.
Input group addons are now specific to their placement relative to an input. We’ve dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append. You must explicitly use an append or a prepend now, simplifying much of our CSS.
It seems only 0.0.1 is available on pypi: https://pypi.python.org/pypi/django-bootstrap4
Note that this process can be automated with travis:
See if we can work something out with @bitkits.
With the release, should we switch to the BSD 3-clause license to match what Django uses?
If I have the following in my template:
{% bootstrap_field form.shortlink_suffix layout='horizontal' addon_before='some text' %}
It renders the addon text at the top, out of alignment with the rest of the field. Inspecting the output shows
the span class is "input-group-addon". Setting the addon_before_class to "input-group-text" fixes the alignment, but now the text is surrounded by a grey box. Possibly the default class of input-group-addon is incorrect?
I have ran into this CDN code that creates a slider handler with bootstrap and I was wondering about if is there an option to include it with django-bootstrap4 using Django tags?
Docs still use django-bootstrap3
everywhere, for example in installation instructions.
(Are you interested in PRs here?)
Since Bootstrap 4 ships without an icon library, all support for icons will be removed.
I suggest taking a look at zostera/django-fa if you want to use Font Awesome icons.
The code in templatetags/bootstrap4
(https://github.com/zostera/django-bootstrap4/blob/master/bootstrap4/templatetags/bootstrap4.py#L33) has a bootstrap_setting filter which seems quite handy to me when I want to extend the bootstrap4 settings dictionary with some more project related configuration. The comment says "Please consider this filter private for now, do not use it in your own templates." What's the reason for this? It works quite fine, even if it would be nicer to have it as a simple_tag though
The template tag {% bootstrap_jquery_url %}
currently calls the slim version of jQuery, which doesn't support quite a few features of the full jQuery version. See here:
https://github.com/zostera/django-bootstrap4/blob/master/bootstrap4/bootstrap.py#L19
I'm happy to issue a P.R. to include the full version of jQuery, but it raises the question of which direction to head:
Option (1): make the existing template tag point to the full version.
Option (2): make the existing template tag point to the full version, and add another template tag called {% bootstrap_jquery_slim_url %}
Option (3): add a template tag called {% bootstrap_jquery_full_url %}
that points to the full version.
django-bootstrap3
currently points to the full version of jQuery.
Thoughts?
I'd like to incorporate fix for #39. Can we get a new PyPi release soon?
While debugging a template that derives from bootstrap4.html, I noticed that the html lang attribute is not set even if I set it in my settings.py.
I'm not really sure, where this LANGUAGE_CODE should come from without loading i18n before, so I changed the bootstrap4.html like this:
<!DOCTYPE html>
{% load bootstrap4 %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<html{% if LANGUAGE_CODE %} lang="{{ LANGUAGE_CODE }}"{% endif %}>
which works for me. Perhaps this could be further optimized to check if i18n is enabled but I'm not sure how to do this at the moment.
Bootstrap 4 uses a combination of .form-text
and .text-muted
to replace the old .help-block
class for specifying help text on form elements. PR #49 makes this change in the django-bootstrap4 project code, but it keeps the help text in a <div>
element, whereas the Bootstrap docs use a <small>
instead (https://getbootstrap.com/docs/4.0/components/forms/#help-text), which renders smaller text.
The lack of a semantic classname (.help-block
was great) makes it harder to isolate and target help text but it's still possible. .form-group .form-text.text-muted {font-size: 80%}
works for me, but I wonder if it would be better to change the field_help_text_and_errors.html
template to render a <small>
instead of a <div>
, so that a {% bootstrap_field %}
template tag for a field with help text will match what is shown in the Bootstrap examples.
Should we target Python 3.4+ only? Or 2.7 and 3.4+?
Django currently supports 2.7 and 3.4+, however, v2.0 which will be released towards the end of the year will be Python 3 only, and I bet it'll beat Bootstrap 4 into general release.
Dates and changes in HISTORY.rst do not match PyPI.org
Hi,
I wasn't able to find it in the documentation, how can I change what classes a Django form element uses?
Thanks
I'm triying to use django-bootstrap4
in my project but I have a problem. If I send a form with errors when the view go to render fail. The project try to load a template but he doesn't find it, the template is bootstrap4/field_help_text_and_errors.html
.
I follow the guide to use this but I don't have any idea that i'm making bad. I need to download the template and add this templates to my project?
Thanks and sorry for my english!
Hi,
i'm working on an opensource project and i want to make it RTL, the project uses django-bootstrap4.
is there any way to integrate rtl-bootstrap with django-bootstrap4 ?
thanks
PS C:\Users\user\Downloads\django-bootstrap4-master\django-bootstrap4-master\demo> python manage.py runserver Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x060BFE88> Traceback (most recent call last): File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\utils\autoreload.py", line 225, in wrapper fn(*args, **kwargs) File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\core\management\commands\runserver.py", line 112, in inner_run autoreload.raise_last_exception() File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\utils\autoreload.py", line 248, in raise_last_exception raise _exception[1] File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\core\management\__init__.py", line 327, in execute autoreload.check_errors(django.setup)() File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\utils\autoreload.py", line 225, in wrapper fn(*args, **kwargs) File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\__init__.py", line 24, in setup apps.populate(settings.INSTALLED_APPS) File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\apps\registry.py", line 89, in populate app_config = AppConfig.create(entry) File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\site-packages\django\apps\config.py", line 90, in create module = import_module(entry) File "C:\Users\user\AppData\Local\Programs\Python\Python36-32\lib\importlib\__init__.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "<frozen importlib._bootstrap>", line 994, in _gcd_import File "<frozen importlib._bootstrap>", line 971, in _find_and_load File "<frozen importlib._bootstrap>", line 953, in _find_and_load_unlocked ModuleNotFoundError: No module named 'tests'
<div class="panel panel-default">
<div class="panel-heading">
Edit Device
</div>
<form action="" method="post" class="form">
{% csrf_token %}
{% bootstrap_form form layout='horizontal' %}
{% buttons %}
<button type="submit" class="btn btn-primary">
{% bootstrap_icon "floppy-save" %} Save
</button>
<button type="reset" class="btn btn-primary">
{% bootstrap_icon "repeat" %} Reset
</button>
{% endbuttons %}
</form>
</div>
results in
TemplateSyntaxError at /device/edit/56
Invalid block tag on line 31: 'bootstrap_icon', expected 'endbuttons'. Did you forget to register or load this tag?
The offending line is
{% bootstrap_icon "floppy-save" %} Save
Hi there,
I notice that help block still uses bootstrap3 implementation, but it not works properly with bootstrap4. See the JSFiddle https://jsfiddle.net/rm2Lmxqq/
django-bootstrap4 uses help block implementation to highlight the field error, but with the current issue the field isn't highlighted, just has a common text below it.
Change the help block implementation to the bootstrap4 standard sure will take care of it.
FileInput looks misaligned when compared to other form fields:
(this is a screenshot of horizontal form, but the problem exists in default layout as well)
The problem is the fix_clearable_file_input
function in FieldRenderer
class. It looks like this:
def fix_clearable_file_input(self, html):
# TODO This needs improvement
return '<div class="row bootstrap4-multi-input"><div class="col-xs-12">{html}</div></div>'.format(
html=html
)
TODO says it needs improvement - certainly, and the funny thing is, the improvement may look like this:
def fix_clearable_file_input(self, html):
return html
Yes, the input looks okay with the code like that:
However, I believe that the code above was also supposed to make the field span the entire available width, and that's why I'm using something like that in my code:
def fix_clearable_file_input(self, html):
return html.replace('class="', 'class="w-100 ')
However, this is a very ugly solution and this is why I haven't included a PR fixing that. This needs a bit more investigation on how to make this look properly.
There is a different div class in the Bootstrap's docs for checkboxes.
https://getbootstrap.com/docs/4.1/components/forms/#overview
Now it's "form-group form-check" but the library generates only the "form-group" div.
I am looking for an opportunity to add custom css classes to a form widget and extend its 'form-control' class by using the template tag. Unfortunately the parameter 'field_class' modifies a higher-level DIV.
"fade" and "show" classes could be added to the message alert for nicer look when dismissing.
I suggest we add a few goals and policies to the README. Mainly this:
django-bootstrap4
, but plugins are welcome.The reason for this is that I've seen a lot of cool PR's and suggestions for django-bootstrap3
that enable table
based views, date pickers, et cetera. It would be good that people know that the goal of the app is limited to Bootstrap 4.
The integrity hashes are currently incorrect, and tether is no longer needed for BS4.
Helllo !
Nice app !
Do you have any plan to support jinja2 backend ?
Thanks !
Looking at the code it looks like include_jquery
doesn't do anything.
According to Bootstrap 4 docs this class does not exist anymore and must be replaced by form-text text-muted
Regards!
Now that Django 1.8 LTS is no longer supported, we should be able to remove DBS4_SET_REQUIRED_SET_DISABLED
per comments in the code.
I am using only the CSS parts of bootstrap, not the JavaScript. Currently, this does not seem to be supported.
The issue I noticed is that the form errors have a close button that requires javascript. I am not sure if there is more.
I would be available to help implementing this. However, I am not sure how to approach the topic and if it is even wanted.
I know that there are some minor class and formatting differences between 3 and 4, but I am also new to Django. I cant get the dropdown in the nav to work.
-main.html
<!DOCTYPE html>
{% load bootstrap4 %}
{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}
{% load static %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}
<html>
<head>
-template.html
{% load static %}
{% load bootstrap4 %}
<div class="container-fluid">
<nav class="navbar navbar-expand-md navbar-toggleable-md navbar-light bg-faded" style="background-color: #e3f2fd;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Image and text -->
<a class="navbar-brand" href="{% url 'homeView' %}">
<img src="{% static "images/logo.png" %}" width="30" height="30" class="d-inline-block align-top" alt="">
Logo
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% if currentView == "weeklyInspection" %}active{% endif %}">
<a class="nav-link" href="{% url 'trucks:weeklyInspection' truckID=truck.truckID %}">Weekly Inspection</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTruck" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Truck
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownTruck">
<a class="nav-link {% if currentView == "info" %}active{% endif %}" href="{% url 'trucks:truckInfo' truckID=truck.truckID %}">Info</a>
<a class="nav-link {% if currentView == "pm" %}active{% endif %}" href="{% url 'trucks:pm' truckID=truck.truckID %}">PM</a>
<a class="nav-link {% if currentView == "truckJobs" %}active{% endif %}" href="{% url 'jobs:currentTruckJobs' truckID=truck.truckID %}">Current Truck Jobs</a>
</div>
</li>
According to the docs, bootstrap_css_url
returns the bootstrap CSS url.
In django-bootstrap3, my templates include the bootstrap URL like this:
<link href="{% bootstrap_css_url %}" rel="stylesheet">
In django-bootstrap4 0.0.3, that breaks, yielding:
<link href="{'crossorigin': 'anonymous', 'integrity': 'sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M', 'href': 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css'}" rel="stylesheet">
The bootstrap_pagination tag does not not include the "page-item" class on "li" tags or the "page-link" class on "a" tags as required by Bootstrap 4. As a result, pagination links are unstyled.
Hello,
I create a better example for a begginers compreension, maybe, its interesting for the your project.
It's a simple and initial project, but helps my students here.
Link: https://github.com/luizsfer/django-bootstrap4-init
Tks for attention
Is it Django bootstrap4 uses bootstrap4 beta2?
{% bootstrap_pagination page_obj url={{ request.path }} %}
I need pagination to work with GET queries how do i do that?
I have this query:
?title=&category=&age=&gender=female
But urls in pagination shows only:
/?page=1
One of the missing things from django-bootstrap3
was the ability to layout a form. There were a couple of good attempts and PR's to add form layout through classes, but it never clicked. Some people switched to crispy because of the lack of layout. I don't mind people using crispy, but a little help with organizing a form layout would be nice.
I think this would be a good addition for the future.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.