Hello everyone and welcome back to our bootstrap course for beginners.
Now in this lecture we're going to be setting up at the NAV for our Web site.
Now make sure whenever you want to save you click file and save snapshot or command control as here
to save the bin at its current state.
So let's go ahead and start building this nav element with bootstrap classes of course so we can go
ahead and click on outputs that we'll see a bit of output as soon as something begins to appear on the
screen.
So we're gonna take this nav tag that we have here and add a class to it.
And typically when you're just coding with vanilla each commands yes.
As the class refers to some class you're going to use to style and CSX but bootstrap is different because
a class does not need to be styled if it is a bootstrap class and bootstrap classes have their own reserved
keywords that will automatically be applied because we imported bootstrap down here with the CDO in
this code.
So therefore see what happens when you type in a class like nav bar.
Now this means that we're now making an element of type nav bar not just of the normal class nav bar
but of the bootstrap class Navarre because this is a reserved word.
Similarly we can go ahead and make it a Navarre expand large number expand large means that this nav
bar will expand when there is a large screen size.
But before that the now bar will be toggled.
This is another one of the bootstrap classes you can use for nav bar.
I can imagine there are very many.
Now we're gonna be designing mobile first which means we're going to be considering how the Web site
looks on a mobile screen about this big first.
Why.
Well because mobile users are increasing in terms of web users.
It was a 50 percent and now it's climbing to 60 percent of web users being on mobile.
So that's why mobile first is increasing in popularity.
OK.
Let's go ahead and also make this now bar light and we can make the background light and we can make
it rounded and fixed top.
Now all of these classes I don't have to style myself in CSF.
They're all part of bootstrap now.
Bar light will make it a light color background light will make the background a light color rounded
we'll round the now but this is optional and fixed top means that the NAB bar will be fixed at the top
no matter how much the user scrolls down the page.
Now fixed top will also give this element the position absolute automatically which means that it will
now be outside of the Dom side of the document object model and it will be treated as though it was
on top of them all on its own you'll see how this looks at once we actually get more code written and
this output will change to include aren't little now.
OK so those are all the classes we need for the NAF I'm going to toggle the output for now because you're
going to have to add a bit more here.
So what we need next is an icon.
Now this icon all represent our logo.
No we're building a company Web sites you can either add an image that is an actual company logo or
you can use an icon.
Now bootstrap has many different icons.
You can use.
First there is the bootstrap icon library which is a library that you don't have to import yourself
because it is automatically included with bootstrap.
Then there are external libraries that bootstrap supports which you'll have to add or import in here.
We are going to go ahead and use the default bootstrap library of icons because that way we don't have
to add any more code down here to import icons as well.
We don't have to import any library.
Of course you can also use an image.
So we're going to use a diamond icon to represent our logo here just for the template of this project.
Now in order to do that go ahead and google bootstrap icons and copy in or search for the diamond icon
and you'll find this code that looks like this.
And it's quite a lot of code for one icon.
That's because it is an SPG which is a file type STV.
It is a vector graphic and it will automatically create an icon for you.
Now in this case it is a bootstrap icon.
You have been I bootstrap icon and this specifies the actual icon diamond.
Now the width by default will be one and one for the height as well.
But I've already changed it to two because we're going to need it a little bit bigger than that one
is quite small.
You'll see then we have the view box class and we have the fill which will allow you to change the colour.
Then we have the reference to where this icon is located.
In terms of its source and then we have a bunch of code here that is creating the icon.
So if we toggle the here goes slicing it but it'll show up soon.
This will make an SPG that will pop up here for the output.
OK so now we have an SPG.
Let's go ahead and make the rest of our NAV here so or what do next is make a little toggle button.
So when the screen is about this big we're gonna have a toggle that we can click on in order to show
the show the NAV blinks.
However when the screen is much larger than the navigation it's going to expand.
Okay.
So let's go ahead and make that toggle toggle symbol bootstrap actually has a class that will make a
target for you.
So what.
How to make it is you open a new button element because it is a button after all and it's going to be
of class nav bar toddler and the type is going to be button as well.
And the class data toggle to be collapse.
This means that it will cut perhaps any data associated with the toddler another class we need.
This is the data target.
So this button needs to know what it should collapse what is the target of the data to collapse and
the target is going to be our NAV bar element.
So we haven't made this yet but we're gonna need to make an element with an I.D. nav bar and this will
contain all of our links to different pages of the website.
And by assigning the target to that element damage that will collapse that element.
We also need to set the RBA controls to now bar so that we know what kind of controls to use and we're
gonna set expanded to false because when the toddler is toggling the NAV that means that it should not
be expanded.
The data should not be expanded and we're gonna set a label something like toggle navigation which is
typically the default.
OK.
So now let's go ahead and close that button class and that is set up for it.
You can see in the output hit run with J.S. we now have our icon that we can see here.
Sometimes it might take a while for the preview to load on the first run.
So that's fine.
But now we can see it quick one with us and make sure you have auto run Jason.
So you run with JavaScript and this is that icon that we put it in for the now bar and as you can see
there is a slightly lighter color for the NAV because you made it light as part of our bootstrap class.
And then the rest of the page is white.
OK.
Let's go ahead and highlight a little bit more.
And now let's set up the rest of this toddler.
So what we need here we have almost all of its setup for the toggling but we also need to add an icon.
So we're going to open a new span element span is another element type.
However it is very vague and general.
So whereas button is specific and div is a little bit more general but still more specific than a span
span just represents an element that has styling.
So we're going to give it the class nav bar toddler icon.
This is another bootstrap class and it will immediately make a toggle icon for you.
So as you can imagine you can see you can start to see why bootstrap is very helpful.
It helps you increase your efficiency because it comes with all these default classes that you don't
have to style yourself so click on output Quick run.
And we should see this soon.
OK.
So this will make that tiger.
But for the target we also have to set up what it has to toggle which in this case is going to be those
links that we have to make.
It's going to toggle our actual page links.
So let's go ahead and make those next just below the button we're going to set up a div.
And this is going to be a list because toggling works best with lists and this would be a list of page
elements.
So go ahead and open a new div and you're gonna make the class collapse.
That means that this data will be associated with the collapsing as you can see we have your data toggle
collapse and so we have to match that here with the class collapse because this is what is going to
be collapsed when we click that toggle as well.
It needs the class now.
Bar collapse and we're gonna give it the I.D. of the exact same I.D. we use as the target which is nav
bar.
So I.D. equals now Bar.
Make sure you don't have a hashtag here because we are setting the I.D. We're not calling an I.D. so
it must be set directly and go ahead and close that div for now and add a closing div tag.
Now in this div is where we're going to have a list that will represent our links.
So first we're going to make an unordered the class is going to be a now bar NAV and we're also going
to add an extra class called M.L. auto.
This is going to set the justification of the class.
Now you can find more classes on the blue stripe documentation because as you can imagine there are
many different classes so we're just showing you how to work with the most common ones.
And of course you can look up more as you need them.
You don't have to study all them but you can study them as you need them.
So project based approach M0 auto means that the links are going to be justified to the right of the
page.
So that means we have here the page and this logo is justified to the left but then the rest of the
navigation will be here on the right.
That's a pretty typical design for websites.
OK so right now we have the unordered list set up.
If you do want it to align to the left you just use and are auto.
You can also look up some more different justifications but M.L. be justifying it to the right.
OK.
Now in this U L tag we actually want to set up a list item for each link so to open a list item we type.
L I am not going to give it the class nav item.
So this again is a bootstrap class.
That means that we're going to be treating this as a navigation item.
Make sure you close that list tag as well.
Typically it's useful to close a tag as soon as you open it.
Otherwise you could forget.
If you're using an idea so an environment like an application like Eclipse or brackets atom then it
will automatically create these closing tags for you and it will also have collapsible divs which are
quite useful as well.
But James Bean is useful because it's an online editor but it doesn't have these kinds of auto generations.
So make sure you don't really do it yourself.
Okay so the first item we set up that it's a list item and we said it's class.
Now we're going to set the actual link so a link is open with an anchor tag a stands for anchor and
the class here is going to be nav link so navigation link and the H ref is the reference to where the
link links to.
And it just putting a hash tag here means that it will link to the top of the homepage.
Make sure you close that tag and then give the name home.
So that means that whenever someone clicks on the word home we will link them back to the top of the
page.
We go ahead and run with JavaScript and we should see this pop up soon but we can add more code in the
meantime.
OK so we have a home and we've closed that.
Let's go ahead and make the rest of the links as well.
So we're going to need a list class going to separate us a list class again now.
Item so we're following the exact same structure to make the second list item.
And this time it's going to be another anchor of class nav link.
But the H ref so the link anchor it's going to be different.
The target is now going to be a different area of the page and in order to send the user to a different
area of the page you can call the element that you want to go to by its ideas.
So we're gonna send them right here to this next section here which is services overview and we're just
calling it by its ideas with the hash tag here.
Then we can close that anchor tag and write the text associated with the anchor tag which is going to
be overview and then close the anchor tag right after the text.
Go ahead and hit run and we should be seeing as soon
OK.
Now we have the list item set up.
Let's also go ahead and set up some more.
This item so we're going to have one for each of the sections here for our featured products for our
services and for our contact.
So we're going to use the exact same format to set that up.
This class equals now item a class equals.
Now link you reference is going to be featured products carousel which is the idea of that second item
we have and the text to click on will be featured and we'll go ahead and close that list item and we'll
have another list item of the same class now item number classes can be reused for multiple items and
the anchor class will be nav link and the reference will be the services element that we have on our
single page Web site.
We can go ahead and close that list item as well.
Then we're gonna have a list item called nav item.
We're going to open up its NAV link the exact same way.
So as you can see there's a pattern here because we're using the same bootstrap classes for each of
the navigation elements.
So each of these represents a different link item for the user on screen.
OK.
So those are all of the different link items we have we have home overview featured services and contact.
So every time the user clicks on one they will be scrolled to that part of the page.
OK go ahead and hit run with JavaScript and should be seeing this on your page soon but otherwise that
is all that we need for this section of the page.
Now make sure that you're closing navigation tag is outside of the button for the toddler and the actual
links.
So that could be why we're not seeing it in the console.
So make sure it's just outside here because the navigation should contain the logo and all the navigation
links.
So go ahead and test that again and yes that was the problem.
Now we can actually see all this.
I'm going to go ahead and just toggle close each gimbal and show you what we've built so far.
We have here the logo.
We have a home page an overview a featured and a services and a contact.
And if we bring back the issue e-mail here you'll notice the output got smaller the window got smaller
and this toggle button appeared.
So when we click on this we'll see our navigation in this beautiful list here.
And as you can see it's associated with a different link for each one.
And when you toggle it toggles closed.
So congratulations everybody.
As you can see bootstrap makes it really fast to make these beautiful designs.
So in the next lecture we are going to be continuing with our project and we are going to be building
the second div here.
The services overview.
Other than that that is everything for this lecture.
And we will see you in the next lecture.