Welcome back, everyone, in this lecture, we're going to be discussing the nav bar.
This is the navigation top bar you see at the header of a web page.
Let's go ahead and check it out.
OK, here we are inside a visual studio code.
What we're going to do is just briefly explore that documentation, as well as a couple of key ideas
and class calls that have to do with navigation bars.
If you go to get bootstrap dot com, you'll notice that at the top of the page, there's this purple
header.
And this is actually a nav bar on the page.
So what is a nafaa?
It's just the way to navigate to other web pages across the entire website.
For example, when you click docs, this is typically a link.
So the main idea being is that each of these are anchor tax, and sometimes depending on how this is
exactly structured, they can actually be unordered list with different list items in case you wanted
a dropdown inside your navigation bar.
The other really cool part of using bootstrap specific navigation bars is Watch what happens when I
make this window smaller and smaller?
You notice I can read right now home docs, examples, themes, blogs, et cetera.
As I begin to shrink this down until there's less and less room, there's suddenly a breaking point.
And you'll notice that there's this ability to collapse things, and you'll notice that once the screen
is too small to actually fit in all that text, they create what's known as a little hamburger icon,
which is the collapsed version of the actual navigation bar.
And because I'm using a bunch of bootstrap classes here, when you expand this, you get to then see
home examples, et cetera.
And then a different section for their actual social links.
And there's also another download button here.
So hopefully you start to get the idea.
OK, this is some sort of navigation bar HTML element.
Then there's a bunch of anchor tags, and I can also add in things like buttons, and this is a button
that would actually execute some sort of functionality to download something.
And what's nice is it has this ability to hit this kind of breaking point and then collapse.
This is really nice because now you don't need to worry about the actual monitor size that someone's
looking at this, maybe on a tablet or a phone or a laptop, et cetera.
Or if they happen to be really zoomed in, it would adjust as necessary.
Now where can we find out more information about the nav bar?
You just click on docs and then NAV Bar is going to be underneath components.
There's two main things to know about the math bar.
There is NAVs and tabs and then the navar section itself.
So if you click on NAV Bar, this will essentially just give you a bunch of examples of nav bar and
the key classes to remember.
So you scroll down here, and I would suggest you actually read this supported content if you start
getting really into setting up a really nice navigation bar.
But the main thing to note here is that in this example, they pretty much show you the main classes,
and this entire navigation bar is wrapped in a nav element with a bunch of classes on it.
So there's Navar Navarre expand large.
This has to do a little bit with the grid system.
You'll also notice there's Nafaa, Dash Light and then background.
That's light.
These are classes that are just stylistic, so there's different color schemes and that sort of thing.
And if you come to the color scheme section, you would drop down here and see the default color schemes
so you can see, OK, there's nafaa dark and then background dark.
So if you say nav bar dark, that's going to make the actual features be light and then you'd have background
dark.
That's going to make the actual background dark.
So there's some color schemes that you can play around with, and you can actually then say, OK, I
actually want the background color to specifically be this in a certain point.
Maybe you want to overwrite this in your own CIUSSS.
There's also the ability to use containers.
I should point out that's actually not required, but the main thing I want to know is if we come back
to the how it works section and scroll down a little bit.
There's a bunch of different types of supported content.
So what is a supportive content?
There's what's known as a brand.
This is typically going to be an icon or your company or project name here.
They're just calling it NAV Bar B could see on the actual bootstrap page.
It's actually the bootstrap icon.
So if I were to click on this, this is known as a brand icon, and it typically takes you back to the
home page.
You've probably seen this on other sites.
Now, let me go back to the documentation.
So that's known as a brand.
The brand can be either a text and image or image and text, so there's actually examples here.
So brand, this is text brand.
This is image, and here's image and text, and you can see the relevant classes as well.
So then there's the navigation links, so you can see home features, pricing disabled.
These are the classes you'd be using for that.
And then the point to figure out here is when you're actually done with your brand class.
So you have Navar Brand here, then you have this little button that collapses.
That's going to be the hamburger button that shows up.
Once you're done with that, you create other device and you put these items into a class called collapse
nav bar dash collapse.
And this actually allows this to collapse and.
And it shows you the unordered list that holds all those links and items.
So we're actually going to be playing around with this particular example.
But you should also notice you can actually even put forms into the navigation bar.
So putting forms into the navigation bar is typically used for something like a search item where they
search for this, they hit search and maybe it does an automatic search using the back end technology.
You can also just put normal text so you can have a nafaa text with an inline element.
And then, of course, the color schemes.
What I want to show you right now is.
We're going to come back to the supportive content page, and we actually won't use this one.
I should also point out there's the ability to put dropdowns inside a navigation bar.
But we're going to scroll down until we get to the nav section because this is typically how we're going
to use the nafaa.
So we see NAV Bar home features, pricing disabled.
That's the one I want.
It's in their nav section.
Go ahead and copy this.
Copy it to the clipboard.
And then put it inside, and this is actually go inside our body.
So we have this navigation bar.
And you notice that depending on the size of your actual video Visual Studio Code Live Preview, you
may see all the features that is home features, pricing, disabled, all those links.
But if you begin to collapse that too much, you'll actually get this hamburger icon, which is going
to show you everything.
So we're going to briefly explore the different classes that are available to us.
So I mentioned there's the nav bar class.
You'll notice this one is actually not within a collapse call.
So let me zoom in here to the code to actually explain what's going on to you and what the class calls
are doing themselves.
You'll notice there's a div here which puts everything in this class container fluid.
And then there's the NAV Bar brand.
The NAF Bar brand typically doesn't have the collapse attached to it that way.
Whoever's on your site can always see the brand and go back to the home page for everything else.
For example, for home features, pricing disabled, those all get attached with a class called collapse
nav bar collapse.
So you notice this div right here and it goes to all the way down to this div.
So this whole section is within its own division container with collapsed nav bar collapse.
Anything inside this div, once it's collapsed, will go into this little icon.
Home features pricing disabled.
So note what happens if I were to take out one of these?
So let me actually creates another unordered list.
This one's going to be outside this div.
And then I'll create a list item here that just says.
Some text and you'll notice by default, it makes that little bullet point.
But you get the idea that this actually never actually collapses because it's not within this collapse
now far.
Now let's imagine I wanted to make it look good.
What actual item should I use for the class?
I should probably add in nav item there, so I copy this.
Put that inside the class call and then also put inside my unordered list nav bar, dash nav.
So as you begin to add in those classes, look what happened, this starts to look nicer.
It starts actually follow that bootstrap template.
And then there's other classes as far as like aligning it to the left or right can even use text online
for that.
But the main idea here is that in your navigation bar, you typically have your nav bar brand in its
own division, and then you create another division that just contains a really large unordered list
doesn't necessarily need to be really large, but it's an unordered list called nav bar nav.
And then you just have list items for all the links you want to go to on your page and notice.
There's eight reps here.
So they're all just list items with anchor tag items themselves.
And then that's essentially it for NAV Bar.
So again, it's a nav H.M. element.
You have a division, typically some sort of button for your home patchier nav bar.
And then if you want to keep adding more items, you could make an unordered list with list items.
Notice then you just copy the class calls there.
But if you wanted to actually collapsed into the hamburger, you would make that new list item into
the actual collapsed div.
So let's actually practice making for the last thing in this lecture and other unordered list item.
So I have home features pricing the Seybold.
Let's make another a little home here.
So how would I do that inside my unordered list?
I would add in a list item, I would make an anchor tag.
And then here I'm going to call it my own link and then I just need to make sure the classes line up.
We can see that list items have this nav item class and then I can see there's a nav link.
You can also disable it if you want to.
And later on, we'll show you how to add in logic for this labeling.
But then I can just say, OK, this anchor tag, that class is going to be nav link.
So now when I expand this collapsed, I can see my own link here.
Now this link is actually doing it.
There's no rev, but you get the idea.
This is actually just a list inside the navigation bar.
These are just list items, home features, price and disabled.
My own link.
They're just list items with some class calls to make them look nice.
OK.
Last thing I want to point out is up here at the top in navigation bar.
If we want it to actually change this, we could change this to dark.
So let me zoom in here so you can see the changes.
I can say nav bar, dash dark and then background.
There's going to be I think it's dark for dark or background.
Dark.
There we go.
OK, so that's how I could edit the darkness there again.
You can see that in the actual color schemes.
And this is all super easy to use for your benefit with bootstrap.
Notice just how easy it was to make something look super nice and how easy it was to actually understand
it.
After looking at this a little bit, hopefully you're able to tell, OK, it's just an analyst with
list items and specific cost calls, and that's really all a navigation bar is later on.
You just have to figure out what apps to reference for other places on your website.
For example, these could link to other tools like this go to the other that each HTML file and then
it would link to that file.
And in fact, let's do that for one last example.
So remember, I said my own link here, I'm going to call it, go to other and then we're going to have
this ref say other than HTML.
I'm going to create that file.
So create new file called.
Other than HTML.
And let's make a heading one.
Say hello.
Save that change.
And now inside my example, I have my navigation bar.
Open it up, it says, go to other, I click on it and now it says hello.
Just as we would expect for a real web page.
OK, that's it for this lecture.
I'll see it the next one.