Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Buttons and forms in action
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
The next thing we want to do is create a form with a button.
0:03
Maybe some hyperlinks with buttons as well.
0:05
So we'll just create a new HTML page here called "Buttons."
0:10
So we'll start by Bootstrappifying this.
0:13
Of course this goes in your standard and layout page
0:16
and your normal pages don't have to
0:18
to this, it just falls into place.
0:19
But for these little one-offs, it has to be done separately.
0:23
So let's imagine over here that we have a form.
0:26
Its action is just going to be nothing.
0:28
We'll just leave it like that for the minute.
0:30
And its method equals POST.
0:34
And in here, we want to have maybe something
0:36
for your email and your password
0:38
and let's say it's login, okay?
0:41
So, we'll come in here and we'll have
0:42
an input, type equals text and we'll
0:46
say placeholder equals email
0:49
we'll say it's required.
0:51
That's decent.
0:53
Actually, let's hold off on this just for a second.
0:55
Let's see it in its raw form here.
0:58
And let's have another input.
1:02
Make that password, placeholder
1:05
that's password also required.
1:09
And let's have a button, and I'll type equals
1:13
submit and I'll say login.
1:18
And maybe next to this button
1:19
we want to have a hyperlink.
1:23
Where for some reason, if you don't have an account
1:25
we can take you over to the register.
1:28
Okay, if we open that up
1:32
it looks very bad, very bad.
1:35
That looks super old school, doesn't it?
1:38
And of course it's going to look slightly different
1:40
in the different browsers.
1:42
So here's our email, here's our password.
1:45
The placeholders things are working.
1:47
The required thing is working.
1:49
Register works, but of course there's no file there.
1:53
So kind of working, but let's make this look better, right?
1:57
Actually, one of our goals is to make register
1:59
also a button, look like login.
2:01
I'm not sure about really the semantics
2:03
of putting it like that, but just for an example.
2:06
So let's start by saying how does it look
2:08
if we just put Bootstrap.
2:11
Looks a little bit better, right?
2:12
The general text input looks better and so on.
2:17
Let's go down here and just put a little style
2:19
on this so you can see it.
2:21
Of course, this would go in CSS, but just
2:22
for the demo, I'm going to just cram this on here.
2:25
Let's put it at least in the style section
2:27
that'll make me feel better.
2:33
So we'll give the forms a little bit of padding
2:34
to to push it away from the edge.
2:36
Let's also do this, let's say width is 500px.
2:41
I'll say that in just a minute.
2:42
We're going to make it look a little bit better
2:44
but let's build it up here.
2:46
So now we've got the margin is 10 on the input
2:49
and so hopefully that looks a little bit better.
2:51
Let's try, woo, it's not amazing, it's
2:54
nowhere near amazing, but it is better.
2:57
So what can we do with Bootstrap?
2:58
Well, let's focus on our buttons
3:00
since that's where we started.
3:01
I want that to be a button, and that to be a button
3:03
and I want 'em to look pretty much the same.
3:06
So in Bootstrap, a lot of this stuff is done
3:08
with classes, so we'll come down here and say
3:11
that first of all I want to treat this like a button
3:14
so I'll say btn, and then what kind of button?
3:18
There's themes that have different styles.
3:20
Is it like a successful thing
3:22
is it a possibly dangerous thing?
3:24
So you say btn either success or danger
3:28
or default or primary, let's go with primary.
3:33
And then we'll do the same thing
3:34
so this is our button in HTML
3:36
and here's our hyperlink, we'll do the same thing here.
3:43
That one's going to be a successful operation.
3:45
We want to encourage them to register, right?
3:48
Refresh, boom, look at that.
3:50
That's pretty sweet, right?
3:52
This one submits the form, this one navigates away
3:55
somewhere we don't have existing, but whatever.
3:57
You can see these are working well.
3:59
And that's pretty much it for buttons.
4:02
You can have small buttons, large buttons
4:03
different colors, I'll show you a little template layout
4:06
or a table of those and what they look like in a second.
4:10
And let's go ahead and round
4:11
out how these things look, right?
4:12
They kind of look a little bit boring.
4:17
We can do better.
4:18
So over here, we can say a class is a form-control
4:23
and sometimes this goes farther than you like.
4:26
It's slightly mobile focused, it trends
4:29
towards focusing on mobile, so you'll see
4:31
in a second, look at that.
4:33
Well, it's like okay that would be great
4:35
that would look super on a screen like this, right?
4:39
But the way it is right now, not so much.
4:42
Let's do a little bit of help on this thing.
4:52
Let's go put a little class on this
4:54
and just say text-align is center.
4:58
Here we go, that looks a little bit better.
5:00
So this is okay, I like the styles, the rounded edge
5:03
everything looks good, but I do have this zoomed, right?
5:06
There's a non-zoom version.
5:09
Whoops. So pretty decent, but when it looks like this
5:13
not so much, what can we do here?
5:15
Let's go and we'll put into our form here
5:19
a login, that looks a little bit better.
5:22
And maybe we'll even
5:29
throw our center on there as well.
5:30
Let's do one little quick thing
5:32
to make this look decent, I'm going to go
5:33
to the form, I'm going to set its max width
5:37
to be 500px, eh, 450, 450.
5:42
And then if we set the margin
5:43
on the left and right to be auto
5:51
it'll just center that.
5:52
And let's go ahead and say background color
5:55
we can even pick, oh it's over here in PyCharm.
5:59
Let's just create a little border
6:04
be it solid gray, I don't really want gray.
6:07
I just want to pick a color like that.
6:10
Okay, how 'about that, pretty decent.
6:13
We need a little bit more, maybe put 10 here.
6:20
Say margin top is 50px.
6:30
And I've noticed for some reason, periodically
6:32
that if you look at this, these extend too far
6:35
to the right by 10 pixels, so we'll just push them
6:38
back maybe a little bit more, 30, rather, instead of 20.
6:42
There we go, so here's our nice little login form
6:44
and it's looking really great.
6:45
We've got our buttons by just having btn
6:48
and then btn-style, right?
6:50
Primary, success, etc. and we threw
6:53
in some form control to make that look good as well.
6:57
If you head over to the training site, you'll see
6:58
that stuff in action all over the place.
7:00
There's a button, go to login, there's your login.
7:05
Here's your reset password.
7:08
If you want to register, there's your register.
7:11
Little CAPTCHA, 'cause people been trying to hack into it.
7:15
And so on, go to these course details
7:18
and we have still more buttons all over the place.
7:22
This one is a hyperlink, this one
7:25
actually submits a form, for example.
