I would like to make a compilation of several topics covered here, integrated all under a single project, instead of working with them on easy examples. First, let’s work with Flask and Blueprints (the Python microframework for developing web apps) on the server side, and use Bootstrap for the client. Also, I want to show you how to use a Bootstrap template in a real example, and in a few minutes, you have completed a environment to keep on working on your app.
The exercise consist in downloading a Bootstrap template, modify the main menu allowing to show the information as tabs (only once is the data loaded).
Why this entrance
I decided to write this entrance because I did it on a project I was dealing with. To solve this issue, I thought in writting Javascript code, but … suddently, I remembered that maybe using Bootstrap and Tabs, what I wanted cound be done! And indeed. This exercise is also an example of how to use several technologies I write about on the blog separatedly, or with easy examples, that has nothing to do when using on big projects!
I hope this entrance can be useful for you, using Flask (Python) and Twitter Bootratrap with HTML5, CSS, Javascript.
Flask template
On a previous entrance I developed a Flask template using Blueprints. If you download it, all files are ready to go. This will be the base of the new project. Now, let’s see how to integrate with a new template (a new one), more closed to what I need.
Downloading Bootstrap templates
I was visiting StartBootstrap, a web site where you can find several Boostrap templates, and I decided to use this one: http://startbootstrap.com/template-overviews/the-big-picture/. If you unzip the file, you can open index.html, and you’ll see the downloaded template on your local computer (nothing new, and everything works as expected!).
If you follow the tips for the Flask template, we need to move the css, javascript and fonts dirs to the static directory.
Next step is to rename index.html to base.html and we move this file into templates directory(on the app, not on the blueprint template dir).
Modify the template
Once the template is set up following the Flask conditions, you need to do an important change on the base.html: all references to CSS or JS files must be changed, and instead of
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
you need to use url_for function
<link href=”{{ url_for(‘static’, filename=’css/bootstrap.min.css’) }}” rel=”stylesheet”>
Once you change this for calling all related files, the base.html will be ready for use.
Preparing the DIVs with the information inside the main container
Inside the mainc ontainer, let’s create the 3 DIVs to show. Each one will be linked to an menu item:
<div id="bloque-1">Bloque 1</div> <div id="bloque-2">Bloque 2</div> <div id="bloque-3">Bloque 3</div>
Now, turn to modify the menu in order to simulate tab behaviour, by following the instructions, and assigning the right classes: using data-toggle and the link to the referenced DIV:
<!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="main_menu"> <ul class="nav navbar-nav"> <li> <a data-toggle="tab" href="#bloque-1">Info</a> </li> <li> <a data-toggle="tab" href="#bloque-2">Datos</a> </li> <li> <a data-toggle="tab" href="#bloque-3">Graficos</a> </li> </ul> </div>
Last modification is related to the 3 DIVs, because I need to group all under a new DIV with the class tab-content, and add the class tab-pane fade to every DIV. The code will look like this:
<!-- Page Content -->
<div class="container">
<div class="tab-content">
<div id="bloque-1" class="tab-pane fade in active">Bloque 1</div>
<div id="bloque-2" class="tab-pane fade">Bloque 2</div>
<div id="bloque-3" class="tab-pane fade">
{% block content %}
{% endblock %}
</div>
</div>
</div>
In order to use Flask, I have included a block in one DIV for being used by jinja2 (the template engine used by Flask).
You have the project available on GitHub. Also, you can see the modified template there, where the difference between the original and my template is the menu tab behaviour. You can see the static template here.
I hope the explanations will be very useful for you, and see how to use HTML5 templates for integrating it with other technologies, such as Flask (in this case), with a few modifications. This way you can save a lot of time and effort and concentrate on the app, once you have the envoronment ready!
Happy conding!