Building Data-Driven Web Apps with Flask 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
Let's review some of the core concepts here. We saw that buttons in Bootstrap are easy. Here's a button and this one actually submits
0:08
a form right on the homepage of Talk Python Training. So, in HTML we have a form, it's going to post back to get notified, it has method post
0:17
and some inputs and so on. And then here we have a button and the class is btn and then btn-danger that tells Bootstrap to make it this red color
0:26
and round it and look like all the other Bootstrap buttons. We also saw that links can be buttons just as well. On the homepage of the training website
0:35
as it is today at least, if you scroll down there's a link that says go check out the podcast and I want that to look like a button
0:41
just like the get notified, but in fact in HTML this is a hyperlink. How does this change from being a button to a hyperlink?
0:48
Well, all you do is put exactly the same CSS classes on there, btn and this time btn-primary to make it blue by default.
0:56
There are actually six types of buttons the default one which is you don't say default you just don't have any modifiers there.
1:02
Then we have primary, success info, warning, danger and then nothing at all which is just a link. So, you can choose among these
1:11
you can even create your own extensions but the idea is that you don't say blue green, orange or whatever, you put some kind of category on it
1:18
and then you style around that category with modifying themes and so on. So buttons, whether they're true buttons
1:25
or just hyperlinks are really, really nice and super easy in Bootstrap. So make sure to use them plentifully.