JQuery with Bootstrap ads many functionality to web page. We will learn how to integrate JQuery and Bootstrap to our Django framework.
Let us start with our project name jq
django-admin startproject jq
For our project we will change the settings.py to include static files.
What is a static files
In our project we will be using several style (or CSS) , JavaScript or images files. These are known as static files and for better management we will keep these files in different folders.
Before going for static files let us set up the Template Directory for the project and keep our html file inside it.
Template Directory
We have one template directory as my_templates and let us keep one register.html file inside it. In our settings file ( settings.py ) we have to tell Django about our template directory.
Here we have set our static URL page so same can be used for our templates. Now create one directory saying static. Run this command.
python manage.py collectstatic
Now we are ready to add static pages to our html pages. We have created register.html page inside my_templates directory. Now modify the code.
register.html
{% load static %}
<html>
<head>
<link rel='stylesheet' href="{% static 'css/my_style.css' %}" type='text/css'>
</head>
<body>
<h2 class=my_h2>I am from inside my_templates dir , register.html page</h2>
</body>
</html>
First we have loaded the static tag. This tag we have used to tell Django where is my files to link. Note the line linking the .css file. This file is stored inside static directory. Its path is here .
Now similarly we will keep our JavaScript files, image files in different directories inside static directory.
Adding JQuery
«What is JQuery ?
We will link our JQuery file as any external JavaScript file inside our register.html page. We may use many more JavaScript files so let us keep them inside a new folder and name it is as js. Create one folder js inside static directory. ( it will be parallel to our CSS directory already we have created )
Download Jquery file from https://jquery.com/download/ , save as juqery-3.4.1.js inside static/js directory. The file name may change based on your downloaded version.
«What is Bootstrap ?
Download Bootstrap from here . https://getbootstrap.com/docs/4.0/getting-started/download/ , this link may change based on the version you are downloading. Collect the boostrap.js file and boostrap.css file and place them in respective directories ( boostrap.js inside js directory & boostrap.css inside css directory )
Now let us add bootstrap class to our button. ( change the html code for button inside register.html file )