Bootstrap HTML style

The Bootstrap framework for creating web pages has been very popular in recent years, both because of the design and the automatic support for responsive pages on all sorts of devices. Bootstrap can easily be used in combination with Flask. The template file view_bootstrap.html is identical to the former view_table.html, except that we load the Bootstrap CSS file and include in comments how to add the typical navigation bar found in many Bootstrap-based web pages. Moreover, we use the grid layout functionality of Bootstrap to control the placement of elements (name, input field, label, and error message) in the input form.

The template looks like 

<!DOCTYPE html>
<html lang="en">


<link href=
"http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
rel="stylesheet">

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
     equationNumbers: {  autoNumber: "AMS"  },
     extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js", "color.js"]
  }
});
</script>
<script type="text/javascript" src=
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
<!--
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
       {% for text, url in some_sequence %}
       <li><a href="/{{url}}">{{ text }}</a></li>
       {% endfor %}
       </ul>
</div>
</nav>
-->

<h2>Damped sine wave</h2>

This web page visualizes the function \(
u(t) = Ae^{-bt}\sin (w t), \hbox{ for } t\in [0,T]
\).

<p>
<form class="navbar-form navbar-top" method="post" action="">
  <div class="form-group">
  {% for field in form %}
    <div class="row">
     <div class="input-group">
      <label class="col-xs-1 control-label">
      <span class="input-group-addon"> \( {{ field.name }} \) </span>
      </label>
      <div class="col-xs-2">
      {{ field(class_="form-control") }}
      </div>
      <div class="col-xs-3">
        {{ field.label }}
      </div>
      {% if field.errors %}
        {% for error in field.errors %}
          <div class="col-xs-3">
            <div style="color: red;">{{ error }}</div>
          </div>
        {% endfor %}
      {% endif %}
     </div>
    </div>
  {% endfor %}
<br/>
<input type="submit" value="Compute" class="btn btn-default">
</form>

<p>
{% if result != None %}
<img src="{{ result }}" width="400">
{% endif %}
</html>
The input fields and fonts now get the typical Bootstrap look and feel:

The only special feature in this template is the need to pass a CSS class form-control to the field object in the part that defines the input field. We also use the standard input-group-addon style in the name part of the Bootstrap form. A heading Damped sine wave was added to demonstrate the Bootstrap fonts.

It is easy to switch to other Bootstrap styles, e.g., those in the "Bootswatch family": "http:bootswatch.com": 

<link href=
"http://netdna.bootstrapcdn.com/bootswatch/3.1.1/X/bootstrap.min.css"
rel="stylesheet">
where X can be journal, cosmo, flatly, and other legal Bootswatch styles. The journal style looks like this:

While view_bootstrap.html makes use of plain Bootstrap HTML code, there is also a higher-level framework, called Flask-Bootstrap that combines Flask and Bootstrap. Installation of this extension is done by sudo pip install flask-bootstrap.

After app = Flask(__name__) we need to do 

from flask_bootstrap import Bootstrap
Bootstrap(app)
We introduce a command-line argument to control whether we want the plain view or the Bootstrap view. The complete controller.py file then looks like 

from model import InputForm
from flask import Flask, render_template, request
from compute import compute
import sys

app = Flask(__name__)

try:
    template_name = sys.argv[1]
except IndexError:
    template_name = 'view_plain'

if template_name == 'view_flask_bootstrap':
    from flask_bootstrap import Bootstrap
    Bootstrap(app)

@app.route('/vib1', methods=['GET', 'POST'])
def index():
    form = InputForm(request.form)
    if request.method == 'POST' and form.validate():
        result = compute(form.A.data, form.b.data,
                         form.w.data, form.T.data)
    else:
        result = None

    return render_template(template_name + '.html',
                           form=form, result=result)

if __name__ == '__main__':
    app.run(debug=True)

The template employs new keywords extends and block: 

{% extends "bootstrap/base.html" %}

{% block styles %}
{{super()}}
<style>
    .appsize { width: 800px }
</style>

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: {
     equationNumbers: {  autoNumber: "AMS"  },
     extensions: ["AMSmath.js", "AMSsymbols.js", "autobold.js", "color.js"]
  }
});
</script>
<script type="text/javascript" src=
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
{% endblock %}

<!--
{% block navbar %}
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
       {% for f in some_sequence %}
       <li><a href="/{{f}}">{{f}}</a></li>
       {% endfor %}
       </ul>
</div>
</nav>
{% endblock %}
-->

{% block content %}

<h2>Damped sine wave</h2>

This web page visualizes the function \(
u(t) = Ae^{-bt}\sin (w t), \hbox{ for } t\in [0,T]
\).

<p>
<form class="navbar-form navbar-top" method="post" action="">
  <div class="form-group">
  {% for field in form %}
    <div class="row">
     <div class="input-group appsize">
      <label class="col-sm-1 control-label">
      <span class="input-group-addon"> \( {{ field.name }} \) </span>
      </label>
      <div class="col-sm-4">
      {{ field(class_="form-control") }}
      </div>
      <div class="col-sm-4">
        {{ field.label }}
      </div>
      {% if field.errors %}
        {% for error in field.errors %}
          <div class="col-sm-3">
            <div style="color: red;">{{ error }}</div>
          </div>
        {% endfor %}
      {% endif %}
     </div>
    </div>
  {% endfor %}
<br/>
<input type="submit" value="Compute" class="btn btn-default">
</form>

<p>
{% if result != None %}
<img src="{{ result }}" width="500">
{% endif %}
</html>
{% endblock %}
It is important to have the MathJax script declaration and all styles within {% block styles %}.

It seems easier to apply plain Bootstrap HTML code than the functionality in the Flask-Bootstrap layer.