Go Combat (5): Introduce bootstrap, set up static resources

This is a creation in Article, where the information may have evolved or changed.

An

The scaffold of the product class was generated before, but as David, the developer of rails, says, scaffold is almost useless. So following the iteration plan in Agile Web development with Rails 4th, the next step is to beautify the list page:

But the interface is still too ugly. In fact, with the bootstrap, many sites have become "black and hard" tool bar + "small fresh" style. We can not mundane, but also lazy design style, may wish to use the Bootstrap Product list interface redesigned to the following style:

Let's implement this interface. Obviously the Web interface will use some static resources (css,js,image, etc.),

To introduce static resources in Django). Django has a special handling of static resources when it is formally deployed, and in the development phase, there is a simple way to make static resources work.

It is preferred to create a static directory under the project directory and put static resources into it in a reasonable organized manner:

static/

css/

Bootstrap.min.css

js/

images/

Productlist.html

Productlist.html is the interface designer to implement the Product list static page, CSS/BOOTSTRAP.MIN.CSS is the page used by the style sheet, from Bootstrap, the future of the entire system will use this set of style style; JS directory is now empty, You can put JavaScript code here later, and the images folder is the same.

As we can see, Django manages the management of static content very well. By contrast, rails requires you to put static content in a very weird structure:

app/assets/

images/

javascripts/

stylesheets/

The interface designer implements the interface to run, also need to modify the relevant path, or change their own directory settings habits. This design is difficult to understand.

Go back to Django and make the static resources work with just a simple configuration (the following procedure applies only to the development phase):

Modify the static files section of settings.py:

Importos ...#Additional locations of static fileshere = Os.path.dirname (__file__) Staticfiles_dirs= (    #Put strings here, like "/home/html/static" or "c:/www/django/static".    #Always use forward slashes, even on Windows.    #Don ' t forget to use absolute paths, not relative paths.Here+Static_url,)

Then add the static URL mapping to the urls.py:

from  django.contrib.staticfiles.urls import   Staticfiles_urlpatterns ...  #   development only  #   This would only work if DEBUG is True.  Urlpatterns + = Staticfiles_urlpatterns () 

Start the server, you can see the design of the interface through the http://127.0.0.1:8000/static/productlist.html.

Source code: http://download.csdn.net/detail/thinkinside/4036963

In the next section, you can finally modify the template to beautify the style of the Product List page.