bootstrap, flask.ext.extension, instance of that main class and initialize, register itself with Flask all the changes are in the template. In template the extends directive, to make the template an extension of another template. Similar to class inheritance, bootstrap base contains all elements that make a bootstrap page.

b91b90f657918238276926ce182825447237b7aa · ovidiucs · May 12, 2015 21:04

We have emmbedded all the constructs in blocks. Define blocks that override or define parts of base template
Block title we put our content. It's up to the template to decide where the content goes.

+25 −11 · 3 files changed

flask-blog.py +4 −1
templates/macros.html +1 −5
templates/weather-average.html +20 −5

diff --git a/flask-blog.py b/flask-blog.py
index 07012a1..18971d4 100644
--- a/flask-blog.py
+++ b/flask-blog.py
@@ -1,7 +1,10 @@
 from flask import Flask, render_template
+from flask.ext.bootstrap import Bootstrap
 
-app = Flask(__name__)
 
+app = Flask(__name__)
+# initialize extension
+bootstrap = Bootstrap(app)
 
 @app.route('/')
 def hello_world():
diff --git a/templates/macros.html b/templates/macros.html
index 23a6b98..4110695 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -1,9 +1,5 @@
 {% macro weather_cell(value,hl) %}
-    <td>
-        {% if hl %}<b>{% endif %}
-            {{ value }}
-        {% if hl %}</b>{% endif %}
-    </td>
+    <td{% if hl %} class="warning"{% endif %}>{{ value }}</td>
 {% endmacro %}
 
 {% macro weather_row(month, min, max, rain, hl_min, hl_max, hl_rain) %}
diff --git a/templates/weather-average.html b/templates/weather-average.html
index 88bb6a9..f312f39 100644
--- a/templates/weather-average.html
+++ b/templates/weather-average.html
@@ -1,8 +1,22 @@
+{% extends 'bootstrap/base.html' %}
 {% import 'macros.html' as macros %}
-<h1>Weather Averages</h1>
-<h2>{{ city }}</h2>
-<hr>
-<table>
+
+{% block title %}Weather Averages for {{ city }}{% endblock %}
+
+{% block navbar %}
+    <nav class="navbar navbar-inverse" role="navigation">
+        <div class="container">
+            <a class="navbar-brand" href="#">Weather</a>
+        </div>
+    </nav>
+{% endblock %}
+
+{% block content %}
+    <div class="container"
+         <h1>Weather Average</h1>
+         <h2>{{ city }}</h2>
+
+<table class="table table-bordered">
     <tr>
         <th>Month</th>
         <th>Min</th>
@@ -18,4 +32,5 @@
                 highlight['max'],
                 highlight['rain']) }}
     {% endfor %}
-</table>
\ No newline at end of file
+</table>
+{% endblock %}
\ No newline at end of file