Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Buttons and forms
0:00 Let's review some of the core concepts here.
0:02 We saw that buttons in Bootstrap are easy.
0:05 Here's a button and this one actually submits
0:07 a form right on the homepage of Talk Python Training.
0:11 So, in HTML we have a form, it's going to post back
0:14 to get notified, it has method post
0:16 and some inputs and so on.
0:17 And then here we have a button
0:19 and the class is btn and then btn-danger
0:23 that tells Bootstrap to make it this red color
0:25 and round it and look like all the other Bootstrap buttons.
0:28 We also saw that links can be buttons just as well.
0:32 On the homepage of the training website
0:34 as it is today at least, if you scroll down
0:36 there's a link that says go check out the podcast
0:39 and I want that to look like a button
0:40 just like the get notified, but in fact
0:42 in HTML this is a hyperlink.
0:45 How does this change from being a button to a hyperlink?
0:47 Well, all you do is put exactly the same
0:49 CSS classes on there, btn and this time
0:51 btn-primary to make it blue by default.
0:55 There are actually six types of buttons
0:56 the default one which is you don't say default
0:59 you just don't have any modifiers there.
1:01 Then we have primary, success
1:03 info, warning, danger and then nothing at all
1:05 which is just a link.
1:07 So, you can choose among these
1:10 you can even create your own extensions
1:11 but the idea is that you don't say blue
1:13 green, orange or whatever, you put
1:16 some kind of category on it
1:17 and then you style around that category
1:19 with modifying themes and so on.
1:21 So buttons, whether they're true buttons
1:24 or just hyperlinks are really, really nice
1:26 and super easy in Bootstrap.
1:27 So make sure to use them plentifully.