Flaskwebdevelopment-flask Template 2-flask-bootstrap Plugin

This part is still belong to the template, speak flask embedded bootstrap, use Flask-bootstrap plug-in. The meaning of this plugin is to simplify this embedded operation, of course not.

Integrated Bootstrap via Flask-bootstrap

Bootstrap's introduction will not turn over.

Bootstrap as a client side of the framework, he eventually exists in the HTML file, do Flask application development, should put it into the template.

The Flask-bootstrap plugin simplifies this integration operation by using PIP to install:

$ pip Install Flask-bootstrap

Flask plug-ins are typically initialized with the Flask app instance, such as:

' hello.py ' from flask.ext.bootstrap import bootstrap# ... bootstrap = bootstrap (APP)

Or the previous one hello.py , and added the Flask-bootstrap. Like Flask-script, a plug-in is introduced by the Flask.ext control, app initialized with an instance of the constructor and given an instance of the plug-in.

After Flask-bootstrap initialization is complete, you get a basic template that contains all the bootstrap required files. This template takes advantage of the JINJA2 inheritance mechanism, and the application simply inherits the template, and the new template has been integrated with the bootstrap. To modify the previous user.html:

user.html

{% extends "bootstrap/base.html"%} {% block title%} flasky{% endblock%}{% block navbar%}<div class= "NavBar navbar-inverse" role= "navigation" > <div class= "Contai Ner "> <div class=" Navbar-header "> <button type=" button "class=" Navbar-toggle "data-toggle=" C                Ollapse "data-target=". Navbar-collapse "> <span class=" sr-only ">toggle navigation</span>                <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button> <a class= "Navbar-brand" href= "/" & Gt flasky</a> </div> <div class= "Navbar-collapse collapse" > <ul class= "Nav Navb Ar-nav "> <li><a href="/">Home</a></li> </ul> </div&gt    ; </div></div>{% endblock%}{% block content%}<div class= "Container" >    <div class= "Page-header" >  
The above template inherits the underlying template provided by Flask-bootstrap bootstrap/base.html . This basic template contains the skeleton of a Web page, and it already contains the bootstrap CSS and JS files.
 
Chunks defined in the underlying template can be overwritten by chunks defined in the inherited template. The content between block and Endblock is populated into the underlying template.
 
The new user.html Title,navbar and content three blocks, in NavBar, use the bootstrap component to define a simple navigation bar.
 
Note:
 
 
 

  
  
 
   
To find this base template, go to Python's package installation directory to find it and save it in the Flask-bootstrap package: \site-packages\flask_bootstrap\templates\bootstrap inside.
 
   
The current code is under 3b tag
 
   
There are many examples of changes that can be made to bootstrap official documents.
 
  
 
 
 
New Page Effects:
 
 
A variety of blocks are available in the Flask-bootstrap base template:
 
Name              description Doc               all HTML document html_attribs      
 
Some of the blocks in the table above are also used in Flask-script itself, and direct coverage can cause problems, such as styles scripts declaring some bootstrap files in chunks. It is recommended to look directly at the content of the underlying template, with an understanding. If you just need to add your own content, you can use the method provided by JINJA2 to super() preserve the original content. For example:
 
{% block scripts%} {{super ()}}<script type= "Text/javascript" src= "my-script.js" ></script> {% Endblock%}
 
Note: The template may take one or two to get it done.
Flaskwebdevelopment-flask Template 2-flask-bootstrap Plugin