专注细节
努力进步

Flask-Facelift

Introducing Booststrap

Bootstrap is a collection of CSS and Javascript utilities for the most common types of web pages. If you want to see the kind of pages that can be designed with this framework here are some examples

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
– …

Boostrapping microblog

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 link and script tags load the CSS and Javascript files that come with Bootstrap. Note that one of the required Javascript files is jQuery, which is used by some of the Bootstrap plugins.

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

分享到:更多 ()