Welcome back, everyone, to this lecture on buttons.
Now we're actually exploring quite a few topics in this lecture, not just specifically HTML buttons
and bootstrap.
In fact, we're going to start off by understanding how best to use the bootstrap documentation for
examples and actually using that code in your own web pages.
And most importantly, being comfortable with not 100 percent understanding every single class call
in the documentation.
That's really a big part of it.
Is feeling OK by just copy and pasting what's in the documentation and then having to figure it out
bit by bit on your own.
Then we'll talk about the button elements in bootstrap.
It's pretty simple.
It's a lot like an input submit button, except they can actually do other things rather than just submit
forms.
Then we'll talk about stacked classes, and then we'll also show you how to override the default bootstrap
styling.
For example, if you want to change the color of the text in a button beyond what bootstrap provides
for you, let's get started by heading over to Visual Studio Code Editor and also having access to the
bootstrap documentation in our browser.
We'll be going back and forth between the two.
All right.
Here I am back inside Visual Studio code.
I want to point out that right now, inside my folder called Django Lectures, I have an example the
HTML file, as well as my own master that csv file.
I'm going to begin by leaving Master.
Let's see SS as an empty file.
Then I will call Doc here, which will automatically set up what I need for the.
So notice it sets up the head and then the body, and as we already know, bodies where our elements
go.
And then the head holds things like links and information.
And so the first thing going to do is make sure that I successfully link this HTML to the actual bootstrap
CSS, as well as my own success, even though technically I don't have anything there yet.
So how do we do this as a review?
You start typing out Link, click this and then we have the relationship, which is going to be a style
sheet.
And then you're going to say your own master, that CSS.
So that's for our own success.
Before I load my master's thesis, if I want my master's thesis to overwrite what comes before it,
like the bootstrap CSS, then I should load right before the link to the bootstrap CIUSSS.
So how do we do that?
Well, you just go to get bootstrap dot com.
Remember we show this in the previous lecture, then you're going to scroll down here and you're going
to go and copy this link right here, which is again, just showing you the relationship for their online
hosted CSS so we can go ahead and copy that.
Copy that to Clipboard.
Come back here, and then I'm going to load this in and you should load it before your own master that
CSS.
OK, so just go ahead and copy, that's going to be kind of long, but you get the idea, it's just
hosting it at some web site.
So there's our link for the CSIS only.
You should keep in mind certain bootstrap components that have interactivity or some sort of interaction
with the user also need JavaScript.
So but you could also do is just come over here and just in case you're going to be using one of those
components.
Also copy this notice.
It's actually not a link tag element, but it's a script tech element, which is the way you can connect
JavaScript to your HTML.
Just going to copy that, and we can also place that.
Right below.
The CSE's for Bootstrap.
So what I've done here is I've linked the CSC for Bootstrap and the JavaScript for bootstrap.
JavaScript is not 100 percent necessary for bootstrap components.
There's just some that have some interaction or interconnectivity that you'll need to actually load
the JavaScript model as well.
So it's a safe practice to go ahead and link both of them up.
And then we've linked our own stylesheet.
So that's step one, just linking everything together.
No, again, right now, our master's thesis doesn't have anything.
So we understand that.
Now I want you to get comfortable using the actual bootstrap documentation.
And more importantly, just being comfortable with the fact that, you know, always going to know on
how to percent what every single class call is doing, which is why you have to explore documentation.
The best way to use the bootstrap documentation is just to have fun with it.
Explore, maybe copy and paste examples without fully understanding what's actually happening here,
because remember, that's really what Bootstrap is for.
Just quickly copy and paste components that you later start to tweak or edit to your own net needs so
you can come here two examples you can.
You can actually download all the examples and download the source code as well.
They'll download it as a zip file.
But one of the ways I like to use this this is just begin exploring what you need.
So maybe you do decide that you're going to have a pricing page or maybe a product page or something
like that, so you can just click here to pricing.
And again, if you're interested in something that looks like this, you would view the page source,
So what's right?
Click without highlighting anything.
Click View Page Source.
That's control you.
And then you can see here.
You don't actually need to load up what's in the head because you'll notice they're actually loading
up their access.
And you also notice that they're loading up if I zoom in here.
Some assets, so they're actually loading up some assets that are available in the docks.
And you'll notice they're also setting up some styles.
So let's just practice right now.
You'll notice there's also a case for custom styles and we're going to do just practice loading up only
what's in the body and just see what happens when you do that.
So we're going to scroll down here and just copy notes.
There's already a table, so some elements we're kind of already familiar with.
You can see it live, so I'm to copy this.
Notice I didn't copy everything.
I didn't copy what was actually in the head.
So we'll see what happens if I don't end up copying all this.
You should probably expect there to be some missing elements.
So inside the body, I'm just going to paste that in.
Save those changes now we see here.
I can see the an example.
And for the most part, it actually looks pretty good.
I'm going to zoom out so you can see, but it kind of looks like normally.
So you can already see I have a pretty good pricing page, just from what I copied and pasted or even
copy anything from the head.
You'll notice that some icons are missing because I specifically didn't actually link those in the top
of the head.
So I mentioned that some of these will actually be loading up.
But for the most part, just off of that, it's already kind of working.
So what's actually going on here?
How would I then do the next steps?
I'd come back here and then start exploring the elements that interests me.
I can see here.
It looks like there's an unordered list and about so I can see heading about unordered list its class
and then I see list items.
So what's actually happening here?
Well, I would just come back to the page.
Start looking was the about and I see about that.
I see teams, location, privacy and terms.
So hopefully you can start to connect the dots, teams, locations, privacy in terms and you realize,
OK, the way bootstrap works here for this particular class list unstyled text small.
And then there's again, a bunch of class calls here.
These are the ways that you can put in links at the bottom of your page that you've seen at other websites.
So now you can start to construct essentially a skeleton of a piece of code, and eventually you'll
probably want to make these links to other places on your website.
So note here there's an h ref, which means I could actually link this to some other part of my web
page.
And later on, we actually start creating websites of Django and actually creating multiple web pages.
I would just pass in some other URL link here, and if so, notice again.
It's actually then an anchor tag within a list item.
And then you start looking here.
You realize, OK, resources, the same thing and unordered list with list of anchor tags and same with
features, and this was all within a class.
And what's nice about bootstrap is it really uses this div class call to organize things.
So you see a div here with these columns, and we're actually going to learn about this later on.
We talk about the grid system of Column six, column medium, what this actually means, but I just
want you to feel comfortable, not 100 percent knowing what the actual classes do, but being able to
break down and understand for yourself just by kind of guessing and checking.
So I see these pieces of text and I'm interested in that.
I come here searching for those texts, so we kind of already understand that here there's features,
resources in about and each of these is just an unordered list of anchor text.
So if I wanted to remove those, I can actually just then come here and remove these three things.
And notice now, if I come back to my website, I won't see that bottom anymore.
And really, this might be one of the easiest ways to begin to understand bootstrap is to look at the
examples and then see how do they work.
And if I start editing or removing things, then what actually changes?
So, for example, if we're interested in what does this compare plans structure, how does this actually
work inside the HTML?
Well, you just come back to the HTML and you'll end up realizing, Oh, this is actually just a table.
I can see there's a table head with free pro and enterprise.
And they were kind of smart and they left one of them blank.
And then they're assigning width to them to make the blank one a little wider.
So I come back here and I realize, OK, there's technically a blank column here that's a little wider
and really, it's just the header that's blank that way.
Public private permissions.
Those categories can't create this kind of like index feature.
So I have three column heads that are name free enterprise.
And then this blank one here and then there's a little check marks, etc. So you can see here I have
private and then more table rows.
So if I wanted to get rid of that table, I could just come back here and delete this entire div.
And then if I open this up, I should see just compare plans and I was able to remove that table.
And if I want to add it back in, I could begin to customize my own table.
Then if interested in how this works, free pro and enterprise, you just start exploring that as well.
So you'd come back up here and say, OK, well, what kind of objects are these?
I see 30 users, 50 gigabytes of storage.
You realize this is within a class called column, and these are actually then known as cards within
bootstrap.
So you start figuring out, well, what are these cards?
How do they work, cetera?
What can I edit here?
And then if you were really confused because maybe this is a little something more unique towards the
bootstrap, the idea of cards, you would come to the documentation.
Check out box and then you can search the box for carts.
Since you kind of know already, OK, well, that had something to do with cards, and you'll realize
it's just this flexible container, and it includes options for headers and footers and then content.
And so you have this little really basic card title.
And it'll start telling you how it works, that it's a class card.
There's a card body as a division here and then card title card text.
There's buttons, content types and it'll just show you more and more examples until you feel comfortable
with what's actually going on inside these cards.
And typically, they're examples of a lot of things towards the end that you can then start removing.
So often it's easier to get the most complex example and just remove the stuff you don't need.
They try to build up to the stuff that you do need, but you can see here.
Cards are this really awesome part of bootstrap that you can see across websites being used all the
time?
All right.
So that's just the kind of the basics of how to use Bootstrap, in my opinion.
Again, there's no right or wrong way to do this, but I just want you to get comfortable with being
able to copy things from the documentation or examples without 100 percent knowing what every single
class call is doing.
Again, we're not really focused too much on the front end for this entire course, but we do want you
to feel comfortable with being able to explore documentation even if you don't necessarily know every
single class call.
So what I'm going to do now is I'm going to do everything that was in this body.
I just want to focus on that example of the buttons I mentioned earlier.
So let's go ahead and get rid of this other container here and everything that's inside the body.
So you should just have the opening body tag and the closing one, as well as the links to bootstrap.
So we're going to do is talk a little bit about buttons and then also show how to overwrite components.
So you can see here there's a ton of components, there's an accordion component, you can see it's
an accordion because it kind of shrinks and expands.
There's the breadcrumb component, which is the way of like leaving little breadcrumbs to go in other
places on your website.
And we're going to do here is check out buttons and you will notice that there's a bunch of buttons
that are available for you in bootstrap.
And eventually we can do is change these buttons to be things like submit buttons, and you'll notice
that there's actually stacked classes on these.
That's something we have seen before in our case, but I do want you to be aware that you can actually
end up stacking classes on top of each other by simply saying one class call a space and then another
class call.
So if I wanted these buttons here, primary secondary success, et cetera, I am going to go ahead and
copy these.
So I'll copy that to my clipboard and let's just put those in.
OK, so now I see a bunch of buttons here.
Again, I'm going to look a little strange because I don't have any padding or spacing on them, but
I can see a primary secondary success danger warning info like dark and then some sort of link.
Now you'll notice that the all have the same button class as a base class, but then there's an extra
class that the add on to some of these.
This extra class really includes the coloring.
So if I were to delete button primary, you'll notice that suddenly it becomes a white button.
So hopefully this starts teaching you that, OK, this BTN dash and then some other call is really more
linked to the coloring of that button.
And it's also nice because it colors it in a way that's informative to you as far as, like what this
color represents.
So we can think of BTN Danger as saying, Hey, are you sure you want to cancel who's dangerous or some
sort of warning?
And you can see the colors kind of reflect that red and yellow are typically meant to stop or slow down.
And if you want to get rid of those, you can simply say B10 warning.
Delete that.
And you notice suddenly it turns into a white button, and then you can also edit the text to say whatever
you want.
OK, so clearly there's a lot of stuff going on here.
Now you may be wondering, Well, I don't want these exact colors for success.
I understand that I can stack the classes.
There are some base BTN button class, and I also understand that there's then these additional classes
that deem something like success.
The secondary button info light dark.
And eventually, for my particular color scheme and my website, I want to change some of these.
So you should be OK if the BTN as the general button class, but maybe you want to change the actual
color scheme.
There's many different ways of doing this, and one way is to actually use the SAS color themes of bootstrap.
But to keep it simple, we'll just show you how to do this by overwriting a class in CSS.
So what we do is remember, we're loading our master CSS after we load the bootstrap CIUSSS and the
bootstrap JavaScript.
And if you just want to edit these colors with a simple CSS call, what you can do is let's go ahead
and edit the danger button to be a different color.
So I take note of that class.
I'm a copy.
That class comes to my own CSV file.
And then.
But beating danger.
And then.
I can say something like color, actually, in this case, I'll change the background so I can say background
color, and let's make that background color red kind of a bright red.
You can see it changed, but just to make it super clear, I'm going to change.
It's something like purple.
And you can see as I change, this is changing as well.
You can also see there's actually a little border around it.
So you can change that as well the border color.
But this is just to give you an idea of how to overwrite these colors simply with your own CSV calls.
There's technically better ways of doing this by editing an entire color theme, but this probably the
simplest and easiest way to do it, given what we know so far, which is just call that same class.
If in your own system that you load after the bootstrap CIUSSS and just start editing the properties
you want, like background color or even the text color.
If you want to change the text color, you just say color and then maybe call it black.
And you could see here now it's been changed to black.
Now you will notice there are special aspects of these buttons that when you hover over it, it suddenly
changes back to red.
This was not super clear, given that it's actually a very subtle effect within bootstrap.
But there is this idea of changing on hover.
And this is slightly more advanced, CSE's, but the way you do this in general for components, if
you do want them to change aspects on hover, is you call that class like BTN danger.
And then you say, colon hover.
And now you can actually see us attributes that will only take effect when the mouse is hovering over
the element, just to make it clear.
I'll say background color.
And let's make this background color blue.
And let's make the text rental also say color is red.
So now notice I have the default and then the colors when something's hovering over it.
So now you're actually seeing this change to whatever.
I just said, they're background color blue and then red again, slightly more advanced.
This won't really be dealing with this too much, but if you ever kind of curious about this sort of
thing and just do a Google search for how to change the assess properties on hover and you would eventually
figure this out.
OK, so that's really the basics of what I wanted to talk about here.
And again, as a quick review, you just copy and paste the CC in JavaScript here.
Use the documentation to your advantage.
Again, you don't need to understand 100 percent what's going on.
Just feel comfortable with deleting class calls and editing class calls and then looking that up in
the documentation.
And if you ever want to overwrite your own stuff on the CC, these come to your own M.S. Assess and
then call those classes and edit what you want.
And then a lot of bootstrap is pretty sleek, and a lot of things change on hover.
So if you're want to deal all that, you can just call Colin hover on that class.
OK, thanks.
And I'll see at the next lecture.