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. Here you can see a "get updates", where people can subscribe to the newsletter for notifications
0:09
on things like new classes and so on. Now in here, this is submitting that form that posts your email address to the thing
0:17
that actually puts you in the newsletter. So this one is a button, and we want it to be nice and red, I've heard that red converts well
0:25
even though it's marked as dangerous it's somehow attractive. So btn and then btn-danger is what we used here. You can also do this with links
0:33
so here's a link that just takes you from the course's page to the podcast page to encourage you to, you know
0:40
get more out of interacting with me basically. So here's a link, looks exactly the same but here's a hyperlink and we say btn and then btn-primary.
0:50
There are actually different sizes of buttons and six different kinds of buttons. We have default, primary, success, info, warning, and danger
1:00
and maybe the one, if you don't even put any modifier on there, you might get something else I'm not sure how great it would look
1:07
and of course there's just the plain link. And there's different sizes: just the standard btn there's a btn-small, btn-large
1:14
maybe btn-xs I think at the bottom, I'm not sure. Extra small or extra large, I'm not sure which way it goes. But here's the choices you have
1:21
and primary doesn't always have to be blue success doesn't always have to be green, and so on. You can of course, override the themes
1:29
to make these buttons look differently. But here's the six categories that you get.