Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Concept: Dialogs in Bootstrap
0:03 Let's review what it takes to get a dialogue in Bootstrap on a web page.
0:07 Remember, there is two parts, we are going to need some kind of trigger,
0:11 that can be a button, or a hyperlink styles of button
0:15 or even a plain hyperlink if you really want.
0:17 Here, the important part is that we have data-toggle
0:21 and that toggle mode is set to modal
0:23 and the data-target is set to that id of the modal dialogue, so # in CSS means id.
0:30 And then we are going to have to have the HTML fragment to show
0:33 and that is a little more complicated but it's always the same
0:36 so you just copy and paste it, it's fine, we have a class "modal fade",
0:39 of course we are setting the id, if you are going to have more than one thing,
0:43 one dialogue on your page, it's super important that you use different ids,
0:48 HTML is suppose to have one and only one thing with the given id,
0:53 basically id is supposed to be unique per element
0:56 and there is some other stuff that we could set,
0:57 we've got the modal dialogue, the content, the header, the title, the body,
1:01 we also have the data-dismiss.
1:04 If we want to have like a little "close" button in the upper right
1:07 and maybe a "close" or "cancel" button on the bottom
1:10 be sure to give them the data-dismiss="modal".
1:13 And then, you are free to put whatever you want in product details,
1:16 this whole area is just standard HTML, so you can use things like the grid layout,
1:21 and hero images, whatever you need.