Today, I will share one new part of Python Django from my tutorial series. In this part you will learn the how to use html template with django.
I already told you the following:
In django framework static files means use of css,js,images folder location using static keyword. Static keyword defines the location of these files. But firstly we have to configure the path of static file using settings.py file.
- In this article we will use the bootstrap framework with django. So firstly for the use of bootstrap we have to configure static files location and then use in template.
- Open the settings.py file and add some lines in below of settings.py file as below images.
- Now create static folder in your django app folder.
- Now download bootstrap framework zip file.
- Copy all files js,css and fonts folder in static folder.
- After this process now we go to html files that I already told you about you in tutorial seven.
- Add bootstrap file in html using static keywords.
- Above image shows some code in html file.
- {% load staticfiles %} is used for loading all static files here for use and second {% static ‘css/bootstrap.min.css’ %} in link tag is used for giving path of css file.that can automatically inherit this css file and in below js file is also added using the same syntax so this helps for set path automatically without custom url.
- Now we create some bootstrap component in this html file.
- Now run django project and open url of using your urls.py ten you will get output on webpage.
- It means all css,js files are working properly and now open and inspect element of browser and see location of files.
- Here static denotes insettings.py files as STATIC_URL=”/static/”
So here you can insert any css,js and fonts file and attach using static keyword in html file.
Note
When you deploy django project on server static file location is very important. Because many times it creates mostly errors on deployment. So when you deploy project you should have knowledge of server OS types and where is the exact location of your project root.