将Python添加到Twitter Bootstrap

Question

This may be a noob question but I am wondering about adding Python to Twitter Bootstrap (both of which i am only learning)

Can anyone give me some idea of the folder structure i should have? I assume my Python folder goes at the same level as my Bootstrap project folder?

eg

MyProject/
|-- Python/
|   |-- bin
|   |   |-- app.py
|   |-- docs
|   |-- sessions
|   |-- tests
|   |   |-- project_tests.py
|   
|-- bootstrap/
|   |-- css
|   |   |-- bootstrap.css
|   |   |-- bootstrap.min.css
|   |   
|   |-- js
|   |   |-- bootstrap.js
|   |   |-- bootstrap.min.js
|   |-- img
|   |   |-- glyphicon-halflings.png.
|   |   |-- glyphicon-halflings.png.

I got the bootstrap file structure straight from the download site and i am looking at this question here regarding best method to set up Python directories

As always, thanks in advance.

Answer 1

Regardless of framework or whether you use one or not, it's best to have a single place to keep your static files (which would be all your twitter bootstrap contents).

Personally I keep mine split into img , css , js , fonts for clarity. Like so:

MyProject/
|-- Python/
|   |-- bin
|   |   |-- app.py
|   |-- docs
|   |-- sessions
|   |-- tests
|   |   |-- project_tests.py
|   
|-- static/
|   |-- css/
|   |   |-- bootstrap.css
|   |   |-- bootstrap.min.css
|   |   |-- my_custom_styles.css
|   |-- js/
|   |   |-- bootstrap.js
|   |   |-- bootstrap.min.js
|   |-- img/
|   |   |-- glyphicon-halflings.png
|   |   |-- glyphicon-halflings.png
|   |-- fonts/
|   |   |-- cool_font

This has the benefit that when you use a web server to serve your static content you can use /static/ in your templates and point it to the /static/ folder on your filesystem. Example with Nginx:

location ~ ^/static/  {
      alias    /path/to/static/;
      expires 30d;
    }

so www.yoururl.com/static/img/glyphicon-halflings.png is easy to find and serve from your filesystem.

As an added bonus, if you are developing for the web with Python there are some great frameworks out there to help you with a lot of the basics. They also have extensive documentation on handling static files in development and production deployment.

I've used:

• Django - Here is the static documentation
• Flask - Here is the static file documentation

But there is also:

• Pylons
• Web2py

And more !

Edit1 - Additional Bonus information:

I said I'd add a little extra. Here's how I manage my static files:

When I use Django, I use django-compressor , which will automatically combine and minimise inline CSS and JS in the templates. It also adds a unique identifying hash so you can set cache headers for years into the future to save bandwidth and decrease loading times. If you change your static files, it automatically modifies the hash - they're re-downloaded by the browser.

If I'm using Flask (or something not-django), I use Grunt. Although not really meant for python development, it's easy to hook into a continuous integration system (like Jenkins) and will also combine, concatenate and compress your CSS and JS for you. Still haven't solved the unique hash though.

These new, compressed files, I put into a new directory - static-min . I then have a bash script, that loops through all the files in my static-min directory and gzips them (with 10 - the max gzip compression) but keeps their name the same. This is so that if a supported browser requests your site - Nginx will serve the compressed static files.

Like so:

|-- static-min/
|   |-- css/
|   |   |-- all_css_concatenated_minimised-723974hgjsf.css
|   |   |-- all_css_concatenated_minimised-723974hgjsf.css.gz
|   |-- js/
|   |   |-- all_js_concatenated_minimised-djad7rhea8f.js
|   |   |-- all_js_concatenated_minimised-djad7rhea8f.js.gz

Nginx config - the expires max will get the user to keep the file in their browser cache forever:

location ~ ^/static-min/  {
      alias    /path/to/static-min/;
      expires  max;
    }

Answer 2

Bootstrap是一个仅限客户端的库，因此为了保持一致性，您可能应该将它放在static/lib/bootstrap类的东西中。