The first thing to do is grab Bootstrap file. So let’s download it locally and chuck it in our static directory. Before that, go ahead and remove all files from the “django_ecommerce/static”
directory except forapplication.js.
Keep in mind that we could serve the two main Bootstrap files,bootstrap.min.css
and bootstrap.min.jsfrom a Content Delivery Network (CDN). When you are developing locally, it’s best to download the files on your file system, though, in case you’re trying to develop/design and you lose Internet access. There are various benefits to utilizing a CDN when you deploy your app to a production server, which we will detail in a later chapter.
1. Download the Bootstrap distribution files fromhere.
2. Unzip the files and add the “css”, “fonts”, and “js” directories to the “django_ecommerce/static”
file directory. Add the application.jsfile to the “js” directory. When it’s all said and
done, your directory structure should look like this:
1 .��� 2 css� 3 ��� bootstrap-theme.css� 4 ��� bootstrap-theme.css.map� 5 ��� bootstrap-theme.min.css� 6 ��� bootstrap.css� 7 ��� bootstrap.css.map� 8 ��� bootstrap.min.css��� 9 fonts� 10 ��� glyphicons-halflings-regular.eot� 11 ��� glyphicons-halflings-regular.svg� 12 ��� glyphicons-halflings-regular.ttf� 13 ��� glyphicons-halflings-regular.woff��� 14 js��� 15 application.js��� 16 bootstrap.js��� 17 bootstrap.min.js
3. Another critical file that we must not forget to add is jQuery. As of this writing 1.11.1
is the most recent version. Download the minified version - e.g.,jquery-1.11.1.min.js-
NOTE: On a side note, do keep in mind that if you have a “real” site that’s currently using a version of jQuery earlier than 1.9, and you’d like to upgrade to the latest version, you should take the time to look through the release
notes and also look at thejQuery Migrate plugin. In our case we are actually
upgrading from version 1.6x; however, since our example site only makes very little use of jQuery (at the moment), it’s not much of an issue. But in a production environment ALWAYS make sure you approach the upgrade carefully and test thoroughly.
4. Say goodbye to the current design. Take one last look at it if you’d like, because we are going to wipe it out.
Figure 9.1: Initial look
on thesame pagethat you downloaded Bootstrap from. Take that template and over-
write yourbase.htmlfile:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width,
initial-scale=1">
7 <title>Bootstrap 101 Template</title> 8
9 <!-- Bootstrap -->
10 <link href="css/bootstrap.min.css" rel="stylesheet"> 11
12 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements
and media queries -->
13 <!-- WARNING: Respond.js doesn't work if you view the page via
file:// --> 14 <!--[if lt IE 9]> 15 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 16 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 17 <![endif]--> 18 </head> 19 <body> 20 21 <h1>Hello, world!</h1> 22 23 <script src="https://js.stripe.com/v2/"
type="text/javascript"></script> 24 <script type="text/javascript"> 25 //<![CDATA[
26 Stripe.publishableKey = '{{ publishable }}'; 27 //]]>
28 </script>
29 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 30 <script
31 <!-- Include all compiled plugins (below), or include
individual files as needed -->
32 <script src="js/bootstrap.min.js"></script> 33 <script src="js/application.js"></script> 34 </body>
35 </html>
SEE ALSO: While you’re on the “Bootstrap Getting Started” page, check
out some of the otherexamples. These are some basic starter templates
that provide the basic Bootstrap components, allowing you to get started faster.
6. Finally, from the django_ecommerce directory run ./manage.py runserver and
navigate to the main URL shown - [http://localhost:8000/](http://localhost:8000/. You should see ‘Hello, world!’
7. Some of the paths in the above template are not necessarily correct, so let’s fix that, then we will put our Star Wars theme on the main page!
The first thing to do is use the Django{% load static %}template tag, which will
allow us to reference static files by the “STATIC_DIR” entry in oursettings.pyfile. After
adding{% load static %}as the first line in ourbase.htmlfile, we can change the
srclines that load the CSS and JavaScript files to:
1 <link href= "{% static "css/bootstrap.min.css" %}" rel="stylesheet"> 2 ...snip...
3 <script src="{% static "js/jquery-1.11.1.min.js" %}"></script> 4 <script src="{% static "js/bootstrap.min.js" %}"></script> 5 <script src="{% static "js/application.js" %}"></script>
If you refresh your page, you will see that there is a change in the font, indicating the the CSS file is now loading correctly.
Installation complete. Your finalbase.htmlfile should look like this:
1 {% load static %} 2
3 <!DOCTYPE html> 4 <html lang="en"> 5 <head>
6 <meta charset="utf-8">
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <title>Bootstrap 101 Template</title> 10
11 <!-- Bootstrap -->
12 <link href= "{% static "css/bootstrap.min.css" %}"
rel="stylesheet"> 13
14 <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements
and media queries -->
15 <!-- WARNING: Respond.js doesn't work if you view the page via
file:// --> 16 <!--[if lt IE 9]> 17 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 18 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 19 <![endif]--> 20 </head> 21 <body> 22 23 <h1>Hello, world!</h1> 24 25 26 <script src="https://js.stripe.com/v2/"
type="text/javascript"></script> 27 <script type="text/javascript"> 28 //<![CDATA[
29 Stripe.publishableKey = '{{ publishable }}'; 30 //]]>
31 </script>
32 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 33 <script src="{% static "js/jquery-1.11.1.min.js" %}"></script> 34 <!-- Include all compiled plugins (below), or include
individual files as needed -->
35 <script src="{% static "js/bootstrap.min.js" %}"></script> 36
37
38 <script src="{% static "js/application.js" %}"></script> 39 </body>