How to Navigate the Bootstrap Website

Описание: ACCESS the FULL COURSE here: https://academy.zenva.com/product/ful...

TRANSCRIPT

Hello, everyone, and welcome to our tutorial on exploring the Bootstrap website. Here, what we're gonna do is navigate to our Bootstrap website. We're gonna open up the documentation and we'll just take a look at a few examples to gain an understanding of how to use Bootstrap. So, step number one, get to the website. Step number two, open up the documentation part. Step number three, we'll be examining a few choice elements. And step number four, we'll be discovering how to add these elements to our web apps, so we'll be taking a look at the source code themselves. After this, I'd encourage you guys to play around a little bit before moving to the next section just to familiarize yourselves a bit more. So, let's head on over there now. I'm just gonna open a new tab here. I'm using Chrome, although feel free to use whichever browser you'd like and we're gonna search for Bootstrap. We're gonna go to this first link here, getbootstrap.com, and we're gonna ignore this stuff. I'll show you how to download and incorporate Bootstrap a little bit later. What we're gonna do is head on over to Documentation up top. And we're actually gonna skip over this Getting Started. This just shows you how to add in the necessary headers, or rather, the necessary tags to our header file in order to actually gain access to Bootstrap's framework. What we'll take a quick look at is gonna be Layout. Although, we won't spend a ton of time on this because we will be focusing specifically on the grid layout in, I believe, the next section. Just for now, let's take a really quick look at that. You'll note that Bootstrap, this webpage, and pretty much all of the pages in our Bootstrap documentation are formatted this way. They'll have the actual examples of what something will look like using the Bootstrap code, and then the code that is used to generate this. So, this might be a container class, you'd have some content, and it might look something like this. This might be a fluid container class and it might look something like this, okay? Like I said, we'll be using grid for the most part and we'll just take a quick look at that, specifically. Grid is gonna be the basic way in which we'll lay stuff out using Bootstrap. It's actually very easy to use, kind of follows a little bit like the tables in HTML, which will have the overall structure, in this case, just a container. Each is divided into various rows. In this case, this is one row, I believe. The next one is a few rows, so this one is two rows here. And then there are columns for each rows. This is first column, second column, and third column. As you can see, we've got the overall container, we've got one row, and then we have three columns here. So, that's your general grid structure. We will actually come back to this and examine this in greater detail. For now, I just wanna take a really quick look at how the documentation's formatted. So, like I said, most of the pages are laid out this way. We'll have the actual element or what we're trying to understand here. We'll have the actual example as it would be outputted if we were to run the code. And then we would have the code that would actually generate that example. So, if we were to literally copy and paste this into an HTML file with of course the correct tags, and we would then run that page maybe on a browser or something, it would look exactly like this. And that's how the rest of the documentation is going to work. Now, just taking a look at the grid code isn't terribly interesting, so let's jump on over to some components and we'll just take a really quick look at a few of these. So, Alerts, let's start with Alerts 'cause they're the very first element or very commonly used. So, very often, you might click on something and it says you're good to go or maybe it says you can't do that, maybe even need some input. So, we've all used alerts and we've all seen them pop up. Well here, we get to use the custom Bootstrap alerts class and we might get some nice-looking alerts like this. So here are some examples of our alerts, that's the main element that we're looking at up top, and then we'll take a look at some really quick examples.