Plantillas con bootstrap (flask-bootstrap)
Podemos utilizar la hoja de estilo que queramos, la podemos guardar en nuestro contenido estático o acceder por medio de una url.
Sin embargo si queremos trabajar con plantillas que utilicen como hoja de estilos y javascript el framework bootstrap podemos utilizar la extensión Flask-Bootstrap.
Instalación de Flask-Bootstrap
Con nuestro entorno virtual activado:
pip install Flask-Bootstrap
Configuración de nuestra aplicación
En nuestra aplicación escribimos lo siguiente:
from flask import Flask, render_template, abort
from flask_bootstrap import Bootstrap
app = Flask(__name__)
Bootstrap(app)
...
Está líneas generan una plantilla base de la que podemos extender las nuestras.
Uso de la plantilla base bootstrap
Por ejemplo nuestra primera plantilla quedaría:
{% extends "bootstrap/base.html" %}
{% block title %}Hola, que tal {{nombre}}{% endblock %}
{% block content %}
<h2>Vamos a saludar</h2>
{% if nombre %}
<h1>Hola {{nombre|title}}</h1>
<p>¿Cómo estás?</p>
{%else%}
<p>No has indicado un nombre</p>
{% endif %}
{% endblock %}
La plantilla base de bootstrap ofrece los siguientes bloques que podemos sobreescribir:
html: Contiene el contenido completo de la etiqueta<html>.html_attribs: Atribulos para la etiqueta<html>.head: Contiene el contenido completo de la etiqueta<head>.body: Contiene el contenido completo de la etiqueta<body>.body_attribs: Atribulos para la etiqueta<body>.title: Contiene el contenido completo de la etiqueta<title>.styles: Contiene todos los estilos CSS de la etiqueta<link>.metas: Contiene los<meta>de la cabacera.navbar: Un bloque vacío encima del contenido.content: Bloque para poner nuestro contenido.scripts: Contiene todos los scripts en la etiqueta<script>al final del body.
Ejemplos
Añadiendo otro fichero de hoja de estilo:
{% block styles %}
{{super()}}
<link rel="stylesheet" href="{{url_for('.static', filename='mystyle.css')}}">
{% endblock %}
Añadiendo otro fichero Javascript:
{% block scripts %}
<script src="{{url_for('.static', filename='myscripts.js')}}"></script>
{{super()}}
{% endblock %}
Añadiendo el idioma español en los atributos de <html>:
{% block html_attribs %} lang="es"{% endblock %}