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