These are some of the things Bootstrap is good at:
– Similar looks in all major web browsers
– Handling of desktop, tablet and phone screen sizes
– Customizable layouts
– Fully styled navigation bars
– Fully styled forms
Download the Boostrap in the app/static. Then load the framework by add in the head of the base template:
<!DOCTYPE html> <html lang="en"> <head> ... <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="/static/js/bootstrap.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ... </head> ... </html>
The meta tag enables Bootstrap’s responsive mode, which scales the page appropriately for desktops, tablets and smartphones.
The changes that we will make are:
- Enclose the entire page contents in a single column fixed layout with responsive features.
- Adapt all forms to use Bootstrap form styles.
- Replace our navigation bar with a Navbar.
- Convert the previous and next pagination links to Pager buttons.
- Use the Boostrap alert styles for flashed messages.
- Use styled images to represent the suggested OpenID providers in the login form.
These changes are not very important for the study of Flask, If you want know in details. Just see the diffs