Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: navbars demo
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Here we are at getbootstrap.com, let's check out the navbar and you'll see there is a couple of options.
0:08
So, we have the default navbar, there is actually a brand image, you can put all sorts of links and stuff in there,
0:15
now if we slow down here, let's see, it requires JavaScript, so you'll see we're going to use this .navbar-collapse
0:21
that was that "hamburger menu" thing, in order for the "hamburger menu" to expand, we have to include the Bootstrap JavaScript on pages that use this
0:29
and this pretty much looks like all of your sites, so if you are going this in the expanded version,
0:34
you are going to need to use, include the Bootstrap JavaScript. It's no big deal to do so, but it might be something not on your radar,
0:40
so make sure you do do that and that library requires jQuery, so jQuery needs to precede it in the include statements.
0:49
OK, so you'll see this navbars, there is a lot of moving pieces here and I find it just so much easier to just copy this,
0:57
like here you can see this is the "hamburger menu", they are actually using the glyphicons for what that looks like,
1:03
you can replace that with whatever you want, if you don't want their style.
1:06
This part is for screen readers to tell that the action here that they are in, this will actually expand or collapse the navigation,
1:15
so sr-only is for screen readers, for the people with like low visibility or blind folks, things like that,
1:21
so you can help them out by putting things about your navigation up here, it all starts with the class navbar and this is what it actually looks like,
1:29
the thing that we are seeing here in HTML, this is it up here, with these little dropdowns, and so on.
1:34
So it's navbar and it has this light color, because it's navbar-default and this brand over here, this is like your logo, right, your brand area,
1:44
then we have the main set of links that are on the left, navbar-left, this is our form, all of these things this is navbar-left,
1:52
you can set an active item, so if we go back up here, you can see this one is active,
1:58
so if you want to indicate which page they are on you just do that here, and then we can come down here and see navbar-right,
2:05
this might be like your login, logout, user picture if you have people sign into your account, stuff like that,
2:12
and then they have this little dropdown here, right, so these are lot of unordered lists and list items and hyperlinks and so on.
2:19
OK, so let's see how this works on our page. So, here I have copied into nav that HTML, just the standalone HTML file,
2:27
everything we need, let's start by looking at the "head", we are including Bootstrap, 3.3.7 happens to be the current one and like I said,
2:33
we are including the bootstrap.js file which depends upon jQuery so we are including both those here.
2:41
Then we have the nav, remember nav is an HTML5 element and it tells the browsers and search engines "this is the navigation for the site",
2:50
that's really important because if you do searches you'll see that this navigation can actually drive what shows up on Google.
2:57
For example, if I search for "Python podcast", you can see some of those items appear in here so for example music appears,
3:08
it's also really nice of them to pull out the latest episodes for us, that's pretty cool, again, if we search for "Talk Python Training"
3:20
and scroll below the ads, courses, about, login, pricing, they kind of put together a navigation based on some of our nav items,
3:27
and some of the other things found on our page. So what I have done here, I've more or less just literally copied
3:33
what was on the Bootstrap page and dropped it in here, now I have this nav section, we'll pull that up in the end,
3:39
there is now some content here, this just puts some padding around the content. So, I more or less copied this over and I changed just a few things,
3:50
I changed what was up here, so we have albums and events and the shop and so on. And then our navbar right, we have a mistake apparently,
3:58
we have the account and logout assuming that we are logged in, right, we would show something different conditionally with a "tal:condition",
4:05
based on the account here. The forms and the more complicated drop downs are not here,
4:10
I wanted to keep it simple and of course, I put the Blue Yellow Rockets. We'll have real links on all of these, normally, but just to keep it simple,
4:17
it's not really a part of a page yet so I don't have any actual destinations for these hyperlinks. So, let's see it in action,
4:25
alright, here we have our Blue / Yellow Rockets, that's our brand,
4:28
it's a little bit bigger, we have our albums, you can see the color changes a little bit, this is all the float-left stuff,
4:35
here is the nav-right, this is our account and logout, and as I move it, you can see the right stuff sticks to the right and the others, doesn't.
4:42
Now, that's great, except for let's see if it's responsive, you'll see that it's somewhat responsive,
4:48
so yeah, this is not a fantastic user experience right there, that's pretty crummy but if we make it small enough,
4:56
like on a phone it would actually work really good. The problem is, there is like this intermediate stage where you have too much navigation, right,
5:05
like right here where this just goes all wanky. So, the other thing that we can bring in are the responsive utilities,
5:13
and this doesn't have just to do with navigation, it just happens to be something you typically will need to use if you have a rich navigation on top;
5:22
so over here in the CSS category, we have responsive utilities, now check this out, we can come over here
5:28
and we can dynamically show via "visible", or hide via "hidden" various elements on our page. And notice, these each apply to one screen size,
5:39
so if I want something that's hidden anything below 992 pixels I am going to have to put both of these classes on it, OK?
5:48
So, let's see how we can apply that to fix our navigational problem. So over here it looks like if I could get this one to go away
5:57
and medium size this would be OK, and then if I could get 4 and 3 to go away when it's little smaller, I could probably fix this, let's try.
6:08
In addition to having this nav, we go over here and say "you know what, I am going to add a class, the class is going to be
6:14
hidden-md and hidden on small." Let's go up here, I think this one just needs "small".
6:25
So what you want to d is you want to pick, it doesn't have to be the last three,
6:28
you just want to pick, if you are going to give up a one or two navigational items, which ones will that be, right, if you don't want this behavior
6:37
which I contend you strongly do not want this behavior, we are going to have to give up something on smaller screens,
6:42
so let's say 3, 4 and 5 happen to be the things that are nice to have, maybe they also appear on the footer or there is other ways to get there.
6:51
So notice now I refreshed it, we're on a medium-size screen, this link 3, 4 and 5 are hidden, if I pull it out just a little bit,
6:59
3 and 4 should reappear in just a moment, there they are, 3 and 4 reappear, and on a bigger screen realize I have a pretty small resolution
7:09
because I'm trying to record something that can be seen on small screens as well as large, so on full resolution, it wouldn't feel so cramped,
7:17
but let's make it a little bigger and then after we get pass medium you will see 5 should reappear, there we go. There is 5.
7:26
OK, so we can make it go in, and probably we're a little aggressive on number 5
7:32
but you can see that the navigation collapses just in a perfectly smooth way and over here, everything is working great.
7:40
Recall earlier, by the way, it's worth pointing out that they have the same thing uphere in Bootstrap
7:45
and I said they need to do something to fix their navigation. Maybe we could teach this Bootstrap guys something huh? How about that.
7:51
Alright, so over here we have this perfect "hamburger menu" and then on larger screens it grows dynamically.
7:57
This is a very nice way to use this responsive utilities to easily opt in to showing more or less content, based on the screen size.