abidibo.net

Just Open Source

Posted in "bootstrap"

Bootstrap progress bar animation

bootstrap javascript tips

Boostrap progress bar is a nice component that comes in handy when loading async contents, large images or, for example, when rendering a complex google map.

But as is, it is quite useless if you want to implement a dynamic loader, which progress value changes over time. There are two major problems:

  1. when updating the value there is no animation, but just a jump to the new provided value;
  2. if the value updates are set immediately one after another, you ...

read the full post


Modal django forms with bootstrap 4

bootstrap django modals

Some time ago' I wrote an article about how to implement django forms with bootstrap 3 modals. It turned out to be a quite interesting theme since many people surfed and read that page. So now I'll refresh these concepts changing them a bit, in fact we'll see how to implement django forms with bootstrap 4-alpha modals.

Aperitif

Some preliminary stuff.

I'm almost bored with overwriting the model form class of my generic view in order to add bootstrap classes to form fields, so I'll use django-widget-tweaks. Let's install it:

(.virtualenv)$ pip install django-widget-tweaks 

Add widget_tweaks to your installed apps ...

read the full post


Responsive menu for bootstrap

bootstrap css3 javascript jquery

This is a nice one.

Bootstrap is a nice framework, the great advantage of using it is that it saves you a lot of time while building a responsive web site (the same can be said of other css frameworks out there).
The drawback is that the web sites coming out in the last years very often looks the same, all of them have the same navbar and the same menu behavior which collapses for extra-small devices, showing a menu button which reveals the content when pressed.

A good way to differentiate your web site from the others could be a change in the menu collapsing behavior.

Datmenu is a nice responsive menu plugin for Wordpress, so the idea is ...

read the full post


How to implement modal popup django forms with bootstrap

bootstrap django forms

UPDATE 11/18/2015

I wrote another article like this, but newer, just tested and with support for both bootstrap 3 and 4-alpha, check it out:

http://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/


Sometimes could be a good idea to have the user provide all the needed information without living the "index" or "main" page of our web application. In other terms, sometimes could be a good idea to have some forms appear on a layer, a modal ...

read the full post


Your Smartwatch Loves Tasker!

Your Smartwatch Loves Tasker!

Now available for purchase!

Featured