Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Introduction to bootstrap
Login or
purchase this course
to watch this video and the rest of the course contents.
0:02
Do you remember that scary page from the web design section? It looked like this, it was just plain basic HTML, zero styling.
0:10
My contention was that most of you were like "oh my gosh, I don't even know where to start when looking at something like this"
0:16
to try to make it look like AirBnB or something beautiful. If we just take Bootstrap and drop it into there,
0:23
you'll see it already is going to look quite a bit better. So it will look like this.
0:27
Now, the title slightly changed but other than that it's identical, other than just including the Bootstrap CSS,
0:33
but notice how much more pleasant it is to look at. How much nicer the words are in terms of reading.
0:40
The line height changed just a little bit, the fonts and spacing, the spacing between the letters, the spacing between the lines, all of that,
0:48
the typography is much cleaner, the headings look better, the colors are adjusted a little bit.
0:54
Bootstrap, just by including it, will take any page and make it look a little bit better,
1:00
but we want to go a lot farther than that, remember, this is our goal, this is the landing page or homepage of our Blue / Yellow Rocket Band.
1:08
Now, let's just do a quick tour to point out some various pieces that we are going to see on our tour of Bootstrap.
1:15
So we have this navbar across the top, that comes from Bootstrap, you can't see it because I am not resizing the screenshot,
1:21
but if I did, you would see that that is a responsive design
1:24
that turns into a slightly different version on mobile than it does on wide desktop screens. We have nice looking call to action buttons,
1:31
albums, upcoming events and "get notified", we have this big banner, this hero image to call out to people coming to our page
1:39
to just let them know "boom, here is the band", like you are on stage with them here, and this is part of one the themes that we are going to bring in,
1:49
you can see the form about getting notified looks pretty nice, that comes from Bootstrap, both the button as well as the form and the way it behaves,
1:58
from some of the form controls in Bootstrap and the image and the upcoming event below the up above picture of the band there,
2:07
that's actually in the grid layout so that image itself is responsive so it changes based on the size that it has to work with,
2:16
as well as those two components, they don't just crush themselves together,
2:20
they fall one on top of the other when it gets too skinny like on mobile as well.
2:24
So all of this is going to come from the Bootstrap grid layout and image classes. So with that in mind, let's go take a quick tour of Bootstrap.
2:33
Now, you may be tempted to pull up bootstrap.com, that's not Bootstrap; getbootstrap.com, that's where Bootstrap lives, just remember,
2:42
there is some sort of the weird site just at bootstrap.com. So here we are at getbootstrap.com,
2:48
notice there is a notification a Bootstrap 4 is coming pretty soon, so it's not released yet, I believe there is few breaking changes
2:55
so just be aware when that comes out; but here is what we want to look at; we want to look at Bootstrap
2:59
and it's broken into a couple of sections, we can download the zip file and solve it that way,
3:04
I am actually recommending the way to do this as via Bower or npm, take your pick there, something that can auto update and manage that for us.
3:11
So let me just click on getting started, and it talks about how you download, I talked about you can just download the Bootstrap source,
3:18
it comes with Saas, so kind of a higher level than CSS design language there,
3:23
you can use the CDN, that's what you get from the startup projects in Pyramid or you can install with Bower, just "bower install bootstrap"
3:30
or maybe a better option is to use bootstrap-CSS and that will give you a smaller version.
3:38
You could also install with npm if you don't want to use Bower. Let's look at a few examples.
3:43
So over here, this gives us a quick idea of what we have to work with. You can flip through and you see there is a bunch of options,
3:51
of all the various things you can do, here is a nice little Cover thing, here is a Carousel, and so on, let's just focus on this one real quick.
3:59
So here you can see we have the nice let's call it "well", this thing that says "theme example" at the top, you can see the navigation,
4:06
the navigation is a little dropdown and if I change the size it should even become responsive and it does, like this, very nice. All that is automatic.
4:15
There is some nice buttons, different sizes, and colors and so on, tables. You don't think too much about styling tables these days
4:23
because people shy away from them, but when you have tabular data - guess what,
4:26
a table is pretty sweet and they have nice easy designs for it, we've got thumbnails, these labels here, badges, dropdowns, all kinds of stuff,
4:35
cool progress bars, and so on. So next, let's go back to the Bootstrap site, they could work on their layout there a little bit couldn't they?
4:45
Let's look at CSS, the design elements you have to work with are broken into a couple of categories, you've got CSS, which are the core CSS elements,
4:53
and you've got components and then things that require JavaScript to work, so that goes at the end, these are broken up into different pieces,
5:01
and we can check them out. So there is a couple of things to notice over here,
5:05
that Bootstrap is HTML 5-friendly, it's mobile first, I talked about typography,
5:10
I haven't talked about normalize.css but normalize is really important. One of the pains of web design is
5:18
when on different browsers the same HTML CSS looks different, and often that difference arises from the browser having no explicit style for a thing
5:28
and then making their assumption about how that should look and if say Firefox has a different assumption about how H1 should look
5:36
compared to say Chrome, then that's going to look a little bit different. Normalize explicitly sets every single possible style
5:43
so those types of challenges basically don't exist. So when you include Bootstrap, you get one of these reset or normalization.css files
5:52
which is great, we are going to talk about the grid system and how you can use that to achieve tabular type layout that is also responsive,
6:01
it's not just tables jammed in there, we talked about typography, tables have really nice ways to style them,
6:07
let's see if we can pull up one, like this is a pretty good looking table, table-striped,
6:11
here you can see the alternating styles, it's a little subtle, so a little bit harder to see, so all you've got to do is throw it on there
6:17
and your table looks much better automatically striped. You can see that forms look much better in here,
6:23
so we can use like form control elements, we are going to get into that, buttons, we have some nice looking buttons and colored call to action
6:31
sort of primary color buttons, very nice. We are going to spend a dedicated section on that as well as on images,
6:38
you can see what different image shapes that we have to work with, as well as responsiveness. Speaking of responsive, Bootstrap comes with a number of
6:46
responsive design helper classes. So for example, if you've got certain page elements that should only show up on large screens
6:53
and you want a different representation or a small one, you can combine these settings to basically hide those.
7:00
I use this often in navigation, less so outside of there. Now, let's look at the components,
7:06
there is a few interesting elements in the components, we have these Glyphicons, these are OK, Font Awesome is way better,
7:12
and so I'll be using Font Awesome for our stuff, but it kind of plays the same role. The idea is to use a font for little icons rather than pictures
7:19
because you can perfectly resize them by changing the font size and change the color by just changing the color for an element,
7:26
which is very hard to do with images. So you can sort of style these icons better if they are fonts than if they are fixed images.
7:33
The most important take from this section we are going to work with is navigation, so you'll see little warnings as well like
7:40
warning, this requires the JavaScript to be available which requires jQuery and the JavaScript file for Bootstrap.
7:46
So you can have little tabs, like this, these are nice, or you can have these things called Pills, over here,
7:52
or more likely, what we are interested in is the navbar, down here, so something like this, make it wider,
8:00
it should look all different, here we go we have this nice little dropdown here and links,
8:04
stuff that sticks to the right, stuff that sticks to the left, we have forms, like search boxes, all kinds of stuff.
8:09
And we can even change this to be a dark version or a light version, depending on whether we put the nav inverse or nav default.
8:21
Last over in the JavaScript area you'll find some cool things as well, for example, Modal dialogues are really great or Scrollspies also, super cool.
8:30
Let's look at Modal real quick; so if we had some kind of link, we are going to click and have something that looks like this come up,
8:37
and put whatever HTML in the middle we like that's great, of course we can style it here we can launch a Modal dialogue and it kind of pops in,
8:44
and whatever you want to put in here you can have and you can close it back out and so on. So, we want to make use of that in our design, for sure.
8:51
The other thing that's cool down here is Scrollspy, so the idea is you've got these various sections on your page that relate to navigation,
8:58
and as you scroll, you kind of move into these other areas, and you'd like the navigation at the top to be stuck sort of to track as you move,
9:07
so if you are kind of doing a more of a one page design, you still want navigation, this Scrollspy is cool.
9:13
Alright, so that's a really quick fly over of Bootstrap.