Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Buttons and forms
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Buttons in bootstrap are super, super easy.
0:03
Here you can see a "get updates", where people can subscribe
0:06
to the newsletter for notifications
0:08
on things like new classes and so on.
0:12
Now in here, this is submitting that form
0:14
that posts your email address to the thing
0:16
that actually puts you in the newsletter.
0:18
So this one is a button, and we want it to be
0:21
nice and red, I've heard that red converts well
0:24
even though it's marked as dangerous
0:26
it's somehow attractive.
0:28
So btn and then btn-danger is what we used here.
0:31
You can also do this with links
0:32
so here's a link that just takes you from
0:34
the course's page to the podcast page
0:37
to encourage you to, you know
0:39
get more out of interacting with me basically.
0:42
So here's a link, looks exactly the same
0:45
but here's a hyperlink and we say btn and then btn-primary.
0:49
There are actually different sizes of buttons
0:52
and six different kinds of buttons.
0:54
We have default, primary, success, info, warning, and danger
0:59
and maybe the one, if you don't even put any
1:02
modifier on there, you might get something else
1:05
I'm not sure how great it would look
1:06
and of course there's just the plain link.
1:08
And there's different sizes: just the standard btn
1:11
there's a btn-small, btn-large
1:13
maybe btn-xs I think at the bottom, I'm not sure.
1:15
Extra small or extra large, I'm not sure which way it goes.
1:18
But here's the choices you have
1:20
and primary doesn't always have to be blue
1:23
success doesn't always have to be green, and so on.
1:25
You can of course, override the themes
1:28
to make these buttons look differently.
1:30
But here's the six categories that you get.
