Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: navbars demo
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:29 and this pretty much looks like all of your sites, so if you are going this in the expanded version,
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.