So now that we've designed our wireframe and we're happy with the layout and the structure of our web site,
then it's time to turn this design into the real thing.
And in this module we're going to be focusing on how we can recreate this design by using a lot of the
features and components in Bootstrap. And through building this web site,
I'm going to show you all of the cool features of Bootstrap, and how you can customize it and change
it to your needs.
So in the coming lessons we're going to be recreating this entire page and it's design using Bootstrap.
So the first thing I want to tackle is this navigation bar up here.
So I want to put in a navbar at the top where we have links to the different sections of our web site,
so that, for example, if I clicked on a company or something, it would scroll down to that section where
it's relevant to.
And this is usually the navigation that you see in the single page landing pages.
And in order to put in that navigation bar, we're going to be using Bootstrap. Now, because Bootstrap is
a library, which means that it contains reusable bits of code that we want to put into our project,
now sometimes with libraries you might have written them yourself,
so, for example, if you particularly liked a button that you created in CSS, then you might want to reuse
that bit of code by putting it into a separate file and dropping it into your projects when you want
to use it. Now, because this library is created by a third party, so it's somebody that we don't know,
it was originally made by the team at Twitter,
but since then it's had a large number of contributors,
and you can actually take a look at their core team, as well as how many people contributed to this library,
but the point is that in order to use this library that somebody else created, then we need to look at
the documentation and we need to see what are the guidelines and what are the rules that we need to
know about in order to use their components and their features.
So, the first thing we're going to do is head over to Documentation, and we're going to go over to Components,
and you’re going to navigate to Navbar.
And this is what we're going to add into our web site, something that looks similar to this. And we're
first going to create it and test it out in a Code Ply playground.
So I'm going to create a brand new one. Now, the first thing I'm going to do is to change the Bootstrap
version from 3.3 to 4.0, so that we're up to date with the latest version.
Now, inside HTML5 there is a element called the nav element, and this is kind of similar to a div but
semantically it's more clear what it is that you're creating and what it is that the section of code
does.
So that means if somebody else comes along and they see the nav section with the nav element, then they’re
going to know
this is probably going to be the code that's related to the navigation bar.
So if I run it right now you'll see that nothing, happens because, similar to a div, if the nav doesn't
have any content, it doesn't have any dimensions.
So let's change that. Let’s create a new unordered list, inside which we're going to have a single list
item, and this list item is going to be one of our menu icons.
So maybe we'll want a contact link inside our navigation bar.
So now, if I run the code, you can see I've just got a single bullet point that says Contact,
and this looks nothing like a navigation bar yet.
So we can start using the Bootstrap classes, and we're going to add those classes to our nav element
just as they've shown here in their documentation.
So the first one that we're going to add is the navbar.
And if we have a look inside that bootstrap.css file that we downloaded earlier, and let's search
for navbar, then you can see that by adding that class, then we include all of these CSS rules and apply
it to this navigation element, and you can see what it does is that it changes the position to relative.
It makes the content justified. It adds a little bit of padding. And it also adds some alignment and further
positioning rules.
Now, in addition to that, we're going to apply some other styles to the other elements inside our code.
So we're going to change the ul to have a class of navbar-nav and the li is going to have a
class of nav-item. And you can see that this is all from the documentation here, where you can see that
ul has that class,
navbar-nav,
and the li has the class nav-item. And you can also check over here in the actual source code to
see what applying each of these styles actually does.
And now that we've done that let's go ahead and hit run and we can see that we've now got a completely
different style based on those three different classes that we just added.
Now, the text in our navbar is probably going to be a link, right?
We want to be able to click on it and to scroll to a particular section in our web site.
For example, Contact maybe we'll go down to the bottom where we've got icons for Twitter, Facebook, e-mail
etc..
So this can't just be plain text and instead we should change it into an anchor tag.
So let's create an anchor tag that has the class of nav-link. And this will make our text look more like
a link, so that when I hover over it, it changes color, etc..
So we've got the class, and we need an href for this to be a valid anchor tag.
And I'm just going to leave that empty.
And finally I’m just going to close off the tag and add a link text called Contact.
And now, if I run the code, you'll see that Bootstrap has styled this completely differently and that
when I hover over it, it appears as a link by changing the color and also showing that little pointer.
So we've managed to create a very simple navigation bar just by adding a few classes and following the
structure that Bootstrap wants us to use.
So let's go ahead and add a few more links.
So I'm just going to copy these link items and paste two more in here.
So let's say that the second one is Pricing, and the third link in our menu is just Download. And now let’s
run our code and you can see that the strange thing is that it's made our navigation bar vertical.
So each navigation item is vertically stacked on top of each other.
Now that's not really what I designed it to be. I want it to be horizontal like this.
And also like this.
So, in order to do that, we need a class called navbar-expand, and this will expand the navigation items
depending on how large the screen is.
So let me show you that by adding the code.
So we're going to add navbar-expand and we're going to say large.
So, when I run this code, you'll see that in the current viewport, which is kind of the desktop
size, so laptop or desktop, where you've got quite a lot of width,
you can see that all the links are horizontally displayed next to each other.
Now when I go into a smaller size, say on iPad or iPhone, then it stacks vertically so that it uses more
of the real estate
and it's easier to see. Now, as they specify here, you can change that, whether it's large or medium or
small, to specify at which point it should go into the vertical.
So, for example, if I change this to medium and I run, now you can see that on a desktop, on a laptop size,
it is horizontal, tablet size
it’s still horizontal, but smartphone size it goes into vertical. So you can change that by just changing
the keyword here.
So, in my case, I'm going to stick to large, because we're going to add a dropdown menu a little bit later
on.
Now, the next thing I want to show you is that our navbar is not very obvious at the moment. It just looks
like I've got three links.
I don't actually see any sort of bar.
Well, you can add the style of the navbar to make it look something like this by simply adding a background.
And we're going to use background light here.
So let's add a background light class and hit run.
And you can see now our navbar has this light background, and it shows more clearly where the navbar is and where
the rest of the content is. Now, in addition to that, you can change the actual style of a navbar so that
it’s not blue.
And we can change the navbar to have a light style, hit run, and you can see that this looks more similar
to this, because we're using the navbar-light style of navbars, as they showed in the documentation.
Now Bootstrap, by default, has a number of colors, and you can see it most obviously if you go into
the Buttons documentation, and they show you all the names of the colors.
So you've got Primary, which is blue, and that kind of comes from the Twitter days where their primary
color was always light blue color, Secondary is grey, Success, Danger, Warning, Info, Light. So we can use
any of these colors just by using those words.
So, for example, if I wanted the background to be red, then I can say background danger, hit run,
you can see it turns red. Or if I wanted it to be yellow, then I can say background warning, hit run, and I
can change them to
all of these colors that you see here just by using their names.
Now, in our case I want to use a navbar-dark,
and I want to change the background to dark as well.
Now let's hit run, and you can see we've got this black background with a whitish navbar.
So that style comes from these two classes.
Now what if,
like over here,
I want to have a brand, say, the name of my company or the logo.
How can I implement that?
Well, we can read through the documentation, and you'll see that all we need to do is add a class called
navbar-brand, and it tells you that it can be applied to most elements but an anchor tag is the best
thing to apply it to.
So let's go ahead and do exactly that.
So outside of the unordered list I'm going to add a new anchor tag and it's going to have a class of
navbar-brand, and it's going to have an href of empty string, and then I'm going to close off that
tag and call it tindog, after our brilliant company.
So let's hit run, and you can see that we've now got the brand which is styled slightly differently from
the links to be able to differentiate it.
And that and all of the styling and all of these components comes free from Bootstrap just by adding
these classes.
So I hope you're getting the hang of this.
So now that I've got all the items on my navbar.
But if we take a look at our design, we wanted the brand to be on the left, and we wanted all the links
to be on the right,
so there's a little bit of space between them. But in our case they're all kind of huddled together, and
that doesn't look very nice.
So how can we shift all of these links over to the right?
Well first, let's first identify the container that holds all of these links. And it shouldn't be hard
to see that that would be the unordered list.
So that separates this group from the anchor tag which is our navbar-brand.
Now, in order to move this unordered list over to the right,
all we need to do again is to just add another class.
And we're not going to need to write any CSS of our own to style this navbar.
So what I want is, I want there to be a margin between these sets of links and our brand.
So Bootstrap has a nice class called margin left, ml-auto.
And if I hit run you'll see that what that class does is that it adds a margin to the left of this group
of unordered list, and the auto means that it will add as much margin as it needs to in order to push
this group right next to the edge of the screen.
So this is looking a lot better and a lot closer to what we've got in our design here.
Now there's just one thing that's not quite ideal. At the moment,
when we go from laptop to tablet, our navigation bar changes into the vertical format. Now, wouldn't it
be so much better if, when it gets too small to show all of these three links, to simply have a dropdown
menu where we can see all of these links, rather than have them take up so much space in the navigation
bar?
Well, how would we do that?
Let's take a look at the documentation on Bootstrap. So, we can scroll or simply select the Toggler.
Now, what the Toggler does is that, if you watch as I reduce the size of this navigation bar, then you'll
see that eventually it gets to a size where it's so small that it can't actually fit all of these links in
the same line.
Now you could either make the text smaller, or make it vertically stacked on top of each other, as we've
got at the moment, or the more intelligent way is having this button show up, which is called a hamburger
menu, because it looks, well somebody once thought it looks, like a hamburger.
Personally, being a hamburger connoisseur, I think it looks nothing like a hamburger, but there's only
so many fights you can fight.
So let's go ahead and click on it and you can see it creates this dropdown menu where we can now view
all of those links that are hidden.
And this makes the design really really clean and also makes the best use of the size of the screen
because on a mobile phone you probably don't want a bunch of tiny links bunched up in the same line.
It'll be really really hard to read.
And instead you want to have this nice dropdown menu.
So how can we implement this in our code?
Well, let's see what they did.
They added a button, which is going to act as that hamburger menu button, and when you click on it, it's
going to target something called navbarTogglerDemo02, which you can see is this thing here.
So they've created a div that contains everything that is collapsable, and put it inside that div.
And they've given it the class of collapse navbar-collapse, and given it a id that can be targeted by
this button.
Now let's see if we can do the same thing in our code.
So I'm just going to straight up copy this button over to here and I'm going to put that just below
our nav element. And the next thing I want to do is create that div.
Now the location where you create the div is really really important.
So first I'm going to show you what it looks like when I create the div here and I'm going to surround
the brand as well as all of our links.
So the div is going to have a class of collapse
navbar-collapse.
Now sometimes you realize that Bootstrap really could have made their class naming a little bit more
succinct.
You end up writing a lot of nav navbar nav navbar collapse.
But this is just the way that Bootstrap works.
And there are other frameworks which have more succinct names for their classes, but once you understand
how Bootstrap works, it's quite easy to pick up any of these other front end frameworks.
They all work in a really really similar way.
So now we've got this div class called collapse navbar-collapse, and I'm going to put the closing div
just after our unordered list so that the unordered list,
so all of these three links, as well as our brand, is enclosed in the collapsable section or the collapsable
di. And the final thing we need to add before our navbar is going to work is that we need that id,
because the button is targeting this specific id, so it knows that when you click on this button, which
div to collapse or uncollapse, because you could have many of these collapsable sections on the same web site,
and you need something specific so that the code knows which parts to collapse and which parts not to
collapse.
So let's add that id over here.
Now, of course, you can name your id whatever it is that you want. As long as it's the same as the data
target in your button, then it should work just fine.
So let's hit run, and you can see now if I switch over to the phone sized, all of the content in my navbar
disappears, including the navbar-brand and all three of my links, because we haven't closed all of
them inside this collapsable div.
So now if I click on this button you will see a dropdown menu and a nice animation that shows everything
that's contained in that collapsable area.
So in my case I would actually rather like my brand to still show up when it is in the mobile size.
So I'm going to take out my navbar-brand, or rather this anchor tag,
so I'm going to cut.
So it matters a great deal where you place that navbar-brand, because if you paste it below the button
that is our toggle button, then when you hit run you'll see that the brand appears on the right and the
toggle appears on the left.
Now if you place this anchor tag for your brand above the button, however, then you hit run, and their positions
get swapped.
So the first thing that gets rendered is the navbar-brand,
then we render the button.
So this is something to be aware of.
And in our case we actually want the brand to be on the left and the menu icons to be on the right.
So this is the format that we're looking for.
So now we've got this brilliant navbar, where it expands to have all the links on the right
when it's in a large display, so a laptop or desktop,
and when we're on a smartphone or a tablet, then it shrinks down into a toggle button, which we can show
or unshow our navigation menu.
Now there's a number of other things that you can do with the navigation bar.
So, for example, you can have a dropdown link like so, just by adding the class dropdown to your list item
and have a link
that is the dropdown toggle, and then you have a div with all the items that will be inside the dropdown.
So you're basically just copying this list item and modifying it to your needs to specify how you want
your dropdown to look like.
Now you can also affect the position of the navbar by changing it to a navbar fixed-top,
so that means when you scroll through your web site, it will stay at that position and it won't disappear
off the screen. Or you can have it fixed to the bottom so that you've always got it at the bottom. And
you can just copy this code to get this positioning and placement behavior.
Now in the next lesson we're going to be looking at the grid system and we're going to start to build
up our TinDog web site.
So there's a lot more fun stuff yet to come.
And I look forward to seeing you on the next lesson.