Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Buttons and forms
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.