Now, in the last lesson we spoke about all the amazing things that you can do with Bootstrap, and how 1
generally awesome it is. 2
So in this lesson I want to show you how exactly do you get access to this awesome library. 3
How do you install it into your web site projects? 4
So, to do that, let's head into Atom, and let's add our Web Development project folder in here, so that 5
we can create a new folder called Bootstrap-installation. 6
And inside this folder I'm going to create a new file called index.html. 7
Now that we have this new web site, we can go ahead and create the html boilerplate, and give our web site 8
a title, Bootstrap Installation, and under the title, which is usually where we put in our links that linked 9
to our stylesheets, for example, this is where we can add the Bootstrap framework. 10
So if you head over to getbootstrap.com, you'll see that they've got a whole page that's dedicated 11
to how you can install Bootstrap, and it's super super easy. 12
So, the simplest way is just to copy the BootstrapCDN and paste it into here, and all that this does 13
is that when your browser reads through this code to try and load up the web site, once it gets to 14
this line, it goes over to this 15
URL and downloads the Bootstrap files 16
if the user doesn't already have it cached on their browser. 17
So I just want to quickly explain, firstly, what a CDN is. 18
So CDN stands for Content Delivery Network, and the concept is really simple. 19
So, do you remember how previously we looked at how the Internet is delivered through all of these submarine 20
cables, 21
right? 22
So, for example, if the server for my web site is in the US, say, in the West Coast, and I try to access 23
my web site from the UK, then I would probably need to go through one of these transatlantic cables, and 24
then there’ll be some more wires that goes across the land, 25
and that request reaches my server over here. And then once that request is received, then it has to send 26
back all of those files, the HTML, the CSS, the Javascript, back through all of those routes and back to 27
me, to my browser, so that it can be displayed on my web site. 28
Now, as you can imagine, if that is the only location where your web site exists, then that's quite a long 29
route to travel. 30
And even though these are pretty fast cables, it still generates a delay of, you know, maybe a few milliseconds, 31
or if there's a lot of data that I need to fetch over, like images or videos, there might be a delay of 32
a few seconds, and, I don't know about you, but I generally don't wait for a web site to load beyond maybe 33
like two seconds, at which point I presume, 34
oh, you know, it's probably down or there's probably some problems. 35
So this is where a Content Delivery Network comes in. 36
So instead of hosting your web site just in a single location, say over here, you actually have a whole 37
bunch of points where that web site can be accessed. 38
So that means that if my request starts off from the UK, then it will look for the location that is the 39
shortest distance to get that web site delivered. And that dramatically cuts down on the latency, or how 40
long it takes for your web site to load up. 41
And in terms of Bootstrap, they've hosted their Bootstrap CSS files on MaxCDN, which has a whole number 42
of routing points across the world. 43
So that means when your users are trying to load up your web site that's using Bootstrap, then it can 44
access it relatively quickly no matter where in the world they are. 45
So that's a quick lowdown on CDN. 46
And that means that when your browser reaches this link, it'll look for the shortest route to download 47
this CSS file 48
if the user doesn't already have it. Now, because Bootstrap is one of the most popular frameworks that 49
a lot of modern web sites will have, then it's very very likely that your users will have already downloaded 50
this CSS file because they've loaded up a web site that uses the same file. 51
And when that happens your browser actually caches it, 52
so it saves the local copy 53
so you don't have to download it every single time. 54
And that's one of the other advantages of working with Bootstrap. Because it's so common, because it's 55
so popular, your users will probably already have this file on their browser cache, 56
then it will again cut down on the latency. 57
So now this is one way of installing Bootstrap onto our web site. 58
And now if I go ahead and add a h1 for example, then you'll see that it gets styled using the Bootstrap 59
framework. 60
So let's copy the full path, 61
go to our browser and paste this in. 62
You can see that this font is different. 63
So say if I go ahead and comment this out, so I'm going to highlight this line and select command / 64
or control / on Windows, hit save, and we go back over here and we refresh, then you can 65
see this is our default HTML styling, which is this Serif font that looks kind of ugly, but with Bootstrap 66
it looks a little bit nicer. 67
Now, the other way that you can add Bootstrap to your web site, especially if you're creating a web site 68
from scratch, is to just copy and use their starter template. 69
You can see that it's got the HTML5 declaration. 70
It's got all of the things that you normally need in your web site, 71
the character set, the Bootstrap CSS, 72
it’s got a title already added for you, the body, the h1, which you can delete if you don't need. 73
And then at the bottom it's got some Bootstrap Javascript and jQuery. 74
Now we're going to be learning about Javascript and jQuery in in the next modules, 75
but for some of the components in Bootstrap to work they actually need some Javascript. 76
So for example if something has to change in appearance on your web site, 77
so, for example, like a dropdown menu, 78
then this actually needs a little bit more code than just HTML and CSS, because this is kind of a functionality, 79
right? 80
And that's what this Javascript and jQuery is going to help achieve. 81
So if you wanted the complete set and for everything that you'll implement in Bootstrap to work, then 82
the easiest way is just to simply paste in the starter template and now you will have everything that 83
you need in order to start using Bootstrap. 84
Now the third way of installing Bootstrap is to simply download the CSS and Javascript source code 85
so that you can include it into your web site. 86
So instead of pointing to a URL on the Internet, you can point to a relative URL that will be included 87
with your web site. 88
So, for example, you might say, you know, go into this CSS folder and find a 89
bootstrap.css. 90
And this is what I want to use for my web site instead. 91
Now the downside to this is that this negates any sort of caching that a user will have. Because this 92
is a completely separate file, 93
the browsers will not recognize this and will not know that it's already been downloaded and already 94
been cached, so we will have to download all of these files when it tries to load up your web site, which 95
leads to possibly a little bit more latency. 96
So throughout this course we'll be working with the easiest way of using Bootstrap which is simply to 97
get it through the CDN. 98
And usually I tend to advise just when you're starting out creating the web site using Bootstrap 99
is just to load up the example code 100
and this means that you'll have everything in there ready to go 101
and it was only one copy and paste away. 102
So that's my recommendation, 103
but of course it's completely up to you how you decide to do it. In the next lesson, 104
we’re going to look closer at how we can design our web site and start replicating the designs using 105
Bootstrap. 106
So I'll see you there.